개요

CSS를 이해한다.

Summary

CSS. 스타일 속성이 흘러내려가 상속되는 모습이 마치 폭포와 같다.

1. CSS

CSS = Cascading Style Sheet
(연속적인,폭포)(형식,꼴)(종이)
마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어이다.

사용 목적

CSS로 웹 페이지 스타일, 레이아웃을 정의한다.
이는 직관적인(배우지 않아도 사용하기 쉬운) UI를 제공하여 웹 사용자에게 great customer experience를 제공한다.

기본 문법과 구조

selector{
color: green;
font-size: 10px;
}

셀렉터(selector): element, id, class
element를 선택하면, 중괄호 안에 이 요소에 적용할 내용인 속성을 작성한다.
속성은 color, font-size와 같은 스타일(글꼴, 문체)이다.
이 속성에 값을 입력해 스타일을 표현한다.
세미콜론(;)은 반드시 입력하자.

CSS 스타일링

HTML에 적용하는 방법

link 요소는 html 파일과 다른 파일을 연결한다. 파일이 다른 폴더에 있을 경우, 절대 경로 또는 상대 경로를 입력해 연결한다.

selector

element 이외에 id, class를 이용한 스타일링을 알아본다.
id는 문서 내에 단 한 가지 요소의 스타일 적용한다. 특정 요소에 이름을 붙여 사용한다.
class는 문서 내 여러 요소에 동일한 스타일을 적용한다. 스타일의 분류에 사용한다.

css를 이용해 텍스트를 꾸미는 방법

아래 다양한 속성이 있다. 모르면 디자인하고 싶은 스타일의 핵심 단어를 구글링하라.

• color: 글자의 색상을 변경하는 속성
• font-family: 글꼴의 속성
• font-size: 글자의 크기 속성
• font-weight: 글자의 굵기
• text-decoration: 밑줄
• letter-spacing: 자간
• line-height: 행간

css 단위 2가지 구분

1. 절대 단위: 기기, 브라우저 사이즈의 환경에 영향을 받지 않는 절대적인 크기를 정의
   기기를 이용한 사용자 접근성 불리. 인쇄 등 화면의 사이즈가 정해진 경우 유리.
   => px, pt

2. 상대 단위: 기기, 브라우저 사이즈의 환경에 따라 변하는 상대적인 크기를 정의
   반응형 웹을 만들 때 유리. 화면을 가득 채우며 스크롤 되는 사이트를 만들 때 유리.
   => %, em, rem, ch, vw, vh

2. 박스모델

CSS 박스 모델

웹 페이지 내에 모든 콘텐츠는 고유의 영역을 갖는다. 그 직사각형의 영역을 box라고 정의한다.
box는 높이, 넓이, 테두리, 여백 등의 속성을 갖는다.

box의 구분

block: 줄 바꿈이 되는 박스. h1, p, div
inline: 줄 바꿈 없이, 옆으로 붙는 박스. span
=> span 요소에 'display: inline-block 추가할 경우 박스 크기를 설정하는 속성이 작동한다.

box를 구성하는 4가지 요소

• Margin: 바깥 여백
  • Border: 테두리
    • Padding: 안쪽 여백
      • Content: 콘텐츠

Margin: 값의 개수에 따라 네 방향에 다르게 적용된다.
값= 1,모든방향/ 2,상하 좌우/ 3,상 좌우 하/ 4, 상 우 하 좌(시계방향)

Border: 테두리 두께(border-width), 테두리 스타일(-style), 테두리 색상(-color)

padding: 값의 순서 방향은 margin과 같다.

한 줄 요약

분업과 매개. HTML은 구조, CSS는 스타일.
산업혁명이 일어나면서 분업과 협업이 확대되었다. 웹의 발전에도 분업과 협업이 필요했었다.