앞서 말한 HTML와 떼려야 뗄 수 없는 관계인 CSS는 HTML로 구조를 짠 것에 디자인을 부여하기 위한 도구라고 볼 수 있다.
CSS를 HTML에 적용하는 것에는 inline과 HTML내부, 외부에 stylesheet 작성하는 것으로 적용 가능하다고 한다.
첫 번째 방법인 inline은 아래와 같이 html 특정 태그에 직접 style을 적용하는 방법이다.
|
1
|
<h1 style="color: yellow; font-style: italic">Hello world<h1>
|
cs |
두 번째 방법인 내부에서 진행하는 방법은 아래처럼 보통 head태그 안에 style태그를 사용하여 진행하게 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<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>
|
cs |
세 번째 방법인 외부에서 진행하는 방법은 link태그를 이용하여 아래 두 번째 그림의 css확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입하는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
</head>
<body>
<h1>Hello world</h1>
<div>Contents here
<span>Here too!<span>
</div>
</body>
</html>
|
cs |
<index.html>
|
1
2
3
4
5
|
h1 {
color: red;
font-style: italic;
}
/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
|
cs |
<myFirstStyle.css>
CSS SELECTOR는 CSS에서 요소(의미를 갖는 하나의 구조)를 선택하는 규칙이다.
class selector와 id selector를 비교해보면 둘 다 자유롭게 이름을 정의할 수는 있지만 id는 문서 내에서 단 하나의 element가 유일한 값을 가지는 반면에 class는 동일한 값을 갖는 element가 많다.
이를 쉽게 말하면 고유한 이름을 붙일 때는 id, 반복되는 영역을 유형별로 분류할 때는 class 사용하면 될 것이다.
id는 <div id = "writing-section"> -> div#writing-section
class는 <li class = "comment"> -> li.comment로 사용 가능하다.
CSS의 레이아웃을 보자면 다양한 것들이 존재하지만 Box Model을 보자면 보통 box-sizing: border-box; 로 설정해놓는 편이 계산이 쉽다고 한다.
그리고 포지셔닝에는 기본값인 static과 기본값과 상대적인 위치를 고려하는 relative, 브라우저 화면의 좌상단을 기준으로 절대적인 위치인 fixed, 부모 중 기준점이 있는 경우 그 기준으로 절대적인 위치인 absolute, 마지막으로 기본적으로 relative처럼 작동하나 스크롤 영역을 벗어나면 fixed처럼 작동하는 sticky가 존재한다.
'개념정리' 카테고리의 다른 글
| 8/14[TIL] 고차함수 (0) | 2020.08.14 |
|---|---|
| 8/11[TIL] DOM (0) | 2020.08.11 |
| [8/10]TIL <HTML> (0) | 2020.08.10 |
| 개발자로의 커리어 전환 2주일... (1) | 2020.08.10 |
| 8/7[TIL]매개변수 (0) | 2020.08.07 |
