CSS 개념

feelslikemmmm·2020년 9월 21일

CSS

목록 보기

1/2

CSS & SELECTOR

WHAT IS CSS?
- Cascading Style Sheets의 약자
- 웹 페이지 구성요소의 스타일을 정의하는 언어

HTML EXAMPLE

로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
웹 페이지의 요소(element)들을 구성하는 역할

CSS EXAMPLE

로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
- 검색창의 너비
- 버튼의 크기
- 구성요소를 어디에 위치할 것인가

HOW TO USE CSS?

css를 html에 적용하는 세가지 방법
- inline
- HTML 내부에 stylesheet 작성
- HTML 외부에 stylesheet 작성

inline

    <h1 style="color: red; font-style: italic">Hello world</h1>

- h1태그에 style이라는 속성을 부여해서 적용
- 색상은 빨간색, 스타일은 기울임꼴임을 명시

HTML 내부에 stylesheet 작성
- 보통 태그 안에 삽입
- 태그를 선택하는 규칙(Selector)에 따라 일괄 적용

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>page title</title>
      <style>
        h1 {
          color: red;
          font-style: italic;
        }
        /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
      </style>
    </head>
    <body>
      <h1>Hello world</h1>
      <div>Contents here
        <span>Here too!</span>
      </div>
    </body>
    </html>
    ```

    3. HTML 외부에 stylesheet작성

    - <Link>태그 이용
    - css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입

    ```html
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>page title</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <h1>Hello world</h1>
      <div>Contents here
        <span>Here too!</span>
      </div>
    </body>
    </html>

---

# CSS SELECTOR

- CSS에서 요소(element)를 선택하는 규칙
- Note: 태그라는 용어는 시작 및 종료 태그와 같이 마크업( Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미합니다

CASE STUDY

만일 다음 문서에서 hello world에는 빨간색, code states에는 파란색을 적용하고 싶을 경우는?

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>page title</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <h1>Hello world</h1>
      <h1>code states</h1>
    </body>
    </html>

style.css

    h1 {color: red}

SOLUTION 1: 각각의 ELEMENT에 고유한 ID를 부여
- id 속성 이용
- #indentifier와 같이 #을 이용해 고유한 id를 선택
  
  index.html

      <h1 id="hello">Hello world</h1>
      <h1 id="codestates">code states</h1>

style.css

    #hello {color:red;}
    #codestates {color: blue;}

SOLUTION 2: 종류(class)를 만들고 element에 class 부여
- 각기 다른 색의 특성을 가진 종류를 만들고, 해당 element에 적용
- 여러 태그에 class를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능
- .className과 같이 .(dot)을 이용해 class 선택
  
  index.html

      <h1 class="red underline">Hello world</h1>
      <h1 class="blue">code states</h1>

style.css

    .red {color:red;}
    .blue {color:blue;}
    .underline{ text-decoration: underline; }

CLASS 선택자와 ID 선택자

class / id

자유롭게 이름 붙임 / 자유롭게 이름 붙임

동일한 값을 갖는 element / 문서 내에서 단 하나의 element가 유일한 값을 가짐

는 많음

element가 여러 값을 가질 / element는 단 하나의 값을 가짐

수 있음

스타일의 분류 / 특정 element를 이름 붙이는 데 사용

(classification)에 사용

여러개의 CLASS 값을 갖는 element

공백(whitespace)를 이용해, 한 element에 여러 class를 지정할 수 있음

    <h1 class="impact red">Hello world</h1>

    .impact { font-size: 2em; font-weight: bold; }
    .red { color: red; }

LEARN YOURSELF: CSS

레이아웃 & Box Model
- margin, padding, border
- width, height, top, left, bottom, right
- position, box-sizing
레이아웃 고급:
- z-index
- float, flex
기본 스타일링:
- font-, bacground-

feelslikemmmm

꾸준함을 잃지 말자는 모토를 가지고 개발하고 있습니다 :)

다음 포스트