오답노트(day01)

1. 모든 a 태그의 text-decoration를 없앨 수 있는 코드이다. 이 코드를 기본으로 쓰고 가면 a태그에 쉽게 스타일을 입힐 수 있다.

       a {text-decoration: none;}      
       

2. 전체 선택자에 margin 0 padding 0을 주면 스타일 설정이 쉽다.

        *{
        padding:0;
        margin:0;
    }

3. 가운데 정렬하고 싶을 때, 대상이 글자라면 가장 쉬운방법은 text-align을 쓰는 것이다.

    p{ text-align:center;}
    

4. margin속성은 block태그에서만 활용된다. 왜냐하면 inline속성의 태그는 자기자신만큼만 부피를 차지하기 때문이다. inline태그에 width,height,margin을 주고 싶다면

    .span1{
    display:block;}

    .span2{
    display:inline-block
    
   

위처럼 display로 속성을 바꿔 줘야 한다.

5. 글자(콘텐츠)의 위치 선정-padding

padding의 경우 내부에 여백을 주는 속성이다. 이를 활용하면 쉽게 글자의 위치 등을 바꿀 수 있다. 검색창 안에 글자에도 여백을 줄 수 있다.

  #search_bar{ padding-left:30px;}

이외에도 padding을 활용하면 원하는 위치로 쉽게 옮길 수 있다. 애매할 떈 padding을 활용하자.

6. '>'과 띄어쓰기의 차이

간단하게 말하자면 >는 부모요소의 바로 밑에 있는 자식요소만을 선택하는 것이고,
띄어쓰기는 부모요소 밑에있는 해당요소를 '전부' 선택하는 것이다.
이 둘을 혼동해서 쓰면 선택자를 쓸 때 오류가 날 수 있다.

7. height에서 %는 부모크기와의 비율이다.

> banner{
            height:300px;
        }
 .banner > ul {
            height:100%;}

이때 ul의 height는 부모요소인 banner의 height인 300px이 된다. 전체 모니터 화면의 100%가 아니라는 점을 명심하자.

8. margin으로 가운데 정렬하는 법

.class{margin: 0 auto;}

위 식을 쓰면 해당 요소가 가운데 정렬이 된다. 가로 마진을 양옆으로 동일하게 주어 위치시키는 원리이다. 위의 여백과는 상관이 없는 문법이기 때문에, padding-top을 주어 위에서 떨어트릴 수 있다.

9. calc는 띄어쓰기가 필수이다.

height:calc(100vh - 80px);
calc은 요소에 weight나 height를 줄 때 계산이 필요한 경우에 사용된다. 이때 '-'기호 앞 뒤로 무조건 '띄어쓰기'를 해야 calc가 실행된다.