- flex box
lnline-block은 반응형디자인을 적용하지않아 웹크기에따라 크기(좌우폭)가 정해진다. 이런 문제를 해결하기위해 flex box란 개념이 도입되었다,
- flexbox 3가지 규칙
1, 자식 엘리먼트에는 어떤 것도 적지 말아야한다. 부모 엘리먼트에만 작성해야한다.
2. 주축X(main axis),교차축Y(cross axis)
justify-content ->주축X의 정렬을 해준다.
align-items -> 교차축Y의 정렬을 해준다.
flex-direction : column; -> 주축과 교차축을 바꾸어준다.(default값은 row)
flex-wrap -> 화면을 줄였을때 값을 바꾸어준다.
- vh와 px
px : px값의 고정치를 부여.
vh : 화면 비의 크기를 부여
- Position
->레이아웃보다는 조금씩 옮기기 위해 사용한다
1. fix -> 화면에 고정하여 창을 옮기더라고 화면 고정값에 따라 움직인다.
2. static -> defaut값으로 레이아웃이 박스를 처음 위치하는곳에 두는것을 말한다.
3. relative -> 처음 위치한곳을 기준으로 수정하는것.
4. absolute - 가장 가까운 부모(relative parents)를 기준으로 이동 시켜준다. 부모가 relative가아니면 body기준으로 이동한다.
- Pesudo Selectors
-> 좀더 세부적으로 엘리먼트를 선택해주는것.
태그:종속태그{속성값} 형태로 쓰인다.(ex. div:nth-chid(3){background-color:white;} ->같은 div태그 3번째 div의 색상을 white값으로 바꾸어준다.
p span{color : teal;} -> P태그안에 span태그 color값을 teal값으로 바꾸어준다.
div > span {} -> div태그 바로 밑자식인 span값에만 적용이가능하다.
p + span {} -> p태그 다음 바로 오는 span태그의 값을 적용할수있다.(중간에 다른 태그가 있으면 적용이 안된다.)
p ~ span{} -> p태그 다음 뒤에 있는 span태그값에 적용되는것.(중간에 다른 태그가있어도 상관없다.)
- Attribute Selectors
attribute를 통해 어떤 것이든 선택할 수 있게해준다.
p~=”name” -> name이 포함된 모든 속성을 속성값을 부여하는것.(sname같은경우X)
p*= “name” -> name이 포함된 모든 속성을 속성값을 부여하는것.(sname같은경우O)
~=은 독자적인 단어 “name”만 캐치하고 *=은 name이 포함된 모든 단어를 캐치한다.
- states
-> 동작을 했을때 변화되는 작용을 말하며 크게 5가지 정도가 있다.
1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다.
4) visited : 링크에만 적용이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다
- CSS 변수
:root{
-–main-color : red;
}
위와같이 변수를 선언하며 사용할때는 아래와 같다.
a{
color : var(--main-color) ;
}
변수선언할때는 – 대시 2개를 붙여야하며 뛰어쓰기는 인식을 못하므로 뛰어쓸때는 -한개가 필요하다. 변수값을 사용하기 위해서는 var(변수명) 형태로 사용해야한다.
'Basic > 노마드코더' 카테고리의 다른 글
노마드코더__바닐라 JS로 크롭웹만들기 수업노트 #2 - 자바스크립트로 HTML가져오기. (0) | 2022.03.31 |
---|---|
노마드코더__바닐라 JS로 크롭웹만들기 수업노트 #1 - 변수와 return. (0) | 2022.03.30 |
노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#3- Learning CSS 1.1 (0) | 2022.03.23 |
노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#2- Learning HTML (0) | 2022.03.15 |
노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#1 - Introduce (0) | 2022.03.07 |
댓글