[21.02.12] CSS 둘째 날

진도: ~박스 모델까지

1. css 속성 스스로 알아내기
-text size 키우고 싶으면 'css text size property' 등으로 검색해서 찾아볼 수 있다!
-text center로 옮기고 싶으면 'css text center property' 등으로 검색해서 찾아볼 수 있다.
강의 중 배운 css 속성 정리

1. text-align:글자 배열 조정 (중간으로 옮기는 등...)
2. font-size:글자 크기 조정
3. padding:컨텐츠와 테두리 사이에 여백을 주고 싶다면
4. margin:테두리와 테두리 사이에 여백을 주고 싶다면
5. border-bottom:박스(4면 테두리)가 아니라 아래(1면 테두리)에만 선 그어주고 싶다면
6. display:어떤 태그가 가리키는 범위를 완전히 바꾸는 중요한 속성!
   • display:inline; :block level element라고 해도 자기 부피만큼 쓰게 하는 방법 있음
   • display:block; :inline element라고 해도 화면 전체 쓰게하는 방법 있음
   • display:grid; :grid의 장점은 박스 안에 들어가는 글이 많아짐에 따라 자동으로 커지고, 다른 태그로 감싸진 내용도 자동으로 커진다
   • display:none; :안 보이도록

2. css 선택자 스스로 알아내기
-목표: 기본적으로 a태그는 다 검은색으로 바꾸되, 한번 방문한 적이 있는 페이지라면 회색으로 바꾸고 싶다! 지금 현재 방문하고 있는 페이지는 빨간색으로 바꾸고 싶다
=> 선택자를 사용해도 부분부분 다르게 설정하고 싶다!br>-방법: class나 id와 같은 선택자 이용!

예시
※문제-> 방문했던 페이지가 다수라면 일일이 다 style 속성을 넣어주는 게 불편함!
-> 따라서 class="saw"라는 html 태그로 지정하여 한번에 묶을 수 있음 ->"class의 이름이 saw인 것들"이라는 것을 선택자로 표현하려면, 다음과 같이 표현할 수 있다
.saw{...}
※또한 한번 방문했고, 현재 방문하고 있는 페이지를 빨간 색으로 바꾸고 싶음
-> 이를 위해 class="saw active"라는 html 태그로 지정하고 "class의 이름이 active"인것들이라는 선택자는 다음과 같이 표현할 수 있다
.active{...}
※하지만 위 표현은 약간 더러운 게, class="saw active"의 경우 중복된 통제를 받고, 빨간색이 나오는 이유는 red가 gray보다 뒤에 나왔기 때문
그래서 좀 더 우선순위가 높은 선택자를 만들어줄 필요가 있다-> ID 선택자. 위의 class="saw active"를 class="saw" id="active"라고 바꾼다! "id의 이름이 active인 것들"이라는 것을 선택자로 표현하려면, 다음과 같다
#active{...}
=> 즉 이를 통해, 알 수 있는 것

1. class라는 속성 값에 여러 개의 값이 들어올 수 있다.
2. 또 그 속성 값은 띄어쓰기로 구분한다.
3. 하나의 태그에는 여러 개의 속성이 들어올 수 있고
4. 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
5. 선택자에는 우선순위가 있는데, id, class, 태그 선택자 순으로 강하다 (id의 값은 단 한번만 등장할 수 있다. 중복 불가)
6. 또 우선순위가 같은 선택자가 나온다면, 가장 뒤에 나오는 선택자가 더 우선순위가 높다

+) -id="~~~" 아래 있는 특정 태그 a를 가리키고 싶다면 #~~~ a {...} 이런식으로 써주면 됨
=>'css selector'를 검색하면 내가 원하는 범위의 선택자를 알 수 있다.

3. 박스 모델-태그가 가리키는 내용을 감싸는 박스!
따라서 화면 전체를 쓰는 태그들을 'block level element' (element==tag), 자기 자신의 부피, 콘텐츠 크기만큼을 갖는 태그들을 'inline element'
+중복 제거 방법
-> h1, a{...}