2021-04-16 (4일차) border, text-align, hover{}, 자식선택자(>), 인접동생선택자(+), text-align - inline주면 안 되는 예외, &nasp;

19강~30강

 

 

#문제. 각각의 크기와 색상이 다른 링크 버튼 3개 만들어주세요.

 

 

- a(링크)태그의 display는 inline이다.

 

 

- 외곽선 주는 방법

    - border : 두께, 형태, 색상

              ex) div{

                     border : 10px  solid red;

                      } 

 

 

- text에 위치를 주는 방법

    - text-align : left;

    - text-align : center;

    - text-align : right;

 

 

 

- display : block은 글자 취급 x (블록취급)          ex) section, div, article, nav

 

- display : inline과 inline-block은 글자 취급 o

 

 

- text-align 설정할 때 display에 inline-block을 주면 안 되는 예외의 경우

  : display : block이 기본값인 태그와 텍스트 내용?만 서로 1:1 대면한 경우

  inline-block을 주면 → width가 최소한으로 줄어들음 → 내용만해진 태그 안에서만 text-align이 적용됨

 

 

- 글자 속성을 부모태그에 주면 거의 적용이 되지만,

  a(링크)태그는 파랑색+밑줄과 같이 자기 주관이 뚜렷한 태그이기 때문에 직접 속성을 주는 게 좋음!

 

 

 

- 마우스를 올리면 반응하게 하는 방법

    - 태그 : hover{}

        ex) div : hover{

                           background-color : red;

                           }                                         결과→ div에 마우스를 올리면 배경이 빨강색으로 변함.

   

 

 

- emmet, 자식선택자(>), 인접동생선택자(+)

 

    ex) div>section*2>nav*2               →             div 1개, section 2개, nav 4개

    ex) div*3+section*2                     →             div 1개, section 2개, nav 4개

 

 

 

- 띄어쓰기 &nasp;

  : html에서 띄어쓰기는 몇 칸을 띄어도 한 칸으로 인식하기 때문에 &nbsp 태그를 이용한다.

 

 

#문제. BMX 사이트의 상단 메뉴를  를 사용하여 구현해보시오.