노마드코더 코코아톡 클론코딩 HTML&CSS 수업리뷰#3- Learning CSS 2

• 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(변수명) 형태로 사용해야한다.