레이아웃4 CSS-레이아웃Ⅲ: Flex box Layout (플렉스 박스) [ Flexbox ] Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다. div 요소는 block 요소이므로 수직 정렬된다. 1 2 3 4 5 ㅁㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄻㄴㅇㄹ 이를 수평 정렬하려면 자식 요소(flex-item)를 inline-block으로 지정하거나 float 프로퍼티를 지정해야 하는데 각 자식 요소의 너비를 %로 지.. 2020. 8. 29. CSS-반응형 레이아웃 (미디어쿼리) 1. 반응형 웹 디자인 Responsive Web Design 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 보통 웹사이트가 축소되어 가로 스크롤 없이 콘텐츠를 볼 수 있으나 글자가 너무 작아지기 때문이다. 데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다. 즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다. 1-1. viewport meta tag vi.. 2020. 8. 27. 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 다음
