html/css #3 - 프로필 사이트 index 2 (class, descendant selector)

1. 레이아웃을 잡아준다. 큰 덩어리는 div 한개

 

 

2. background-color로 영역 확인 후 초기화 해준다. 

 

*margin 참고

margin: unset;

프로퍼티가 상속 지원 속성이면 -> inherit 

프로퍼티가  상속 지원 안되는 속성이면 -> initial (명시적 초기화)

unset이 알아서 해준다. 

 

 

3. div 내에 header/contents/footer로 나눈다. 

<div>

   <div></div>

   <div></div>

   <div></div>

</div>

이 형태가 된다. 

 

 

4. div에 클래스를 지정해주어야 한다. 

.header{} <= 에는 유니버셜 셀렉터 * 가 생략되어있다. 

div.header{} <= 는 div태그 중 header의 클래스를 가진 것을 뜻한다. 

 

 

5. h1, p 초기화

 

 

6. header 가시화

 1) 부모인 header에게 text-align: center 을 주어 이미지, h1, p 중앙 정렬

 2) height 지정 (이미지 크기로 지정하기, 실무에서 이렇게 지정하는 경우가 있다.)

 ... 마크업 진행

 3) color : white -> 해당 값은 자식들에게 사속

 4) border-radius 지정

 

 

7. 하위셀렉터(Descendant selecter) 

.header h1{ /*하위선택자 descendent selecter*/
    font-size: 40px;
}

ㄴ header class 에서 h1들을 모두 선택하는 하위 선택자 descendant selector

이를 통해 클래스를 지정하지 않고도 h1의 프로퍼티를 지정할 수 있다.