CSS 3일차 - 2일차 정리 및 수정

# CSS 2일차 수정 및 정리

     f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값 뒤에 하이픈(-) 붙은 요소 반환 )
        - [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"]
예>   a[href|="naver"]{  <== naver 또는 naver-  요소반환.

     }

     g. 속성명~="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 공백이 포함된 값 목록에 존재하는 요소 반환 )
        - [속성명~="속성값"] 표현식, 태그명[속성명]~="속성값"]
예>   a[href~="naver"]{  <== naver 또는 ko naver 요소반환.

     }


6. 의사코드 (의사 클래스 (pseudo class ) 와 의사 요소 (pseudo elements))

  1) 개념
   - 이름안에 어떤 기능인지를 내포하고 있음.


  2) 의사클래스(pseudo class )
    -문법: :클래스명
    -기능:스타일 지정하거나 마우스오버 및 a태그의 3가지 상태(state)인
         방문전(blue), 방문후(purple), 활성화(red,누르고 있을 때) 링크 색상을 변경할 수 있음.

     가. a태그의 link 의사 클래스 ( 순서가 중요 )

        a:link{color:red;}        /* 방문전  */ 
a:visited{color:green;}   /* 방문후  */ 
a:hover{color:yellow;}    /* 마우스 오버  */ 
a:active{color:blue;}      /* 누르고 있을 때  */ 

     나. input태그 focus 클래스  <---> blur: focus 잃어버렸을 때
        
 input:focus{
            background-color:yellow;
 }
  
     * DOM 트리에서 자식 선택하는 의사 클래스 ( 지정된 태그의 부모가 기준(******))
     다. 지정된 태그의 부모기준인 첫번째 자식

        선택자:first-child{

}

       예>
           p태그를 찾고 찾은 p태그의 첫 번째 자식을 반환. (X)
   p태그의 부모를 찾고 그 부모의 첫번째 자식인 p태그 반환 (o)
           p:first-child{

   }

     라. 지정된 태그의 부모기준인 마지막 자식
        
 선택자:last-child{

  }

     마. 지정된 태그의 부모기준인 유일한 자식

          선택자:only-child{

  }
 
     바. 지정된 태그의 부모기준인 n번째 자식 ( 1부터 시작 )

          선택자:nth-child(n){   <== n번Š 위치 

  }
          선택자:nth-child(2n){   <== 짝수번째, n에 1부터 시작해서 2,3,4 치환됨.

  }
          선택자:nth-child(2n+1){   <== 홀수번째.

  }
    
     사. 지정된 태그의 부모기준인 짝수번째/홀수번째 자식

          선택자:nth-child(even){   <== 짝수번째

  }
  선택자:nth-child(odd){   <== 홀수번째

  }
  #########################################################
     아.  부정선택자

        선택자:not(선택문법){

}


    자. input태그에서 check 된 요소 반환 (*****)

        input:checked{

}

     차. input태그에서 enable/disable 된 요소 반환 

        input:enabled{

}

 input:disabled{

}

   카. 지정된 선택자에서 자식이 없는 요소 반환 

        선택자:empty{

}



  3) 의사 요소 (pseudo elements)
    - 문법:  ::요소
    - 의사클래스와 다르게 요소의 특정부분의 스타일을 지정할 수 있다. 
      의사클래스는 전체(whole) 스타일 적용되고
      의사요소는 부분(part)스타일이 적용됨.

    가. 문단의 첫줄 선택

         p::first-line{}
      예>
         <p>
            hello1<br>
            hello2<br>
    hello3<br>
 </p>

    나. 텍스트의 첫 글자
        
p::first-letter{

}

    다. 특정요소 컨텐츠(content,body)앞에 삽입 / 뒤에 삽입

       p::before{
          content:'값'|url('images/001.png')
       }

       p::after{
          content:'값'|url('images/001.png')
       }

################################################
7. Box 모델

 1) 개요
  - CSS상에서 모든 요소(tag)는 box로 인식한다.

 2) 구성요소

  가. content
      - 요소의 실제 내용 ( 텍스트,이미지등)

  나. padding
      - 안쪽여백

  다. border
      - padding과 content 를 둘러싼 영역으로 테두리 라고 부름.

  라. margin
      - 바깥쪽 여백

  ==> 크롬 개발자도구에서 확인이 가능하다.
  ==> 웹브라우저에서는 300px 너비를 맞췄는데
     실제 Box Model에서는 284px로 보인다.
  ==> 블럭(block) 레벨은
     실제 Box Model 의 너비가 숫자로 보이고
      인라인(inline) 레벨은
     실제 Box Model 의 너비는 auto로 지정되어 보인다.

   이유는  블럭레벨은 기본적으로 전체너비를 확보하고
         인라인 레벨은 content 만큼만 너비를 확보하기 때문이다.
   따라서 블럭레벨은 전체너비를 사용하기 때문에 
         다음 요소는 new line에 랜더링되고 width와 height 지정해서 값을 변경이 가능함.
 인라인 레벨은 필요한 만큼만 너비를 확보하기 때문에
 new line 없이 한줄에 랜더링이 되고 
 width와 height 지정해도 적용이 안됨. 


  3) width 와 height

    가. 개념
     - Box Model에서의 content의 너비(width)와 높이(height)를 의미한다.
     - 지정하지 않으면 실제 요소 크기로 설정된다.
       ( 블럭레벨은 전체너비 사용, 인라인레벨은 필요한 만큼만 차지함)
     - 지정하면 블럭레벨은 적용이 되지만
              인라인레벨은 적용이 안됨.

    나. width
      - 인라인 레벨은 적용안됨
      - 블럭레벨 요소는 기본적으로 전체 너비를 사용한다.
      - 문법:
             width:px|%

  px: 절대값
  %: 상대값. 기준은 가장 가까운 부모요소이다.
           하지만 position(static,fixed,relative,absolute)에 따라서 기준이 달라질 수 있음.
     만약에 부모가 100px이고 자식이 50% 라면 실제 자식너비는 50px이다.

   다. height
      - 인라인 레벨은 적용안됨 
      - 블럭레벨 요소는 기본적으로 필요한 높이를 사용한다.
      - 문법:
             height:px|%

  px: 절대값
  %  : 상대값. 기준은 가장 가까운 부모요소이다.
     만약에 부모가 100px이고 자식이 50% 라면 실제 자식 높이는 50px이다.


   ** width와 height 사용시 고려해야될 사항 (*************)
    
      지정된 width와 height가 content의 width와 height 가 아니다.
      기본적으로 항상 지정된 값보다 크게 보임.
      이유는 padding과 border 관여가 된다.
      margin는 제외됨. ( margin는 여백상쇄가 발생되기 때문에 width와 height 사용시 고려대상이 아님)



