CSS25 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. CSS-요소의 위치 정의 : position 1. position : 요소의 위치 정의 1-1. position의 속성 값 속성 값 설명 static (기본위치) - 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태 - relative, absolute, fixed 했던 박스를 원상태로 회복 relative (상대위치) - left, top 송성으로 이동을 할 수 있음 - position: absolute로 지정된 요소의 '부모 요소' 역할을 할 수도 있음 absolute (절대위치) - 원래 위치에서 따로 떼어내 독립적으로 새로운 위치를 설정 - left, right, top, bottom 속성으로 위치를 지정할 수 있음 - 부모 박스를 기준으로 위치를 지정함 (relative 부모가 없을 시에는 body가 부모가 된다) fixed (고정위치).. 2020. 8. 26. 이전 1 2 3 4 ··· 7 다음
