publishing
레이아웃 설계하는 HTML5 시멘틱 태그
- 가장 상위의 컨테이너 : .container(1번) , .wrapper
- 문서의 주요 내용을 지정 : main (현재 레이아웃에선 main이 꼭 필요하진 않음)
- 주제별 콘텐츠 영역 : section(2번)
- 헤더 영역(로고, 메뉴 , 로그 , 검색등) : header(2번)
- 제작 정보 및 저작권 정보 표시 : footer(2번)
- 콘텐츠 내용 넣기 : article(3번)-> 세부 내용 들어갈 때 div
- 문서를 링크하는 탐색 영역 : nav
- 세부 사항 요소 : summary / 추가 세부 정보를 정의 : details
.container > header, section, footer > article > div
section을 만들고 class네임을 정의할 때 의미없는 단어로 지정하지 않고 슬라이드면 슬라이드 뉴스면 뉴스 같은 직관적이게 알 수 있는 이름으로 하자. 이건 section뿐만 아니라 모든 태그에서도 마찬가지다.
width 팁 : 100을 3으로 나누면 정수로 딱 떨어지지 않는다. 이때 width 퍼센트를 33.3333333% 정도로 많은 소수점을 붙여주면 1px도 차이 나지 않게 3개를 하나의 영역 안에 넣을 수 있다. 33.3은 틀어질 수 있으니 소수점을 많이 붙여주자!
CSS 포지셔닝 (position속성 : relative & absolute)
-
Relative(상대적인) : 부모요소
-
Absolute(절대적인) : 자식요소
단순히 position 속성만 주었을 땐 아무런 변화가 없을 수도 있다.
좌표 속성이 함께해야 한다.
- 좌표 속성 : left, right, top, bottom
좌표 속성은 position 속성과 함께해야 쓸모 있고 position 속성을 주지 않았을 때 사용하면 아무런 일을 안함
0일 경우엔 px등 단위를 빼도 되지만 다를 때는 항상 단위를 넣어주자
만약 relative와 absolute로 부모 자식 요소를 매칭 시키지 않는다면 계속 부모 요소로 올라가며 position : relative; 가 있는 요소까지 올라간다.
만약 없다면 결국 브라우저를 relative로 인식해버리니 항상 부모 자식 요소를 매칭하자.
포지션 속성 - 자동으로 수평 수직 중앙 위치 시키기
- position:absolute;( 좌표 속성을 쓰기 위한 포지션 속성)
- 왼쪽 위 : left : 0 , top : 0
- 왼쪽 아래 : left : 0 , bottom : 0
- 오른쪽 아래 : right : 0 , bottom : 0
- 오른쪽 위 : right : 0 , top : 0
- 브라우저의 크기와 관계없이 항상 수직 수평 중앙 정렬
position : absolute;/*좌표 속성을 위한 포지션*/
top : 50%;
left : 50%
transform: translate(-50%,-50%)
transform(변형) = translate(-50%,-50%) => 자기 크기의 50퍼센트 만큼 - 방향으로 이동해
position 속성을 넣을 땐 float와 마찬가지로 둥둥뜨는 형태이기 때문에 부모는 자식요소의 height값을 읽을 수 없다.
height 값을 강제적으로 주자
또 HTML요소는 좌표를 왼쪽 상단을 기준으로 잡게 된다.
포지션 속성 - 부모 요소 밖으로 위치시키기
위에서 했던 것과는 완전히 똑같지만 부모 요소 밖으로 1px도 딱 틀리지 않게 정확하게 위치 붙이기 위한 작업
부모요소의 너비값, 높이값이라 써있지만 100%로 입력하면 부모 요소가 변할 때도 자동적으로 계산된다.