8. box-sizing 속성

  1) 개념
     요소의 너비(width)와 높이(height)를 계산하는 방식이다.

  2) 종류

    가. content-box 개념
- 기본
- 지정된 width 와 height 값이 아닌 
  padding+border 값이 추가되어 최종적으로 box의 보여지는
  크기가 정해지는 방식이다.
  따라서 실제 너비와 높이보다 더 커지는 상황이 발생될 수 있음.

          최종 width = 지정 width 값 + (2*padding) + (2*border)
  최종 height = 지정 height 값 + (2*padding) + (2*border)

    나. border-box 개념 (*****************)
        - content-box와 다르게 자동으로  padding+border 값이 포함되어
  width와 height값이 정해지는 방식이다.

        최종 width = 지정 width 값
        최종 height = 지정 height 값

       - 실제로는 다음과 같이 설정하고 사용한다.
          
   *{
     box-sizing: border-box;
   }


9. margin 

 1) 기능
   - Box와 Box 사이의 여백(바깥쪽 여백) 제어.
   - px와 % 지정 가능

 2) 문법1
   - 개별적으로 요소 지정

     margin-top:10px;
     margin-right:10px;
     margin-bottom:10px;
     margin-left:10px;

 2) 문법2 - 축약표현

   가. margin: top  right  bottom left

      margin: 10px 10px 10px 10px;

   나. margin: top  right|left bottom

      margin: 10px 10px 10px;

   다. margin: top|bottom  right|left 

      margin: 10px 10px;

   라. margin: top|bottom|right|left 

      margin: 10px ;

   ==> 축약된 표현식은 개발자도구에서 
     어떻게 축약되었는지를 보여준다.

   ==> body태그가 기본적으로 margin:8px 가짐.
       이 값이 브라우저의 기본값이다.

         body {
    display: block;
    margin: 8px;
}

 일반적으로 이 값을 제거하고 요소가 페이지의 바로 배치되도록 수정해서 사용한다
 *{
            margin:0px;
 }
  
  ==> margin의 여백 상쇄
  
     인접한 Box의  margin는 서로 겹쳐질수 있는데 
     하나로 합쳐져서 margin 만들어지는 것이 아니고 큰 크기의 여백으로 적용된다.
     이유는 요소간 거리가 너무 멀어지는것을  방지한다.
     만약에 필요하면 명시적으로 margin-top|margin-bottom 을 지정해야 된다.
  
  ==> margin:auto;  수평 가운데 정렬 가능
     반드시 block 레벨이면서 width 값을 가져야 된다.
     inline 레벨에서는 동작안됨.


10. padding 

 1) 기능
   - content와 border 사이의 여백(안쪽 여백) 제어.
   - px와 % 지정 가능

 2) 문법1
   - 개별적으로 요소 지정

     padding-top:10px;
     padding-right:10px;
     padding-bottom:10px;
     padding-left:10px;

 2) 문법2 - 축약표현

   가. padding: top  right  bottom left

      padding: 10px 10px 10px 10px;

   나. padding: top  right|left bottom

      padding: 10px 10px 10px;

   다. padding: top|bottom  right|left 

      padding: 10px 10px;

   라. padding: top|bottom|right|left 

      padding: 10px ;

11. border

  1) 개요
    - 테두리
    - margin과 padding 사이에 둘러싸인 요소.
    - 3가지 속성이용해서 스타일링 가능

      가. width: border의 두께
      나. style: border 스타일( 실선, 점선, ...)
      다. color: border 색상


  2) 표현식1 
  
     가.width
     border-top-width:5px;
     border-right-width:5px;
     border-bottom-width:5px;
     border-left-width:5px;

     나.style
     border-top-style:solid|dotted|dashed;
     border-right-style:solid|dotted|dashed;
     border-bottom-style:solid|dotted|dashed;
     border-left-style:solid|dotted|dashed;

     다.color
    border-color: red;

 2) 표현식2-축약
  
     가.width

       border-width: top right bottom left;
       border-width: top right|left bottom;
       border-width: top|bottom right|left;
       border-width: top|right|left|bottom;

     
     나.style
       border-style: top right bottom left;
       border-style: top right|left bottom;
       border-style: top|bottom right|left;
       border-style: top|right|left|bottom;

 2) 표현식3-축약 (*************)

       border: width style color;
     
     예> border: 3px  solid red;


 3) border-radius 속성
   
     - 박스 모서리를 둥글게 설정할 때 사용
     - 값이 클수록 많이 둥그러짐.

        border-radius: 20px;
        border-radius: 50%;   // 원