오늘은 HTML, CSS, JavaScript에 대해서 간략하게 배웠다. 웹 개발/디자인에는 전혀 지식이 없는터라 강의 자료를 통해 개념만 대충 이해했다 뿐이지, 크롬에서 F12를 눌러서 코드를 보면 뭐가 뭔지 도무지 알 수가 없다. 오늘 과제는 내가 선택한 랜딩페이지의 HTML/CSS/JavaScript 요소를 정리하고 분석하는 일이고, 따라서 사이트의 구성이 간단하게 여겨졌던 네이버 뉴스를 분석하기로 했다. 네이버 뉴스에 대해서는 별 다른 설명이 필요 없다고 생각하므로, 바로 페이지 레이아웃에 대해 얘기해보겠다.

 

네이버 뉴스 페이지 레이아웃

 

아래 왼쪽은 네이버 뉴스의 랜딩 페이지를 캡쳐한 화면이고, 오른쪽은 랜딩 페이지의 레이아웃을 간소화한 그림이다.

 

 

대부분의 웹사이트와 같이 상단에 header 섹션이 위치해 있고, 가운데 main 섹션은 3개의 칼럼으로 나뉘어있다. 그리고 메인 섹션의 우측에는 작게 aside 섹션이 자리하고 있다. 마지막으로 하단에는 footer가 위치해 있다. 따라서, 크게 보면 총 3개의 섹션(header, main, footer)으로 나뉜 것을 알 수 있다. 물론 예외도 있겠지만, 오늘 과제를 정하기 위해 둘러본 7~8개 사이트들이 모두 이와 같은 레이아웃으로 구성되어 있었다.

 

HTML 이란?

 

HTML(HyperText Markup Language)은 웹페이지를 이루는 가장 기초적인 구성요소이며, 웹사이트의 여러 요소들의 의미와 구조를 정의할 때 사용하는 마크업 언어다. 우리가 글을 쓸 때 서론-본론-결론이 있듯이, HTML도 마찬가지로 비슷한 느낌의 구조로 작성할 수 있다. 이해를 돕기 위해 아래 그림을 보도록 하겠다.

 

 

위에 DOCTYPE은 무시하고, 바로 <html>을 보도록 하자.

 

HTML 문서의 시작은 <html>로써, HTML 문서 내용이 아래에 이어진다. 그리고 HTML 문서가 모두 입력이 되었으면 마지막으로 </html>을 입력하여 HTML 문서가 끝났다는 신호를 보낸다. 시작과 끝은 한번 밖에 있을 수 없으므로, <html>과 </html>은 한 페이지에 한 번씩 밖에 나올 수 없다.

 

<head> 섹션은 문서의 메타데이터를 정의하는 곳이다. 따라서, 해당 섹션에 입력된 내용들은 페이지에 디스플레이 되지 않는다. 위의 예시와 같이 HTML 문서의 제목을 입력할 수도 있고, CSS와 script를 정의할 수 있다. 

 

<body> 섹션은 우리가 웹페이지를 이용할 때 눈으로 보게되는 내용들이 정의되는 항목이다. 앞서 언급한 페이지 레이아웃 요소 3가지(header, main, footer)가 모두 <body> 섹션 안에 입력된다.

 

이해가 어느 정도 되었다면 이제 네이버 뉴스의 HTML은 어떻게 구성되어 있는지 몇 가지 요소를 골라서 알아보도록 하겠다.

 

네이버 뉴스의 HTML 구성 요소

 

 

위는 HTML 문서를 최소화해서 head와 body만 보이게 축소한 화면이다. 앞서 말한대로, <html> - <head> - <body> - </html> 순서로 구성된 점을 알 수 있다.

 

<head> 섹션

 

 

웹페이지의 메타데이터가 입력되는 곳이다. 첫번째 줄 <title id="browserTitleArea">네이버 뉴스 </title>에서 웹페이지의 제목이 입력되는 것을 알 수 있다. 다음으로 <link rel="stylesheet" type="text/css" href="https://ssl.pstatic.net/static.news/mnews/resources/20221006_055519/css/generated/newshome.css"> 에서 웹페이지의 디자인을 구성하는 CSS stylesheet를 <head>에서 불러온다는 점을 알 수 있다. (CSS stylesheet에 대해서는 뒤에 자세히 얘기하도록 하겠다.) 그리고 웹사이트에 기능을 부여해주는 여러 script와 웹사이트 정보 역할을 하는 여러 metadata가 입력되는 과정을 볼 수 있다. 이와 같이 <head> 섹션은 HTML의 <body> 섹션에서 수행해 나갈 기능들을 미리 정의해주는 역할을 하는 걸 볼 수 있다.

 

<body> 섹션

 

HTML의 대부분을 차지하는 <body> 섹션이다. 여기는 실제 우리가 눈으로 보는 페이지의 요소들을 위치시키고 정의한다. 아래 화면을 통해 어떻게 구성되어 있는지 알아보겠다.

 

 

