몰랐던 거
- CSS란?
- CSS 적용하기
- 기본적인 셀렉터
- 절대 단위와 상대 단위
- 박스모델의 종류
- 박스 구성요소
- 박스 사이즈 측정
- selector
몰랐어? 그럼 알아
1. CSS란?
a. CSS는 좋은 사용자 경험을 제공하기 위한 도구이다. 직관적이고 쉬운 UI는 좋은 UX(user experience)를 만든다.
b. CSS 분해하기
2. CSS 적용하기
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="layout.css" /> 적용하고 싶은 html 컴포넌트에 적용시킬 css 컴포넌트를 위와 같이 <body>위에 넣으면 좋다.
3. 기본적인 셀렉터 (id와 class 차이)
4. 절대 단위와 상대 단위
글꼴 사이즈 정할 때
1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 -px(픽셀) 2. 일반적인 경우 -rem
화면사이즈 정할 때
1. 반응형 웹(responsive web) -px 2. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 -vw, vh 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻한다. -예시사이트를 보면 쉽게 이해 할 수 있다. https://www.tesla.com/
5. 박스모델의 종류
줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
1. block 요소의 대표적인 예는 <div>, <p> 입니다. 2. inline 요소의 대표적인 예는 <span>입니다. - span은 inline이지만, height와 width 조절이 가능한 inline-block으로 바꾸고 싶다면 CSS에서 span 요소에 'display: inline-block'을 추가하면 된다.
6. 박스 구성요소
1.border의 속성에 적용된 각각의 값은 테두리 두께(border-width), 테두리 스타일(border-style), 테두리 색상(border-color)이다. 2.margin은 각각의 값은 top, right, bottom, left로 시계방향이다. margin: 10px 20px; - top, bottom 10px / right, left 20px; margin: 10px; - all 10px; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; - 3.padding은 margin과 마찬가지로 적용 가능하다.
7. 박스 사이즈 측정
레이아웃 디자인을 할 때 가장 많이 하는 실수가 있다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우이다. 그렇다면, 어떻게 해결해야 할까?
box-sizing 속성을 추가하고, border-box라는 값을 추가한다.* { box-sizing: border-box; } 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산
8. selector
1.자식 / 후손 / 형제 셀렉터
2.가상 클래스 셀렉터
3.UI 요소 상태 셀렉터
4.구조 가상 클래스 셀렉터
5.부정 셀렉터
셀렉터정리사이트 - https://poiemaweb.com/css3-selector
1.자식 / 후손 . 형제 셀렉터
자식 - header > div { }
<header>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
<div> <!-- 선택 -->
<p>
<div></div>
</p>
</div>
</header>
후손 - header div {}
<header>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
<div><!-- 선택 -->
<p>
<div><!-- !!선택!! -->
</div>
</p>
</div>
</header>
형제 - section ~ p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
<p></p> <!-- 선택 -->
</header>
인접 형제 - section + p { }
<header>
<section></section>
<p></p> <!-- 선택 -->
<p></p>
<p></p>
</header>2.가상 클래스 셀렉터
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */3.UI 요소 상태 셀렉터
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */4.구조 가상 클래스 셀렉터
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) { }5.부정 셀렉터
input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }
(p:nth-of-type(2)라면 p태그가 하나가 있을 때는 안되네?)Tips)
-기본여백없애기- *{ maigin:0; padding:0; box-sizing: border-box; } -가운데 정렬- { height:100px line-height:100px }
Explain Like I'm 5