#3.7
border은
div{
padding : 20px;
border : 2px Soild black;
}의 형태로 쓰며 각 요소들의 테두리를 꾸며준다.
Tip!
*{
padding : 20px;
border : 2px Soild black;
}로 지정하면 모든 요소를 저렇게 꾸밀 것을 나타낸다.
#3.8
inline에는 높이와 너비가 없기 때문에 좌우 margin만 적용된다. 그러나 padding은 상하좌우 적용된다.
CSS의 class는 java나 python과는 다르다. 각 요소를 특정하는 idr같은 역할을 한다.
id와 class의 차이점은 id는 각 요소가 하나씩 밖에 가질 수 없고 절대 중복되는 id가 있어서는 안되는데 class는 하나의 요소가 여러 class를 가질 수 있으며 여러 요소가 같은 이름의 class를 공유 할 수 도 있다.
id를 호출할때는 #을 쓰고 class를 호출 할때는 .을 쓴다.
Tip!
VSC에서 ctrl + D를 누르면 같은 코드가 전부 선택 된다.
#3.9
display : inline-block;을 쓰면 margin, padding 다 가질 수 있고 옆에 다른 요소가 올 수 있는 요소를 만들 수 있다.
하지만 각 요소의 사이에 빈공간이 있는데 이게 디폴트 값이라 성가시다.
#3.10
좋은 해결책은 바로 flexbox를 쓰는것이다. 사용법은 아래와 같다.
display : flex;이 flexbox를 다루는 세가지 규칙이 있다.
- 자식 element가 아니라 부모 element에게 지시해야 한다.
- 주축 main axis를 기준으로 정렬할때는 justify-content를 이용한다.
- 교차축 cross axis를 기준으로 정렬할때는 align-items를 이용한다.
기본적으로 주축은 수평 교차축은 수직이지만 이는 변경될 수 있다.
Tip!
단위 vh는 viewpoint height를 나타내며 화면 높이의 퍼센테이지를 뜻한다.
ex) 100vh = 화면 높이의 100%
#3.11
주축과 교차축을 바꾸려면 flex-direction : 에 옵션을 넣으면 된다.
<div>1<div>가 있을때 div 스타일에 display : flex를 추가하므로써 1도 flexbox로 만들 수 있다.
flexbox는 width 값을 초기 값으로만 여기고 창의 크기에 따라 무시한다.
이 때 flex-wrap : wrap;을 추가하게 되면 width값을 무조건 지키게 된다.
#3.12
position : fixed; 초기 상태 고정(창이 움직여도 따라옴)
#3.13
position : static;(디폴트값)
position : relative;(element가 처음 위치한 위치 기준으로 움직임)
position : absolute;(가장 가까운 relative한 부모를 기준으로 움직임 없다면 body 기준으로 움직임)
#3.14
Pseudo selectors는 세부적으로 요소를 선택하는 방법이다.
지금 까지 배운건 태그이름, id, class로 선택하는 방법이였다.
예를 들어 div : last-child를 쓰면 마지막 div가 선택되고 div : nth-child(2n+1)을 쓰면 2n+1번째 div들이 선택 된다. 이는 HTML문서를 수정하지 않고도 요소를 선택할 수 있는 방법이기 떄문에 id나 class를 만드는 것보다 좋은 방법이다.
#3.15
요소들이 상속관계 일때는 띄어쓰기를 이용해서
p span { } 으로 선택할 수 있다.
이는 p하위에 위치한 모든 span을 선택하는 방법이고 p의 직계자식만 선택하는 방법으로는
p > span { }가 있다.
p+span을 쓰면 p와 형제관계이자 바로다음에 오는 span을 선택 할 수 있다.
#3.16
p ~ span으로 쓰면 p이 바로 뒤에 오지 않더라도 p 와 형제관계인 모든 span을 선택할 수 있다.
input[type="password"] { }같은 형태로도 id나 class를 추가 하지 않고 특정 input들을 선택할 수 있다.
#3.17
- :active (클릭 중)
- :hover (마우스가 위에 있을 때)
- :focus (키보드로 선택 되어 있을 때)
- :visited (이미 다녀온 링크 일때)
- :foucs-within (자식이 focus되면 부모에게 적용됨)
form:hover input{ }의 형식이면 form 위에 마우스가 올라갔을때 input에게 스타일시트가 적용된다.
form:hover input:focus{ }면 두 조건을 모두 만족해야 input에게 효과가 적용된다.
#3.18
- :: placeholder
- :: selection
- :: first-letter
알아두면 좋음 훨씬 더 많은 것들이 존재함
#3.19
고급 CSS를 배우기 전에 CSS의 컬러 시스템과 변수 시스템을 알아두면 좋음
1. 컬러 코드 시스템 (ex : #00000F)
2. rgb시스템 (ex : r: b: g:, a가 추가되면 투명도까지 조절할 수 있음)
3.
root {--main-color : #000127F}
color : var(--main-color);처럼 변수에 저장해 놓고 불러서 쓰는 방법이 있다.
2021/09/23