실제 페이지 레이아웃과 동일한 순서(header-main-aside-footer)로 각 항목들이 정의되어 있다. 

 

  1. <section class="news_header">
  2. <section class="main_content">
  3. <section class="main_aside">
  4. <div class="mp_footer">

 

재미삼아 header와 footer의 위치를 바꿔보았는데, 바로 페이지에 반영이 되었다.

 

 

방금 전 실험을 통해 HTML이 위에서 아래로 렌더링 된다는 점을 찾아낼 수 있었다. 아마 이런 이유로 stylesheet나 script가 대부분 <head>에서 정의가 되는 거 같다. 이제 전반적인 구조에 대해서 알았으니, 한 요소를 골라서 그 안에는 뭐가 있는지 알아보자.

 

 

위 그림은 header은 네비게이션 메뉴인데, 현재 "언론사별" 페이지에 들어왔기 때문에 글씨가 파란색으로 표시되어있다. 해당 요소의 HTML은 어떻게 구성되어 있고, 각 요소들이 무엇을 의미하는지 알아보도록 하겠다.

 

 

  • class="Nlist_item is_active"
    • "언론사별" 항목이 현재 활성화 되어있다. (이 페이지가 지금 열려있다는 뜻)
  • href="https://news.naver.ccom/?viewType=pc"
    • 해당 글씨를 클릭하면 href에 정의된 링크로 이동한다
  • onclick="nclk(event,'lnb.pcmedia','','')
    • 버튼을 누르면 nclk라는 함수를 실행한다. (nclk가 무슨 역할을 하는지 도무지 찾을 수가 없다...)
    • 한 가지 알 수 있는 건 함수의 2번째 입력값이 어느 페이지로 이동하는지 뜻한다는 것이다
  • class와 role은 개발자가 항목을 구분 짓기 위해 표시한 이름이라고 생각한다. 그리고 aria-selected가 true로 되어있으므로, 해당 항목이 현재 선택되어있다는 뜻이다. (area인데 개발자 오타인 거 같다. 아니면 aria란 전문 용어가 따로 있을지도...)

 

이와 같이 버튼 하나를 정상 작동시키기 위한 HTML 요소가 무엇이 있는지 알아보았다. 이제 CSS는 어떤 식으로 구성되어 있는지 알아보겠다.

 

CSS 구성요소

 

페이지의 CSS 요소를 확인하다 흥미로운 점을 하나 발견했다. 페이지의 모든 구성 요소들이 CSS 정보를 newshome.css에서 가져오지만 aside 섹션만 CSS 정보를 aside.css에서 가져왔던 것이다. 그래서 이유가 무엇인지 알아봤더니, aside 섹션은 네이버 뉴스 페이지의 구성 요소가 아니라 다른 페이지가 embed 된 것을 알 수 있었다. 아래 화면의 2번째 줄의 첫 부분인 iframe이 "https://news.naver.com/aside?oid="를 불러오고 있는 것을 확인할 수 있다. 실제로 이 주소를 치면 aside 메뉴만 나온다.

 

 

aside 섹션에 대한 얘기가 나왔으니, 해당 항목의 CSS는 어떤 식으로 구성되어있는지 알아보겠다.

 

 

그리고 CSS 정보는 아래와 같이 구성되어있다.

 

 

여기서 우리는 이 정보들이 해당 섹션의 디자인을 나타냄을 알 수 있다. 그리고 동일한 내용이 aside.css의 29번째 줄에 위치해있다. 이제 CSS를 수정하면 어떻게 되는지 예시로 두 개 요소의 값을 바꿔보겠다.

 

  • 배경색 = 흰색에서 노란색으로 변경 (background-color)
  • 테두리를 직각으로 변경 (border-radius)

 

 

이와 같은 형태로 CSS를 수정하여 페이지의 디자인이 변경되는 것을 확인할 수 있었다.

 

 

JavaScript 분석

 

JavaScript 동작 원리를 알기 위해서 많은 시간을 투자했지만, 얻은 게 없었다.. 일단 현재까지 발견된 점만 이야기 나눠보겠다.

 

위에 있는 새로보기 버튼에 대한 HTML 정보는 아래와 같다.

 

 

여기서 onclick 항목의 nclk가 JavaScript 함수라고 생각되는데, 이유는 event, 'home.editndnew' 등의 입력값이 들어가기 때문이다. 그리고 여기서 'home.editndnew'가 새로보기의 역할을 한다고 생각한다. 하나의 예시를 더 들어보겠다.

 

 

위는 검색창에서 검색 버튼을 실행하는 HTML 정보인데, 여기서도 마찬가지로 nclk 함수에서 'gnb.schn'을 입력하면 검색 기능이 실행된다는 걸 알 수 있다. 

 

결론적으로 nclk가 네이버 개발자가 생성해놓은 JavaScript 라이브러리이지 않을까 싶다.

 

 

 

오늘은 너무 새로운 걸 공부하느라 오랜 시간이 걸렸다. 머리가 아파서 글도 머리에서 생각나는대로 대충 썼다. 힘든 하루였다. 이제 자야지.

+ Recent posts

티스토리툴바