프로그래밍/CSS5 CSS - Flexbox로 레이아웃 잡기 display: flex 분석하기 display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. fllexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다. flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식요소에 적용해야하는 속성들이 있다. 부모 요소에 적용해야하는 Flexbox 속성 1. flex-direction : 정렬 축 정하기 2. flex-wrap : 줄 바꿈 설정하기 - 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 3. justify-content : 축 수평 방향 정렬 - 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 4. align.. 2023. 4. 7. CSS - Selector 기본 셀렉터 * { } // 전체 셀렉터 = 문서의 모든 요소 선택 h1 { } div { } section, h1 { } // 태그 셀렉터 = 같은 태그명을 가진 모든 요소 선택. 복수로도 선택 가능. #only { } // ID 셀렉터 = #id로 입력하여 선택 .center { } // class 셀렉터 = .class로 입력하여 선택 a[href] { } p[id="only] { } p[class~="out"] { } p[class|="out"] { } section[id^="sect"] { } div[class$="2"] { } div[class*="w"] { } // attribute 셀렉터 = 같은 속성을 가진 요소를 선택(모두 암기할 필요 X) 자식 / 후손 / 형제 셀렉터 자식 셀렉터 자.. 2023. 4. 4. CSS - 박스모델 border(테두리) 테두리는 심미적인 용도 외에도, 개발 과정에서도 매우 의미 있게 사용한다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있다. 다음 코드를 통해 테두리를 실선으로 확인할 수 있다. p { border: 1px solid red; } border 속성에 적용된 값은 각각 border-width, border-style, border-color이다. margin(바깥 여백) p { margin: 10px 20px 30px 40px; } margin은 border를 기준으로 박스 외부의 여백을 지정한다. 각각의 값은 top, right, bottom, left로 시계방향이다. 값을 두 개만 넣으면 첫 번째 값이 상하, 두 번째 값이 좌우이.. 2023. 4. 4. CSS - 절대 단위와 상대 단위 절대 단위 - 주로 px을 사용한다. cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 - 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있다. em 요소의 글꼴 크기. ex 요소 글꼴의 x-height. ch 요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다. rem 루트 요소의 글꼴 크기. lh 요소의 라인 높이. vw viewport 너비의 1%. vh view.. 2023. 4. 4. CSS - 기초 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다. 즉, CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 사용자 인터페이스(UI: user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI(Command Line Interface)를 사용하였다. 하지만 이는 컴퓨터에 무지한 일반 사용자가 사용하기에는 어려움이 있다. 트.. 2023. 4. 2. 이전 1 다음
