1. CSS
- HTML의 디자인을 위해 만들어진 것.
- CCS를 사용하지 않은 HTML은 보기에도 별로일 뿐 아니라, 사용하기 불편하다. UX(User expirenece)를 위해서도 사용할 수 있다.
- UI(User, Interface)는 사람들이 보기 좋게 만들어져서 프로그래밍을 모르는 사람도 기능을 조작할 수 있게 만드는 디자인적 요소이다. UI가 좋으면, 자연스럽게 UX도 올라갈 것이고, 그게 좋은 프로그램의 기본이 될 것이다.
- CSS는 '태그'와 비슷한 형태로, 각각의 부분에 따라 설정이 가능하다. (시맨틱 태그라고 부르며, 콘텐츠의 구획을 알기 쉽게 나누기 위해 사용한다.)
2. CSS 분해하기
- body => 셀렉터(Selector) : 태그 이름, id, class를 선언해 준다(id 나 class를 이용하면 더 새 부적으로 선택할 수 있다!)
- { } => 선언 블록(Declaraation block) : 직접 꾸며줄 내용
- font-size : 30px, color : red, font-size : 30px; => 선언(Declaration)
- 선언의 앞 부분 => 속성명(Property) 뒷부분 => 속성 값(Value, 크기나 색)
body {color : red;
font-size : 30px;
} - 마지막 세미콜론(;) 찍는것이 참 아름답다. 속성끼리 구분을 할 수 있는 아주 편한 기능이다. (안 찍어도 되긴 한다.)
3. CSS 파일의 추가
- HTML 안에서 style태그를 이용해서 직접 꾸며 줄 수 도 있다(일명 내부 스타일 시트). 하지만, 하나에 집중하기 위한 '관심사 분리'를 하는 것이 좋다(외부 스타일 시트).
4. id 와 class
- 중복으로 많이 사용되는 요소(element)들 중에 딱! 하나만 (ex: 수 많은 h2를 사용해 놓고, 그중에 3번째 있는 h2 거 딱 하나 이런 느낌...) 스타일을 적용시키고 싶을 때 사용한다.
- id는 전체에서 딱 한번 사용가능(작동은 한다. 하지만 '약속'이다. id라면 사람 이름 같은 건데, 동명이인이 있으면 헷갈리듯이 하나만 주는 것이다. 여러 가지를 통제하려면 class 즉, 같은 반 학생들로 묶어주는 것이 맞다.)
- class는 동일한 스타일로 여러가지 앨리 먼트를 적용시킬 수 있다(심지어, class는 다른 태그에도 적용 가능하다.)
- id는 #으로 , class는 .(온점)으로 선택한다!
5. 텍스트 꾸미기
- color : 색깔 => 텍스트 색 변경;
- font-weight : 굵기
- text-decoration : 텍스트에 줄 긋기
- letter-spacing : 자간(글자 간 거리)
- line-height : 행간(줄 사이 거리)
- font-family : "글꼴", "다른 글꼴". "또 다른 글꼴"; => 글꼴 변경 (만약, 해당하는 글꼴이 없다면 그다음 글꼴로 자동으로 적용된다.)
- 하지만 사용자의 글꼴의 존제 여부와 상관없이 항상 그 글꼴을 보여주고 싶다면 '웹 폰트'로 링크해 두면 된다!
- font-size: 원하는 사이즈;
- 단위의 중요성 : 알맞은 단위로 사이즈를 선택 해야 한다.
- 상대 단위 : 사용자의 상대적인 상황에 따라 바뀌는 단위. => %, em, rem, ch, vw, vh 등
- 절대 단위: 어떠한 상황에서든 바뀌지 않고 설정된 값을 보여주는 단위 => px, pt 등
- 어떤 상황에 어떤 단위를 쓸까?
- 절대 단위 : 프린트할 때 와 같이 화면의 사이즈가 정해진 경우에 보이는 결과가 출력될 결과와 어떤 상황에서든 같기 때문에 사용할 수 있음.
- 일반적인 경우 : rem를 사용. 기본적으로 브라우저는 1 rem으로, 사용자가 지정한 글꼴의 크기에 따라 변경되기 때문!
- 반응형 웹(responsive web>의 경우 : 휴대폰을 가로였다가 세로로 돌리면? 아이패드를 이용해 웹을 본다면? 이럴 경우, px를 쓴다. 사용자가 보는 화면의 사이즈에 따라 텍스트의 크기도 바뀔 것이다.
- 딱! 맞는 화면이 필요한 경우 : vw, vh를 쓴다. Viewprot, 즉, 보이는 부분까지(화면을 작게 하고 크게 하고에 따라)에 딱 맞춰 줌.
- text-align : left or right or center or justify => 정렬.
6. 박스 모델
-
- 모든 콘텐츠가 가지고 있는 독자적인 영역. 전부 박스형을 띄고 있어서 박스 모델이다.
- block과 inline, 그리고 inline-block
- '제목'처럼, 혼자서 한 줄(화면 끝까지)을 다 쓰면서(인위적으로 조절은 가능) 다음 문장을 줄 바꿈 시키는 요소를 'block' 박스, 그래서 width가 화면의 100% + 줄 바꿈 이 되는 태그들이 된다.(ex: h2, p, 등등)
- 줄 안에서 다른 태그들과 함께 나란히 쓰일 수 있어서 사이즈는 글자 크기만큼이며, 줄을 바꾸지 않는 요소를 'inline' 박스, 그래서 width는 글자 크기만큼 + 줄 바꿈이 안 되는 태그들 이 된다.(ex: span 등)
- 그 둘을 섞어서 다른 태그들과 함께 나란히 쓰면서 width도 글자 사이즈와 같고, 그래서 width와 height까지 조절 가능한 요소를 ' inline-block'박스라고 한다.
- console 창에서 display를 찾으면 확인할 수 있다. + display : 원하는 박스 요소로 바꿔줄 수 도 있다!
- 박스들의 구성 요소-
- border (테두리) : 선이다. 마지막 경계.
- margin (밖의 여백) : top, right, bottom, left 순으로 각각 면에 따라 여백을 지정.
- 하나만 적으면 다 적용.
- 음수도 가능! 그럼 다른 영역에 겹치게 된다.
- padding (안쪽의 여백) : 콘텐츠와 border사이의 여백. 마찬가지로, top, right, bottom, left 순으로 padding과 같다.
- 콘텐츠가 박스 밖을 넘어간다면 p태그에 overflow: auto를 써주면 스크롤을 넣을 수 있다.
- 더 쉽게, *인 모든 요소를 선택하는 실렉터를 이용해 모든 요소가 여백과 테두리를 포함한 박스 사이즈를 적용시킬 수 있게 된다!(아래 코드를 매번 넣는 것이 좋겠지?)
* {
box-sizing: border-box;
}