레이아웃을 하기 위해 알아야 하는 선행 지식, html 상식

어제 배웠던 수업 내용 정리.

어제는 레이아웃을 직접적으로 하는 건 아니지만

레이아웃을 만들기 위해서 알아야 하는 선행 지식을 배웠다.

 

본가에 내려와서 쓰는 중인데

하필 윈도우XP라 어도비 브라켓이 지원되지 않는다 ㅠㅡㅠ

노트북 들고 올 걸... 으엉엉엉엉엉

 

그래서 오늘은 이미지 없이 일단 내용만 정리해보기로 한다.

나는 웹표준 수업을 들은지 이제 한 달 지난 초짜기 때문에~

내가 배운 내용을 정리하는 용도이므로 오류가 있을 수 있다!

만약 오류가 있다면 댓글로 친절히 알려주긔

참고로 내 의문사항은 밑줄이 쳐져있다.

 

 

요소 레벨(Element Level)은

태그가 어떻게 보여지는가에 대한 구분이다.

 

예를 들어서 

<strong> 태그는 글씨를 진하게 하고,

<em>은 글씨를 기울게 한다.

 

동일한 효과를 주는 태그는

<b>, <i>가 있지만 xhtml에선 안 쓰고 css로 대체한다.

 

근데 선생님이 요소 레벨 얘기하면서 이 얘기는 왜 하셨더라..

기억이 나질 않아효...

 

 

암튼 요소 레벨은 크게 두 가지가 있다.

 

1. 블록 레벨(Block Level)

독립된 행을 갖는 요소 집합이다. 즉 줄이 바뀌는 태그들!

"그 공간을 얼마나 썼는지랑 무관하게 무조건 다 내꺼~"하는 태그들이다.

행 전체를 사용한다.

 

p, h1~h6, ul, ol, li, div, table... 같은 태그들!

다른 블록 레벨 요소와 인라인(블록과 반대) 요소 포함이 가능하다.

예를 들어서 <div><p></p><di>처럼 

 

하지만 예외도 있는데,

p, h, dt, address 같은 일부 요소는 다른 블록을 포함할 수 없다.  
<p>태그 안에 <div> 못 쓰는 것처럼!

 

block elements의 default width는 auto다. 

default height 역시 auto.

대신에 그 컨텐츠만큼 높이를 가지는 것이 특징이다.

 

따라서 div에선 height를 주면 안 된다.  
height 주면 고정돼버려서 overflow가 생길 수도 있기 때문!

만약 높이 300짜리 이미지를 넣었는데

height를 200을 줘버리면 100은 잘려버리게 된다는 것.

 

overflow는 css에서 관리(?)할 수 있는데,

<style>
a{overflow:visible, scroll, auto, hidden}
레이아웃에서 꼭 기억해야 하는 것이 overflow다.

inherit 상속, 부모의 값을 물려 받는다. 

거의 쓸 일은 없으나 이해만 하고 있으면 된다고 하는데

내가 과연 이해를 잘 했는지 모르겠다 ^^.. 
width가 200이면 width:inherit=200
auto 넘치는 방향으로만 스크롤바가 생긴다!!!

 

크기 지정, 위치 조정 가능(중요★ 인라인에선 안 됨)

근데 크기나 위치 조정이 가능하더라도

어차피 overflow 되는데 이게 의미가 있나? 따흐흑..

그리고 인라인 레벨에서도 css 사용하면 되자너....

 

 

2. 인라인 레벨(Inline Level)

a, em, strong, img, span ... 등 

범위 표시 요소의 집합이다. 
크기, 위치 조정이 불가한데 예외는 img. 
<img width="" height="">

 

블록 레벨과 달리 줄이 안 바뀐다고 생각하면 된다.
크기가 적용 된다고 하면 

크기 변동이 있어야 하지만 변화가 없다!

 

높이 속성은 사용이 불가하지만  
css 속성 중 일부는 요소의 레벨을 다른 레벨로 바꾸기도 한다

예를 들면 position, display.

display:table-cell은 td처럼 인식하기 때문에 vertical-align 사용이 가능하다. 
display는 요소의 레벨을 바꾸는 속성이다!!

주로 쓰는 값들은 block(block처럼 보이게 해~), inline, inline-block, none(보이지 마, css로 감추는 방법 중 하나!!)

즉, 어떻게 보여라! 라는 속성임!! 
인라인 레벨은 블록 레벨 요소는 포함할 수 없고, 인라인 요소만 포함이 가능하다. 
a 태그는 html5에서 블록을 담을 수 있다. 하지만 xhtml은 안 됨!

참고로 나는 xhtml로 배우는 중..

 

 

레이아웃 기본 구조는 크게 세 개로 나뉜다.

1. header
상단 로고, GNB, topmenu 등
주로 페이지 안내(이동)에 관한 요소를 포함한다. 
홈페이지 모든 페이지에 노출된다.
GNB:Global Navigation Bar - 메뉴바

페이지마다 보이는 대분류라고 생각하면 편할듯.

2. content(main, html5에선 main 태그가 생김!)
*페이지별 내용, LNB, 배너, 게시판, 퀵메뉴 등
해당 페이지에서 나타내고자 하는 내용을 작성한다.
Local Navigation Bar는 사이드 메뉴인데 지역적 메뉴로, 특정 페이지에서만 볼 수 있는 메뉴다. 
메인메뉴(대메뉴)에 포함된 하위메뉴(소메뉴)의 집합! 

3. footer
회사나 사이트에 대한 정보를 입력한다.
각종 연락처, 관리자 정보, 약관 및 정책, 카피라이트 등.

만약 카피라이트가 없으면 홈페이지에 있는 이미지나 내용을

마음대로 누구나 가져다 써도 된다는 의미기 때문에 꼭 넣어줘야 한다. 
그 다음 사업자등록번호, 통신판매업신고 같은 것도 넣어야 된다.

4. 기타 요소(SNS, 검색, 관련 사이트 등)는 필요한 위치에 추가! 


위치를 알려주는 게 Layout인데  
요소 레벨이라는 개념을 알아야 이해할 수 있다고 한다.

 

아 그리고 웹표준검사 사이트 선생님이 추천해주셨다.

validator.w3.org

The W3C Markup Validation Service

이건 오리지널 사이트고

한국 사이트 주소는 validator.kldp.org/ 다.

뭐가 틀렸는지 체크해주기 때문에 유용하다!!

 

다음 시간엔 실제 layout에 관여하는 css에 있는 속성들을 배우기로 했다!  
Layout - float, position 예습이 숙제다.

수업 내용 정리 끝!!