css 개념정리 (1)

css의 기본 개념을 정리해본다.

 

선택자 { 속성 : 값 } 이렇게 구성되어있다.

 

css를 적용시키는 방법

 

html에 직접 적용 - html 태그에 직접 적용 inline

<div style="display: flex;"> </div>

 

스타일 태그안에 만들어서 적용 internal

    <style>
          .internal{
              background-color: bisque;
          }  
    </style>
    <div class="internal"> </div>

 

css 파일을 만들어서 적용 external

//external.css

external{ background-color: bisque; }

 보통 마지막 방법을 선호한다.

 

상속 

간단하게 div 태그 안에 있는 태그들 까지도 다 css가 들어간다. 상속이라 하면 뭔가 거창할 거 같지만 당연하다고 생각되는 것이다.

    <style>
          .color{
             color: bisque;
          }  
    </style>
    <div class="color">
        <span>d</span> 
        <div>
            span
        </div>
    </div>

결과

(단 border 나 padding 같은 속성들은 상속되지 않는다.)

 

css가 적용되는 순서 

html 상에서는 inline, internal, external의순서로 적용도가 높으며, 속성으로는 id, class, el의 순서대로 높다. 

 

css의 선택 방법

id = #id 

class =. class

태그명 = 태그명

하위 노드 선택 = 공백

ex) ul li 하면 모든 li

바로 아래 자식 노드 선택 = >

ex) div> div div의 바로 자식만 선택 가능

n번째 자식 선택 = nth-child(n)

 

em은 상위의 값으로 비례 적용된다.

rem은 html의 요소 크기 값으로 비례 적용된다.

    <style>
        ul{
            font-size: 20px;
        }
          ul :nth-child(2n+1){
             color: bisque;
             font-size: 2em;
          } 
          ul :first-child{
              font-size: 1rem;
          } 
    </style>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>

결과 

 

 

색이 너무 밝아서 바꿨다.

 

 

인접한 블록 엘리먼트 마진이 있다면 큰 값을 가진 마진 값이 공유된다.

인라인 엘리먼트 마진은 두 개의 합으로 표현된다. 

 

    <style>
        .a{
            width: 150px;
            height: 50px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
        .ab{
            width: 20px;
            height: 20px;
            border: 1px solid red;
            margin-right: 10px;
        }
        .ba{
            width: 20px;
            height: 20px;
            border: 1px solid red;
            margin-left: 10px;
        }
        .b{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            margin-top: 5px;
        }
    </style>
  <div class='a'>
      <span class="ab">fdgf</span>
      <sapn class="ba">dsfsdf</sapn>
  </div>
  <div class='b'></div>  

 

div는 서로의 마진이 10 ,

span은 서로의 마진이 20이다

 

 

 

 

생각보다 길어져서 1,2로 나눠야겠다.