시작에 앞서, codepen에서 코드를 테스트 해볼 수 있다.

CSS

---

CSS(Cascading Style Sheets)는 스타일시트 언어이다. HTML로 구조를 세우고 CSS로 멋지고 예쁜 살을 덧붙이는것이다.

CSS의 목적은 '좋은 사용자 경험을 제공'하는것이다.

보기 좋은 떡이 먹기에도 좋다라는 말이 있듯이 같은 내용을 전달하더라도 보기에 좋고 가독성을 좋게 만든다면 전달력이 훨씬 좋아지는 것이다.

CSS는 스타일링 도구로서, 독립적으로는 기능하지 않는다.
반드시 HTML이 있어야만 동작할 수 있는 것이다.

CSS는 셀렉터를 이용해서 선택적으로 적용할 수 있는데, 많이 사용되는 것들이 요소에 id를 붙여 적용하거나, class를 붙여 셀렉터로 끌어와서 적용하는것이다.

#ID-title {
  color: red;
}

.class-title {
  color: red;
}

같은 형식으로 적용할 수 있는 것이다.

이 CSS는 .CSS 확장자로 파일을 만들어

<link rel="stylesheet" href="파일명.css" />

코드로 HTML파일에 css 파일의 내용을 끌어와 HTML 파일 전체에 적용할 수도 있고, HTML파일 각각에 코드를 집어넣어 적용할 수도 있는데. css파일을 사용해 스타일을 적용하는 방법을 추천한다.

속성명

여기서 CSS 속성명에 대해 잠시 몇가지 알아보고 넘어가면

속성명	기능
color	글자의 색상
font-family	글꼴
font-size	글자의 크기
font-weight	글자의 굵기
text-decoration	밑줄,가로줄
letter-spacing	자간
line-height	행간
row2	l2
row3	l3

이런 속성명들을 selector를 이용하여 스타일링을 적용하게 된다. 예를 하나 들어서

	h1{
    	color: red;
    }

코드를 css파일에 작성하고, html에서 href 링크를 사용해 가져온다면, h1 태그로 작성된 글씨가 red컬러로 변환되게 된다.

단위

글꼴 크기와 화면 크기 등을 다룰때, 단위가 굉장히 중요한데, 여기서 단위는 절대단위와 상대단위 두가지로나눌 수 있다.

• 절대 단위 : px, pt 등
• 상대 단위 : % , em , rem , ch , vw 등

MDN ,w3schools 에서 더 많은 단위들을 확인할 수 있다.

박스모델

모든 컨텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 된다. 이 박스는 항상 직사각형이고, width와 height를 가진다. css를 이용해 이 크기를 설정할 수 있다.

박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있는데, 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스는 inline 박스라고 부른다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 박스를 inline-block 박스라고 한다.

	block	inline-block	inline
줄바꿈 여부	줄바꿈 O	줄바꿈 X	줄바꿈 X
기본적으로 갖는 width	100%	컨텐츠 크기만큼	컨텐츠 크기만큼
width,height 사용 가능 여부	가능	가능	불가능

CSS 박스 모델은 margin (바깥 여백), border (테두리), padding (안쪽 여백)가 content를 감싸고 있다.

padding이나 margin에 값을 주면 이 값은 상 우 하 좌 순으로 위에서부터 시계방향으로 적용된다.

박스를 벗어나는 콘텐츠 처리

만약 콘텐츠의 크기가 박스의 크기보다 크다면, 콘텐츠가 박스 밖으로 빠져나오게 된다. 이런 상황을 막기 위해 CSS에 몇가지 코드를 사용할 수 있는데, 이것이 overflow이다

{overflow: auto}
{overflow: hidden}

overflow의 auto 값은 콘텐츠가 넘치는 경우, 스크롤을 생성하도록 한다. 만약 넘치는 콘텐츠의 내용을 보여주고 싶지 않다면 hidden값을 사용해서 넘치는 콘텐츠를 숨길 수 있다. overflow 속성은 overflow-x 속성이나 overflow-y속성을 이용해 가로방향, 세로방향으로 스크롤 할 수 있게끔 지정할 수 있다.

태그 셀렉터

CSS파일과 HTML 파일을 따로 사용한다면, 셀렉터를 이용해 요소를 선택하여 속성을 적용하게 된다.

여기서 몇가지 셀렉터가 나오는데, #은 id요소를 선택하고, .은 class요소를 선택한다.

<span class = 'title'; id = 'title'>
  제목은 </span>
<span class = 'title';>
  타이틀이다.</span>

위 형식으로 html에 작성했을 때,

css에서 가져오는 내용이
#title{color : red;}
라면 '제목은' 부분만 붉은색이 될 것이고,

.title{color : red;}
라면 '제목은 타이틀이다.' 가 붉은색이 될 것이다.

표로 셀렉터들을 정리하자면

셀렉터 이름	선택하는 내용	사용예
전체 셀렉터	문서의 모든 요소	*
태그 셀렉터	tag	tag의 이름(p, class, div 등)
ID 셀렉터	id	설정한 id명
class 셀렉터	class	설정한 class명

이외에도

attribute 셀렉터, 자식 셀렉터, 후손 셀렉터, 형제 셀렉터, 인접 형제 셀렉터, 가상 클래스 셀렉터, UI 요소 상태 셀렉터, 구조 가상 클래스 셀렉터, 부정 셀렉터, 정합성 확인 셀렉터

등 많은 셀렉터가 있다.