1.후기
selector에 대해 명확히 알게 됐다. 코드스테이츠에서 제공해준 셀렉터 퀴즈를 풀고 나니 헷갈렸던 것이 많이 정리되었다. 까먹을 때쯤 종종 해야겠다.
코드스테이츠를 시작한 지 일주일이 넘어가고 있다. 합격 전에는 너무 하고 싶었고 합격 후 개강 전까지는 걱정스러운 마음에 괜히 지원했다고 생각했다. 또 개강 후부터 현재까지는 하길 잘했다고 생각 중이다. 확실히 생각을 나눌수록 알고 있던 지식이 견고해지는 느낌이다. 앞으로의 활동도 열심히 해야겠다!!
2.새롭게 알게 된 것
Section Unit5 - [CSS] 기초
Chapter1. CSS 기초
Chater2. 박스모델
Chapter3. CSS Selector
<Chapter1. CSS 기초>
1)
2) CSS 적용 방법 3가지
-같은 줄에서 스타일을 적용하는 인라인 스타일
-내부 스타일 시트: CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 <style> 요소 내에 작성
-외부 스타일 시트(권장)
3) fallback 글꼴
표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책. fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력. 입력된 순서대로 fallback이 적용.
4) 웹 폰트 기술
개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드하게 하는 기술
5) text-align: justify
양쪽 정렬
6)vertical-align(세로 정렬)
부모 요소가 display: table-cell이어야 함
7) <center></center>, <font></font> 사용 안 함(옛날 태그)
8) 절대 단위와 상대 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
%는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율을 의미
9) 글꼴 사이즈 정할 때 어떤 단위를 선택해야 하나
권장: rem
root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용.
이유: 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리합니다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산 어려움. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변함.)
10) block, inline-block, inline
inline-block은 inline에서 width, height 사용 가능으로 바뀜
<Chapter2. 박스모델>
1) margin 음수 적용 가능
음수면 다른 엘리먼트와 겹침
2) 박스 크기를 측정하는 방법
-content-box: 기본값, content 기준
-border-box: border 바깥쪽이 기준
3) 초기화
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}<Chapter3. CSS Selector>
1) attribute 셀렉터
a[href] {}: a 태그 중 href 속성을 가진 태그 선택
p[id = "only"] {}: p 태그 중 id 속성값을 "only"로 가진 태그 선택2) 자식/후손/형제/인접 형제 셀렉터
자식: a > b (a 바로 아래 자식인 b)
후손: a b (a 바로 아래 b, 그 아래 b, 그 아래 b... 모두)
형제: a ~ b (a와 형제인 b)
인접 형제: a + b (a와 형제이면서 a 바로 다음에 오는 b)
3) p:first-child vs.p:first-of-type{}
-p:first-child: 첫째 자식으로 있는 p
<section>
<article></article>
<article></article>
<p></p>
</section>
=> 아무것도 선택 안 됨
<section>
<p></p>
<article></article>
<article></article>
</section>
=> <p></p> 선택됨-p:first-of-type{}: 자식 p 중에 첫 번째
<section>
<article></article>
<article></article>
<p></p>
</section>
=> <p></p> 선택됨
<section>
<article></article>
<p></p>
<p></p>
</section>
=> <article></article> 바로 아래 있는 <p></p>만 선택됨4)
-셀렉터에 띄어쓰기 없는 경우
.code.states: class로 "code", "states" 둘 다 가진 태그 선택
-셀렉터에 띄어쓰기 있는 경우(후손 셀렉터)
.code .states: class "code" 안에 있는 class "states" 모두 선택
-셀렉터에 콤마 있는 경우
.code, .states: class가 "code"인 태그와 class가 "states"인 태그 모두 선택
5) 작은따옴표 큰따옴표 상관없음
class = 'center'
class = "center"
