0. CSS
0.1 CSS와 HTML 차이
0.1.1 HTML 문법
key=value, queryString이라고 한다.
예) type="text", 속성=속성값
0.1.2 CSS 문법
CSS는 object 생성 형태를 띄고 있다(정확히는 object가 아님).
key:value;
예) font-size: 12px; 이나 background: blue;
0.1.3 둘의 차이
HTML에서는 속성값 사이에 따옴표("")를 붙여서 구분하는데
CSS에서는 따옴표가 없고 끝에 세미콜론(;)이 붙는다.
세미콜론은 끝나는 영역을 지정해서 구분한다. 세미콜론이 인간만 알아보기 불편한 게 아니라 컴퓨터도 그래서 문장을 이해하지 못한다.
0.2 CSS는 왜 쓸까?
예쁘게 만드려고 쓴다. CSS는 HTML을 꾸며준다.
기존에 갖고 있던 element 속성들을 바꿔준다.
(block속성에서 inline으로, 역으로. 글자 크기도 조절할 수 있고, 알록달록하게 꾸밀 수 있다.)
그렇게 해서 요소를 내 마음대로 바꿔 만들 수 있다.
0.2.1 그럼 CSS로 제목도 다 만들지 HTML(<h1~6>)은 왜 쓸까?
영역 구분이 필요하기 때문이다.
1. CSS 적용방법
1.1 인라인 스타일
-
CSS의 기본 문법이라고 할 수 있으며 inline으로 적용 0순위
-
html의
<body>안에 직접적으로 style속성을 입력한다.<p style="background: black; color: white;">black</p> <p style="color: pink;">pink</p>#짜잔
black
pink
1.2 <style> 태그
html파일 <head>영역에 작성, 저장된다. <body>안에 있는 elment에다 id나 class같은 선택자를 부여해서 해당 선택자에 CSS를 적용한다.
- 중괄호({})를 활용한 선택자의 종류를 알고, 이를 사용할 줄 알아야 한다.
- 컴퓨터적인 사고방식으로 처리결과를 알아야 한다.(컴퓨터의 명령처리 순위 파악)
1.2.1 쓰는 법
나는 바디에 있는 elments에 선택자를 부여하고, 그것들을 모아서 헤드에서 한 번에 CSS 작업을 처리하는 방식을 보는데 이누야샤에 나오는 머리카락요괴가 떠올랐다.
아름다운 이 요괴의 이름은 '역발의 유라'로 머리카락을 자유로이 조종하는 여자다.
나는 이 요괴가 <head>안에 올라 들어가서 <body>안에 여러 elments에게 머리카락(선택자)을 걸고, 꼭두각시를 조종하듯이 원하는대로 CSS를 써서 꾸민다는 느낌을 받았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documents</title>
<style>
#hair{
font-size: 25px;
color: skyblue;
}
.hair{
font-size: 25px;
color: lavender;
}
</style>
</head>
<body>
<p id="hair">유라</p>
<p class="hair">맘대루</p>
</body>
</html><head> 안에서 <style> 태그 안에 선택자와 중괄호를 입력한다.
중괄호를 쓰는 이유는 여기서부터({) 여기까지가(}) id가 hair인 영역, class가 hair인 영역을 우리 사람의 눈으로도 쉽게 구분하는 것처럼, 컴퓨터도 쉽게 구분할 수 있기 때문이다.
중괄호 안에서 CSS 명령에 맞게 <body> 내용이 바뀐다.
<style>태그 안을 보면, 선택자 이름 앞에 붙는 문자가 다른데
#는 id 선택자를, .은 class 선택자를 뜻한다.
#짜잔
Documents유라
맘대루
1.2.2 선택자(id, class)
특정 element 가 가지고 잇는 고유값이다.
<h2 id="title">제목</h2>"h2, 너를 이제부터 title이라고 불러주겠다!"
id는 레이아웃 구성 하나밖에 없을 때 사용하고,
보통 반복적으로 사용하는 부분에 대해서는 class를 사용한다.
<ul class="menu1">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>
<ul class="menu2">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
<li>리스트4</li>
</ul>li 내부 전부에 CSS 적용시키고 싶다면
ul > li { }"
<ul>안에 있는<li>만 괄호 안에 적은대로 하겠다."
"class가 menu2인 리스트들 ,
<li>만 괄호 안에 적은대로 하겠다.".menu2 > li { }
1.2.3 *선택자
위에서 선택자에 맞게 id는 #, class는 .로 <head>에서 코드를 썼
선택자도 있다. 선택자는 모든 엘리먼트를 겨냥한다. *{꾸미는 내용}
해당 엘리멘트 전체를 꾸밀 때는 (엘리멘트명) {꾸미는 내용} 이렇게 쓴다.
예시)
<head>
<style>
*{
font-size: 20px;
color: blue;
}
p{
font-size: 15px;
color: red;
}
</style>
</head>
* 선택자는 모든 elements에 영향을 줄 수 있기도 하고 별이라고도 불러서 나는 군대 생각이 났다. 똥별이든지 제대로 된 장군이든지 일개 졸병들은 그들이 내리는 명령 하나하나에 안/좋은 영향을 받는다고 생각한다.
1.3 외부파일 생성해서 적용
인라인 스타일과 <style>태그는 html파일 안에서 CSS를 적용시킨다는 점에서 같다. 이와 달리 확장자명이 .css인 파일을 따로 만들고 꾸며 줄 html파일과 연결해 작업하는 방식이 있다.
파일경로(절대경로와 상대경로)에 대해서 배웠다
자주 쓰이는 CSS 내용
1.4 margin padding 이라는 속성의 개념
margin:
padding:
width height 넓이와 높이를 지정할 수 있다
width:
height:
margin: 15px 0 15px 0; 순서대로 시계 방향으로(12-3-6-9) /
/네 방향, 두 방향(위 아래), 전체 방향 / 세 방향은 검색해 /
box-sizing: border-box; /보더박스가 짝꿍이다 */
