시맨틱태그2 CSS-레이아웃Ⅱ: float + position 어떤 레이아웃에는 float을 쓰고, 어떤 레이아웃에는 position을 써야한다는 법칙이 있는 것은 아닙니다. 속성을 정확히 알고 구현하면 그것이 정답입니다. - 밑에 예제는 임의적으로 id명과 class명을 넣었습니다. F12를 통해 확인해주세요. float 방식 - sidemenu는 float: left;하고, content는 float: right; - float의 해제(clear)가 필요함 header container position: relative; float: left; width: 100%; sidemenu float: left; content position: absolute; banner float: right; footer clear:both 2020. 8. 27. HTML5 Tag-[구조 관련 요소] 레이아웃 구성(시맨틱태그) 웹페이지의 레이아웃을 구성하기 위해서 공간을 분할한다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있다. 과거에는 table 태그를 이용하여 레이아웃을 구성하기도 하였으나 반응형 웹이 시작되며 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 하지만 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 시맨틱 태그를 사용하는 것이 더 나은 방법이나 IE에서 작동하지 않기 때문에 주의가 필요하다. tag 의미 및 특징 header 헤더 영역 제목, 내비게이션, 검색 등의 내용을 포함 nav 메인 메뉴나 목차 등을 정의 내비게이션 section 맥락이 같은 요소들을 주제별로 그룹화 article의 그룹화에 많이 쓰임 article 본문의 주내용이 들어.. 2020. 8. 2. 이전 1 다음
