section1 unit5 정리
Chapter1. CSS 기초
CSS의 사용 목적
- 개발자가 css로 '화면을 구성, 배치, 타이포그래피'를 통해
사용자 인터페이스(ui)를 만들어서, 좋은 사용자 경험(ux)을 이끌어낸다.
CSS의 기본 문법과 구조
사진출처) 코드스테이츠
CSS를 HTML에 적용하는 방법
- id는 #{}을 이용한다.
- class는 .{}을 이용한다.
HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유
- html컴포넌트, css컴포넌트를 따로 구성해 개발자를 위한 코드로 짠다.
CSS에서 쓰이는 단위를 기억, 각 단위가 적합한 경우를 구분
MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용한다.
Chapter2. 박스모델
CSS 박스 모델을 이해
- css는 모든지 박스로 구성되어 있다.
박스를 구성하는 네 가지 요소를 구분 설명
- margin, border, padding, content
박스 크기를 측정하는 두 가지 기준의 차이를 이해
- box-sizing을 통해 content-box / border-box 를 설정한다. border-box를 적용하여,content의 width와 height를 혼동없게 만들어준다.
Chapter3. CSS selector
selector 퀴즈 21번하고, 28번이 이해가 안감.
필요시 검색을 통해 필요한 selector를 찾아 적용한다.
그 외 기억하고 가고 싶은것들
1) 이런 태그들이 있다.
<header>, <main>, <nav>, <aside>, <footer>2) CSS 파일을 연결해줘야 한다.
<link rel="stylesheet" href="index.css" />3) CSS 스타일을 적용할 수 있는 방법은 3가지가 있다.
인라인 스타일, 내부 스타일 시트, 외부 스타일 시트
4) 여러 개의 class를 하나의 엘리먼트에 적용하기
<li class="menu-item selected">Home</li>5) fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책이다. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있다.
.emphasize {
font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}6) 속성들,
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
7) 글자의 색상을 변경하는 속성은 color
8)
- 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우- px(픽셀)을 사용
- 일반적인 경우
상대 단위인 rem 추천
9) 반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말합니다.
10) 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우
- vw, vh를 사용.
- 화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh 를 사용해 구현한 것입니다. 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율) 11) 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라 그리고 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다.
block 박스와는 다르게 inline 박스는 width, height 속성이 적용되지 않는다.
12) 콘텐츠의 크기가 박스의 크기를 초과할 경우, overflow: hidden;를 사용하면 초과한 컨텐츠를 보이지 않게 할 수 있다. overflow: auto 도 있음
13)
header > p { }
header p {}
section ~ p { }
section + p { }
14) 가상 클래스 셀렉터
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택
a:link { } /사용자가 방문하지 않은 요소를 선택합니다./
a:visited { } /사용자가 방문한 요소를 선택합니다. /
a:hover { } / 마우스를 요소 위에 올렸을 때 선택합니다. /
a:active { } / 활성화 된(클릭된) 상태일 때 선택합니다. /
a:focus { } / 포커스가 들어와 있을 때 선택합니다. /
UI 요소 상태 셀렉터
input:checked + span { } /체크 상태일 때 선택합니다. /
input:enabled + span { } /사용 가능한 상태일 때 선택합니다. /
input:disabled + span { } /사용 불가능한 상태일 때 선택합니다. /
구조 가상 클래스 셀렉터
p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }
부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
정합성 확인 셀렉터
input[type="text"]:valid { }
input[type="text"]:invalid { }
