부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-2 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

2. HTML - FE

2) HTML Layout 태그

 

[2] 개념 정리

  이번 시간에는 레이아웃을 위한 HTML 태그를 배워보도록 하겠다.

‘레이아웃(Layout)’ 이란 ‘배치'라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지를 결정하는 것을 말한다.

기본적으로 상단의 <header>, 하단의 <footer> 그리고 가운데의 본문 영역이 있다.

 

레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용된다.

• header
• section
• nav
• footer
• aside

 

html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 된다.

지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성된다.

 

[3] 강의 정리

  이번 시간에는 레이아웃을 위한 HTML 태그에 대해서 알아보도록 하겠다. 레이아웃이 무엇일까 HTML 화면을 구성한느 어떠한 기본적인 모습들을 얘기하는 것이다. 상단의 header, 하단의 footer 그리고 가운데에 본문 영역이 있다. 또 웹사이트를 보면 내비게이션 해주는 그런 영역도 있다. 우리가 네이버 사이트를 한번 들어가 보겠다. 상단 영역 다음에 본문 영역이 쭉 있고 하단에 footer 영역이 있다. 하단 영역들이 있다. 이런 영역들은 대부분 다 어떤 의미를 가지고 있다. navigation 이라던가 그런 영역들은 다 의미를 가지고 있다.

  모바일 웹사이트를 한번 들어가서 분석을 한번 해보겠다. m.naver.com을 가고 제가 크롬 개발자 도구의 Element 탭에서 이 인스펙터를 눌러서 한번 상단 영역을 클릭을 해보겠다. 상단 영역이 보면 div라고 돼어있다. div에 header, 이렇게 되어있다. 클래스를 header를 넣었다. 실제로 header라는 태그를 쓰지 않고 div에 CSS 클래스를 넣어서 이렇게 header라고 표현을 했다. 그럼 하단의 영역은 또 어떻게 했는지 한번 알아보겠다. 하단의 영역은 또 footer라는 태그를 썼다. 사실은 footer 대신에 div를 써도 되는데 이 footer라는 태그를 제대로 인식하게 되는 그런 브라우저 지원 범위가 제한이 있다. 물론 오류는 나지 않지만 footer가 생겼다는 게 HTML5에서 새로 추가된 태그이기 때문에 보통 데스크탑 버전에서는 쓰지 못하고 최신 브라우저가 많은 모바일 환경에서는 이렇게 footer를 쓸 수 있다. 사실은 내부에서의 어떤 동작은 의미만 footer, header 읽는 것이지 이 div랑 똑같은 일을 한다.

  CSS를 아신다면 아시겠지만 이런 것들을 블록 엔리머트라고 한다. 블록을 가지고 있는 엘리먼트들이다. 여기도 footer 여긴 또 footer 이렇게 div 클래스에 footere 이런 걸 쓴 것도 있다. nav 이런 걸 쓴 게 있는 지 한번 알아보겠다. nav 여기 있다. 어느 부분일까. nav, scroll_wrap 이 부분이다, 위에. 뉴스, 연예, 스포츠, 웹툰, 푸드 부분이다. 이걸 nav라는 태그를 써서 이 부분이 navigation 라고 하는 것이다. 이렇게 또 nav라는 태그도 썼다. aside 이런 태그는 쓰지 않았다.

  section, 어떤 색션들을 어떤 걸 썼는지 알아보겠다. 이 부분은 검색 부분이데 이걸 하나의 section 태그를 줘서 영역을 그냥 지정을 한다. article 이런 태그를 쓰지는 않았다. 그럼 aside, aside도 쓰지는 않았다. 간단하게 이제 네이버에서 어떻게 썼는지 알아봤는데 우리가 한번 jsbin.com을 들어가서 이 태그들을 써보겠다. header에다가 이 부분은 header 영역이라고 표시를 하고. 그 다음에 footer예요라고 했다. 그 다음에 nav, navigation은 이렇게 되어있다. home 예를 들어서 그 다음에 news 그 다음에 sports 이렇게 표시를 하는 것이다. 이렇게 나와있다. 여기서 nav, ul, aside 이런 게 있고 aside라는 것들을 표시할 수 있다. aside도 다른 사이드 쪽에서 추가적인 것들을 표시할 수도 있다. 예를 들어서 여기도 똑같이 ul에 li에 로그아웃. 그 다음에 오늘의 날씨 이런 추가적인 정보들. 이런 것들을 운세 이렇게 표시할 수도 있다. 그래서 header 영역, footer 영역 그 다음 또 본문 영역 이렇게 나눈다.

  보통 또 본문을 div를 많이 쓴다. 그래서 id 값을 body, wrap이 container 하던가. 이런 것들을 많이 쓴다. container div로 하고 이걸 이렇게 감싸주고 CSS 닫아놓고 여기를 보면 div를 감싸주고 이 부분을 이렇게 표시를 많이 한다. header, 또 container id를 가진 div. 그 하위에 navigation, aside, footer 이렇게 레이아웃을 구성한다. 우리가 CSS를 이 시간에 다루지 않지만 HTML 이런 레이아웃 태그로 어떻게 실제 화면을 구성하는지 한번 구글에서 검색을 하겠다. html5 layout tag. HTML Layouts 태그, semanic Elements 이런 게 있다. 이미지 검색을 해보자. 이렇게 돼있는 걸 알 수 있다.

  header, nav, section, aside, footer 웹 화면에 이 영역마다 이 하위에는 이제 복잡한 검색창이 들어가고 또 여러 가지 나오겠지만 전체 구성은 이런 식으로 이런 태그들을 이용해서 쓸 수 있다. html header 태그들은 한번 알아보려면 이렇게 검색을 하면 된다. HTML 태그, header는 이렇게 쓰는구나 알 수 있고, 이렇게 볼 수 있다. HTML 4.01 그리고 5.0에서 이렇게 쓰인다고 나와있다. header 태그는 HTML5에서 새로운 태그라는 것이다. 지금까지 알아봤다.

  HTML 태그, header 태그를 이용해서 좀 알아봤다. 이거를 물론 IE 이전 버전에서 쓴다고 해도 오류는 나지 않지만 제대로 동작하지 않을 수 있기 때문에 이거를 또 쓸 수 있게 해주는 라이브러리들도 물론 있다. 이런 걸 써도 되고. 대부분 PC 유저는 div 태그로 이런 headr 나 nav 이런 걸 footer 이런걸 쓰지 않고 그냥 div에다 클래스로 이름을 header, footer 이렇게 많이준다. 그 다음에 모바일에서는 이 태그들을 많이 사용 한다. 모바일 사이트에서 크롬 개발자 도구로 한 번 찾아보면 이런 식으로 많이 쓰이고 있다느 걸 확인할 수 있다. 이상으로 레이아웃 태그에 대해서 한번 알아봤다.