2021-04-21 (9일차) nth-child(n){}, block의 margin정렬방법

39강~45강

 

- width를 %로 나타내기 (부모 엘리먼트 너비 기준) 높이는 적용 안 됨

  ex) {width : 15%; 
       height : 100px;
       background-color : red;
       }

 

- 태그이면서 + 누군가의 n번째 자식에만 값 주기
  태그 : nth-child(n){}

  ex) div : nth-child(2) { 
       background-color : red; 
       } 

- 태그이면서 + 누군가의 첫번째 자식에만 값 주기

  태그 : nth-child(1){} / first-child{}

  ex) div : first-child {
       background-color : red;
       }

 

- 태그이면서 + 누군가의 마지막 자식에만 값 주기

  태그 : nth-child(마지막번호){} / last-child{}

    ex) div : last-child {
         background-color : red;
         }

- 태그이면서 + 누군가의 마지막에서 n번째 자식에만 값 주기

  태그 : nth-last-child(n){}

    ex) div : nth-last-child(n) {
        background-color : red;
        }

 

- 태그이면서 + 누군가의 지정값(방정식)자식에만 값 주기

  태그 : nth-child(방정식){}

    ex) section > :nth-child(5n + 1) {
    background-color:gold;
    }

---

< block 정렬방법 이해하기! >

- inline-block, inline의 정렬방법

  수동적으로 정렬

  부모의 text-align 속성에 의해 정렬됨

 

- block의 정렬방법

  margin을이용해서 능동적으로 정렬

  좌측정렬 : 기본값

  우측정렬 : {margin-left : auto;}     (margin-right : 0; 기본값이니 안 줘도 됨)

  가운데정렬 : {margin-left : auto; margin-right : auto;} / {margin : 0(상하) auto(좌우);}

 

 

---

- html안에 head와 body가 있음

  head : 부가정보 (화면에 보이지 않음)

  body : 진짜 보여질 내용

 

 

#문제. bmx 사이트의 상단 이미지 4개 구현

 

  버전1) 조건 : br과 &nbsp;사용

  <div><img><br><img>&nbsp;<img>&nbsp;<img></div>

  버전2) 조건 : margin 사용

  <div><img></div><div><img><img><img></div>

  버전3) 조건 : 엘리먼트 5개 사용, 힌트 : body

  <div><img></div><img><img><img>

  버전4) 조건 : 엘리먼트 4개 사용, 힌트 : body, block

  <img><img><img><img>