레이아웃 (9) 레이아웃 작성 순서 요령

1. 레이아웃 작성 순서의 요령

 

(1) html요소는 부모부터 자식 순서로 만든다. (계층 구조에 주의!)

 (main 메뉴 혹은 submenu)- - list&컨텐츠 - a태그로 마무리

 

1단계	2단계	3단계	4단계	5단계
시멘틱 태그 & id	내부 class  (main menu)	내부 class (sub menu)	컨텐츠 (이미지와 텍스트)	a태그

 

(2) css는 크기&넓이, - 배치 속성 - 세부 조정 순서로 만든다.
     단, 제작시 초기화 하는 요소에 주의한다.

작성 순서 : 폭과 높이 / 배치 속성(float,position) / 세부 조정

 

1단계	2단계	3단계	4단계
width&height	float & clear	margin&padding
	position : absolute	top & left	margin&padding
	position : relative	top & left	margin&padding
	position : fixed	top & left	margin&padding

*여기서 padding-relative와 absolute는 주로 슬라이드 쇼에, fixed는 모달 레이어 팝업에 주로 사용된다.

 

(3) <p>, <ul>,<li> 등은 반드시 margin과 padding을 초기화한다.

    - 메뉴 바의 padding 값 때문에 세부 조정 위치가 어긋나는것을 사전에 미리 방지하기 위해
      <p>, <ul>, <li> 등 텍스트 기반 요소를 작성 때 margin&padding 설정이 되어 있는 경우,
      margin:0 혹은 padding : 0으로 초기화한다.

   

    - 또한 ul&ol 요소는 반드시 시작 전, list-style을 삭제한다. 

 

(4) jquery를 이용한 영역은 기본 레이아웃 작성 이후 제작한다.

    - 서브메뉴, 모달레이어 팝업 같은 jquery를 사용해서 효과를 지정해야 하는 경우,

      기본 레이아웃 작성 후에 display:none; 옵션을 마지막에 부여하여 가려둔다.

 

(5) 컨텐츠 내 <a>태그 옵션을 반드시 지정한다.

  - 맨 마지막에 작성 후, text-tecoration:none; 와 color:inherit 로 텍스트 컬러와

    밑줄 효과를 삭제한다.

 

 

*tip

(1) background-color: 옵션을 활용해서 현재 작성하는 사이즈가 맞는지 눈으로 확인한다.

(2) 영역크기를 계산할 때, margin, padding, border의 전체 사이즈를 합산하여 계산한다.

(3) :hover효과를 제작할 때는, 복사 붙여넣기를 활용해서 제작하면 빠르게 제작이 가능하다.