Skip to content

Latest commit

 

History

History
328 lines (213 loc) · 6.13 KB

01_CSS101.md

File metadata and controls

328 lines (213 loc) · 6.13 KB

CSS Basics



Table of Contents

  • CSS 정의 방법 / 선택자 /속성 선언
  • 의사 클래스 (pseudo class)
  • 미디어 쿼리
  • 상속 및 우선순위 -> 이러닝 오류 있음 주의!

Why CSS (Cascading Style Sheets) ?

  • HTML은 문서의 구조화 (Markup)

  • CSS 은 스타일을 정의한다


CSS 기본 사용법

h2 {
 color: blue;
 font-size: 20px;
}
  • h2 => Selector
  • color => Property
  • blue => Value

CSS 정의방법


  1. In-line Styling

    <div style="color: blue; font-size: 100px;">
   Inline CSS example! 
</div>
    • 해당 tag에 직접 style 속성을 활용

  2. 내부 참조 (embedding)

    <head>
    <title> CSS Tutorial </title>
    <style>
        h1 {
          color: blue;
            font-size: 100px;
        }
    </style>
</head>
    • HTML file 내에 <style> tag 내에 지정

  3. 외부 참조 (link file)

    float.html

    <head>
    <style>
        <link rel="stylesheet" href="float.css">
    </style>
</head>
<body>
    <div id="link_it">CSS sample </div>
</body>

    float.css

    #link_it {
    background-color: black;
    color: white;
}


어떤 CSS 정의 방법이 옳을까?

image-20200311224751036

  • 외부참조를 하는 것이 반복되는 코드를 줄일 수 있다!


CSS Selector

HTML 문서에 특정한 요소를 선택하여 스타일링 하기 위해서는 반드시 선택자 라는 개념이 필요하다

  • 기초 선택자

  • 고급 선택자

    • 자손 선택자 / 직계 자손 선택자
    • 형제 / 인접형제 선택자, 전체 선택자

  • 의사 클래스 (pseudo class)

    • link, 동적 의사 클래스

    • 구조적 의사 클래스

    • 기타 의사 클래스, 의사 앨리먼트


CSS Tip

: 되는 것 vs 하면 안되는 것을 잘 구분하기



CSS 상속

  • 속성 중에는 상속 되는것과 상속 않는 것이 있다

  • 상속 되는 것

    • Text 관련 요소 (front, color, text-align, opacity, visibility)

  • 상속 되지 않는 것

    • `Box model 관련 요소 (width, height, padding, border, box-sizing, display)
    • position 관련 요소 (position, top/right/bottom/left, z-index)

+ CSS Inheritance from MDN

  • In CSS, inheritance controls what happens when no value is specified for a property on an element. Refer to any CSS property definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").

CSS 적용 우선순위 (Cascading order)

  1. 중요도 (Importance) - 사용시 주의 (왜냐면 최강!!)
    • important
      • vendor, bootstrap 등 내가 작성하지 않고 외부에서 받아온 CSS나 JavaScript 기반의 라이브러리들을 사용할 시 우선순위를 주기 위해 overriding 할 때 사용
      • 그 외에는 잘 쓰지 않는다 (너무 강력해서!)
h3 {
 color: violet !important
}

  1. 우선 순위 (Specificity)

    • in-line / id 선택자 / class 선택자 / 속성 선택자, Pseudo-class / 요소 선택자

  2. Source code 순서

    • 나중에 정의된 것이 더 우선순위를 갖는다!!!


크기단위 (상대)

  • px
  • %
  • em
    • 배수단위
    • 요소에 지정된 size에 상대적인 size를 가짐
  • rem
    • 최상위 요소(HTML)의 사이즈를 기순으로 배수 단위를 가짐
  • viewport 기준 단위
    • vw, vh, vmin, vmax

em vs rem

  • em

    • 자기가 갖을 수 있는 크기의 배수
    • 상속을 받아서 그 수에 대해 em
    • 24px 일때 1.5em == 36px

  • rem

    • root em

      • root를 기준으로 함 (browser 기준!)

    • 기본적으로 browser pixcel size == 16px

    • 1.5 rem == 24px



색상 단위

  • HEX (00~ff)
    • #ffffff
  • RGB (0, 255)
    • rgb(0,0,0)
  • RGBA
    • rgba(0, 0, 0, 0.5)


Box model

모든 html은 box model을 갖고있음


image-20200312005032601

  • 상하좌우
  • 상하 / 좌우
  • 상 / 좌우 / 하
  • 상 / 우 / 하 / 좌


box-sizing

  • 기본적인 모든 요소의 box-sizing은 content-box (browser default 값임)
    • padding을 제외한 순수 contents 영역만을 box로 지정
  • 다만, 우리가 일반적으로 영역을 볼 때는 padding을 포함한 border까지의 너비를 100px로 보는 것을 원함
    • 그 경우 box-sizing을 border-box로 설정한다!

Tip!

box-sizing: border-box;


Margin Collapsing

: 인접 형제 요소간의 margin이 겹쳐서 보임



display inline vs block

  • block level 요소와 inline level 요소 구분 (HTML 4.1까지만)
  • 대표적인 block level 요소
    • div
    • ul / ol / li
    • p
    • hr
    • form
  • 대표적인 inline level 요소
    • span
    • a
    • img
    • input, label
    • b, em i, strong

1. display: block

  • 줄 바꿈이 일어나는 요소
  • 화면 크기 전체의 가로폭을 차지한다
    • 기본적으로 화면 너비의 100%를 가짐
    • 너비를 가질 수 없다면, 자동으로 margin을 줘버림
    • 그래서 줄 바꿈이 일어남!
  • block level 요소 안에 inline level 요소가 들어갈 수 있음

2. display: inline

  • 줄 바꿈이 일어나지 않는 행의 일부 요소
  • content 너비만큼 가로폭을 차지한다
  • width, height, margin-top, margin-bottom을 지정할 수 없다
  • 상하여백은 line-height로 지정한다

3. inline-block

  • block과 inline level 요소의 특징을 모두 갖는다
  • inline처럼 한 줄에 표시한다
  • block 처럼 width, height, margin 속성을 모두 지정할 수 있다

속성에 따른 수평 정렬

image-20200312021324363

  • inline 요소는 text-align 속성을 쓸 수 있음
  • block 요소는 margin 을 기준으로 정렬해야함