css 구조

https://s3.amazonaws.com/codecademy-content/courses/make-a-website/img/selector-syntax.svg

font-size

  • rem : 웹 브라우저의 기본 글꼴 크기를 나타낸다. 웹 브라우저의 글꼴 크기에 맞춰 (기본:16px 이면 1rem) 두배면 32px === 2rem
  • em : font-size 요소에 비례하여 변하는 상대 값 예로, 부모 요소가 font-size : 20px 이면 자식 요소는 20px === 1em 과 같다.

css 파일 연결


  • <link> 요소를 사용하여 html과 css파일을 함께 연결할 수 있다.

  • link 요소는 HTML 헤드 내에 배치해야 된다. 세 가지 속성이 있다.
    1. "href" : 앵커 태그 요소와 마찬가지로 이 속성의 값은 css 파일의 주소 또는 경로
    1. "type" : 이 속성은 연결하려는 문서 유형을 설명한다.(text/css)로 설정
    1. "rel" : HTML 파일과 CSS 파일 간의 관계를 설명한다. 스타일 시트에 링크하고 있으므로 stylesheet 로 값을 설정해야 된다.

!important


  • 나중에 설정한 값이 적용되지 않게 이 값으로 고정 하려면 속성값 뒤에 !important를 붙인다.
  • 문법 : property: value !important;

선택자


  • 하위 선택자

    특정 요소의 하위에 있는 요소를 선택

      div block //이라고 하면 div 하위에 있는 block 요소를 선택한다.
      <div>
        <block>
    
        </block>
      </div>
    
      //------------------------------
      //block 사이에 다른 요소가 더 있어도 선택이 된다.
      <div>
        <aside>
            <block>...</block>
        </aside>
      </div>
  • 자식 선택자

    자식 선택자는 특정 요소의 자식 요소를 선택한다.

      div > block
      /*div 요소의 자식 요소 중 block을 선택한다. 주의할 점은 한단계 아래에 있는
      요소만 선택한다.(직계 자식만 선택한다.)*/
    //--------------------------------------
    // *이런 구조로 되면 block을 선택하지 않는다.*
    <div>
      <aside>
          <block>...</block>
      </aside>
    </div>

text-align 텍스트 정렬


  • 텍스트를 정렬하기 위해 text-align 속성을 사용할 수 있다.
  • left,center,right : 텍스트를 "부모 요소" 의 선택 값의 위치에 맞춘다.

Box sizing


  • 디자인의 전체 크기는 어떻게 측정이 될까?

https://ofcourse.kr/images/attach/box-sizing.jpg

  • 위 그림처럼 있을 때 우측의 크기처럼 width 값을 지정했어도 margin,padding 값이 있다면 그 값들이 더해져 width값으로 측정이 된다.
  • 그 이유는 box-sizing 의 값이 기본적으로 content-box 로 지정이 되있기 때문이다.
  • 자세한 내용은 아래의 그림을 참조!

https://s3.amazonaws.com/codecademy-content/courses/web-101/htmlcss1-diagram__contentbox.svg

  • 이런 불편함을 계속 감수하며 써야할까?

    A: 답은 box-sizing의 값을 border-box 로 변경하면 된다.

      border-box의 width는 "패딩과 보더의 두께를 포함한 값"이다.

    미리 선언한 width의 값에 padding을 주더라도 자동으로 실제 컨텐츠 부분의 width값이 줄어들면서 패딩이 안쪽으로 파고들어 실제 웹에서 보여지는 값이 내가 선언한 width값이랑 동일하게 유지된다.


-정리-

  1. 기본 box-model의 크기는 테두리 두께와 패딩의 영향을 받는다.
  2. box-sizing 속성은 브라우저에서 사용되는 박스모델을 제어한다.
  3. box-sizing 속성의 기본값은 content-box 이다.
  4. 새 박스 모델의 값은 border-box 이다.
  5. border-box 모델은 border 나 padding 에 영향을 받지 않는다.

레이아웃


position 속성을 사용하면 요소의 위치를 지정할 수 있다.

  • static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치
  • relative : 절대 좌표와 함께 위치를 지정해 줄 수 있다. left,top,right,bottom 의 요소를 사용 가능
  • absolute : 둥둥 떠다니는 것으로 폭을 설정할 수 있고 둥둥 떠다닌다.
  • 포지션을 absolute 나 fixed 로 설정 시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
    • relative 인 컨테이너 내부에 absolut 인 태그가 있다면 그 객체의 절대 좌표는 relative 컨테이너를 기준점으로 잡는다. *

z-index : 요소의 수직 위치를 정하는 속성

  • position 속성을 이용하면 요소를 겹치게 놓을 수 있다. 이때 겹치는 요소들의 둥둥 떠 다니는 앞 뒷 면을 z-index로 정할 수 있다. 값은 숫자이며, 숫자가 클 수록 앞면 작을수록 뒷면으로 간다.

  • visibility 속성 : 요소를 숨기거나 표시할 수 있다.

    • visibililty 속성은 태그가 보이는(가시성)을 결정한다.
    • visibility 의 값 visible : 보임,
    • hidden 숨김(자신의 영역은 계속 차지)
    • collapse : 겹치도록 지정(테이블의 행과 열 요소만 지정 가능하며, 그 요소를 지정하면 hidden으로 해석)
    • inherit : 부모 요소의 값을 상속

float


  • float 프로퍼티는 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 프로퍼티이다.

    https://css-tricks.com/wp-content/csstricks-uploads/print-layout.png

  • float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게)한다. 여기서 떠 있다는 의미는 요소가 원래의 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것을 뜻한다.

  • float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 absolute 를 사용하면 안된다.

https://internetingishard.com/html-and-css/floats/floats-and-auto-margin-for-alignment-536a81.png

    1. 정렬

      float 프로퍼티를 사용하지 않는 블록 요소들은 수직으로 정렬된다.

      float 프로퍼티는 좌측,우측 가로 정렬만 할 수 있다. 중앙 가로 정렬은 위에 그림처럼 마진 값으로 정렬한다.

    1. width

      width 프로퍼티의 기본값은 100%이므로 width 프로퍼티값을 지정하지 않은 block 요소는 부모 요소의 가로폭을 가득 채운다.

      width 프로퍼티를 선언하지 않은 block 레벨 요소에 float 선언되면 widthinline 요소와 같이 content에 맞게 "최소화"되고 "다음 요소" 위에 떠 있게 된다.

      https://codepen.io/sooonding/pen/qBBemBr

        • 문제점 *** float 프로퍼티가 없는 요소에 float가 붙게 되면서 정렬에 대한 문제점이 발생한다.어떻게 해결할까?
        1. 붙는 것에 대한 문제점 해결

          (1) 문제를 해결하는 가장 쉬운 방법은 float 프로퍼티가 선언된 자식 요소의 부모에게 overflow: hidden 프로퍼티를 선언하는 것이다.

          (2) overflow: hidden 과 함게 많이 사용되는 방법은 ::after 가상 요소 선택자를 이용하는 것이다.

          부모 요소에 clearfix 클래스만 추가해서 하는 것이 깔끔하다.

          .clearfix:after {

            content : "";
            display: block;
            clear: both;

          }

참조 : "https://poiemaweb.com"