퍼블리싱_기본공식 필수숙지!
- width는 밖에서 높이는 안에서
(li는 밖에서 width , 높이는 a 에서)
- 부모를 이동, 안에서 좌우간격
(ul 부모를 잡고 li 는 안에서 좌우간격 및 내용채우기)
- 메인섹션 main_사용, 안에선 사용하지않음
- 메인섹션은 100%로 두고 .inner에서 가로잡고 margin:0 auto;
(inner는 가운데 크기잡고 정렬하기 위해서)
- 특별한 경우가 아니면 높이지정 금지(알아서 내용만큼 잘늘어나므로)
(헤더 제외 높이 잡기 금지)
- 안쪽에 높이 있을경우 밖에선 빼줌
- 토글은 <button type="button"> 이동은 <a>
- 이동은 : 다른페이지로 이동, 한페이지에서 위아래이동, 포커스 이동 모두 <a>
- 좌우 레이아웃은 float, sns아이콘 좌우는 인라인블럭(내용이 버튼밖에 없을경우)
- 페이지네이션등 가변요소일 경우 부모를 인라인블럭, 자식은 float
- 겹쳐야할경우 position:absolute; left:0; top:0; 바깥요소에 기준
- 위나 좌우로 레이아웃 전체가 일부겹칠경우 음수마진가능
- 로고는 <h1>, 섹션제목은 <h2>, 컬럼제목은 <h3>
- 섹션위아래는 무조건 패딩처리
- float구조에선 가로길이를 지정해야함(컨텐츠 레이아웃에서)
- float구조일경우 반드시 부모에서 float해제
(inline block 시 높이잡혀서 float 해제 생략가능)
- 로고이미지 크기지정시 width만 사용
- 빈간격은 margin, 안으로 밀어넣거나 크기를 늘리며 간격줄경우 padding
- gnb만 <nav>로 감고 나머지 메뉴는 그냥 ul로 처리
- 이중리스트일경우 > 자식선택자사용
- 부모의 두번째 요소부터 선택할경우 + 인접형제선택자사용
(li끼리는 형제요소 a 자식간은 사촌요소)
- #wrap의 min-width는 컨텐츠중 가장 큰 가로길이로 지정하거나 +80하여 좌우 여백 확보
- 태그의 순서는 사용순서대로 넣어야하며 시각적으로 좌측요소부터 넣지만
헤더의 로고가 가운데 있을경우는 로고를 먼저넣고 포지션정렬공식
- 더보기버튼은 나중에 넣고 포지션
- 제목이나 <a>안의 img엔 alt에 이미지에 대한 설명을 넣어야함(이미지안쪽 글자 적어줌)
- 이미지 영역만큼 보이거나 클릭인경우 <img>, <button>안쪽은 무조건 배경처리