CSS 란?
-
HTML,CSS 와 JS는 웹 어플리케이션을 만드는 세가지 주축이다. 그 중에서 CSS는 스타일링을 담당한다.
-
CSS는 화려함만을 위해 사용되지는 않는다.
-
더 나은 사용자 경험(UX, User experience)을 제공할 수 있다.
-
콘텐츠의 배치와 위치 (레이아웃 디자인)
-
텍스트를 강조하거나 밑줄을 치는 등의 타이포그래피
UI (User Interface)
- 일반 사용자를 대상으로 하는 어플리케이션은 UI가 필요하다. 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용이 없다.
UX (User Experience)
- 많은 기능을 다룰수록 더욱 많은 버튼이 생긴다.
복잡한 내용을 단순하게 구분짓고, 사용자가 하나의 내용에 집중할 수 있도록 사용자의 경험이나 만족도를 고려해 디자인할 수 있다.
CSS의 문법구성
body{ color: red; font-size: 30px; }위 예시에서
body는 '셀렉터(selector)'이다.
중괄호안의 내용은 '선언 블록(declaration block)'이라 한다.
각 선언안의 예를 들어 color은 '속성명(property)'이며 red는 '속성값(value)'이라 한다.
HTML의 link 태그
<link rel="stylesheet" href="index.css" />link 태그는 HTML파일과 다른 파일을 연결하는 목적으로 사용한다.
rel속성에 연결하고자하는 파일의 역할이나 특징을 추가한다.
href속성에 파일의 위치를 추가한다.(한 폴더 내에 있으면 파일이름만 입력한다.)
HTML태그에 직접 CSS속성을 추가하기
- 인라인 스타일 시트
<nav style="background: #eee; color: blue">...</nav>
- 내부 스타일 시트
<head> <style> h1{ background: #eee; color:blue; } </style> </head>관심사 분리 측면에서 권장되지는 않는다.
파일로 굳이 구분하지 않아도 될만큼 적은 CSS를 사용하는 등의 특수한 경우에 사용하는 것이 좋다.
ID
요소를 정확하게 선택하기 위해 사용된다.
ID가 있는 요소를 선택할 때는 #기호를 사용한다.<h4 id="navigation-title">This is the navigation section.</h4>HTML의 한 요소에 ID를 지정했다.
#navigation-title { color: red; }CSS에 ID로 요소를 선택해 스타일링 했다.
- ID는 고유의 이름을 지정하는 것으로 하나의 요소만 선택이 가능하다.
Class
요소를 정확하게 선택하기 위해 사용된다.
class가 있는 요소를 선택할때는 .기호를 사용한다.<ul> <li class="menu-item">Home</li> <li class="menu-item">Mac</li> <li class="menu-item">iPhone</li> <li class="menu-item">iPad</li> </ul>HTML의 여러 요소에 하나의 class를 지정했다.
.menu-item { text-decoration: underline; }CSS에 class로 요소들을 선택해 스타일링 했다.
<ul> <li class="menu-item main-item">Home</li> </ul>공백을 사용해 HTML의 하나의 요소에 여러 클래스를 지정할 수 있다.
