Kakao Clone05 :: CSS

잘 적용이 안되는것도 있는데 체크한 부분은 포스팅으로 올린다. 

오늘은 css 부분에 대해서 다뤄봤는데 관련되서 몇가지 정리하려고 한다. 

 

. class 이름 {

 

} 이런식으로 쓰는것이 보통이다.

 

.top-header .header__top,
.top-header .header__bottom {
  display:flex;
  justify-content: space-between;
}//header_top 과 header_bottom에 적응했다.
 
.top-header .header__bottom{
  margin:0 10px;
}
 
.top-header .header__column:nth-child(2){
  text-align:center;
}

이 부분에 대해서 작성해보고자 한다.

top-header 아래 class header__top 에 적응이 되고

top-header 아래 class header__bottom에도 적용이된다. 

display : flex는 수평축으로 나타나게 된다. 

justify - content 속성이 있는데  

이러한 속성들을 모아서 플렉서블 레이아웃이라고 한다. 

space-between 하게 되면 상자 두개 사이에 상자가 놓이는 그림이 된다. 

방향에 대한 정리는 https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1

여기 잘 정리되어 있어 가지고 왔다.

margin : 0 10px 라고 하면 상하 0 좌우 30px를 의미한다. 

nth-child(2) 는 두번째 라인에 대해서 text를 중앙으로 정렬하라는 의미이다.

색이 바껴야 하는데 안바뀐다. 흐미!

*폰트 바꾸기

https://fonts.google.com/ 구글폰트에 들어가서 open sens 를 쳤다. 

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">

전체폰트를 지정할때는 

font-family: 'Open Sans', sans-serif;

쓴다. 

폰트도 변경할 수 있더라. 다시 원래대로 돌렸다.

 

* navigation

간격 맞춰주는게 정말 힘들다. 특히 margin이나 padding 구분이 잘안되서.

border-top:1px solid #c1c1c1; 

테두리 경계선 위로 1px 굵게 회색으로 하라는 의미이다. 

placeholder는 hint라고 생각하면 된다.

w3schools에 position 의 relative 와 absolute가 잘 나와있다.