1. CSS
1) 정의
: Cascading Style Sheet
2) 특징
1> HTML이 정보 부분을 담당한다면 CSS는 디자인을 담당
2> HTML로 작성된 정보를 꾸며주는 언어
3> 문서의 레이아웃과 스타일 정의
3) CSS 구성요소
선택자 {속성: 속성값;}
1> 선택자: 디자인 작업을 진행한 HTML 영역
ex> <h1> 태그에 어떤 디자인을 입히고 싶은 경우 <h1>을 선택자 자리에 넣는다.
2> 속성: 어떤 디자인을 적용할지
ex> 글자 색을 변경하고 싶다. => color / 글자 크기를 변경하고 싶다. => font size
3> 속성값: 해당 디자인에 대해 구체적으로 명령
※ 규칙
1> 중괄호
2> ;로 마침표 찍어주기
h1 {
font-size: 20px;
font-family: sans-serif;
color: blue;
background-color: yellow;
text-align: center;
}
2. CSS 연동 방법
CSS 언어를 HTML과 연동시켜야 하는데 3가지 방법이 있다.
1) Inline Style Sheet
태그 안에 직접 원하는 스타일을 적용
1> HTML 태그에 style이라는 속성을 바로 삽입해서 CSS 코드를 입력
2> 중괄호 생략되는 대신에 큰 따옴표가 들어간다.
<h1 style="color: red;"> coding 101 </h1>2) Internal Style Sheet
style이라는 HTML 태그 자체를 이용
1> <head> 태그 내부에 있는 <style> 태그 안에 직접 CSS를 입력
2> 이 경우는 기존 문법에 맞게 넣으면 된다.
<head>
<style>
h1 {
background-color: yellow;
}
</style>
</head>
※ 위의 2가지 모두 단점이 있다.
- HTML과 CSS가 뒤섞여 있기 때문에 가독성이 떨어진다.
그래서 3번째 방식을 주로 사용한다.
3) External Style Sheet
CSS언어가 담겨져 있는 문서를 따로 생성해서
HTML이 담겨져 있는 문서와 CSS 문서를
<link> 태그로 연결해준다.
1> <link> 태그는 닫힌 태그를 사용하지 않는다.
2> href = "파일명.css"
<head>
<link rel="stylesheet" href="style.css">
</head>rel
- rel 속성은 <link> 요소에 반드시 명시되어야 하는 필수 속성입니다.
- 속성값 "stylesheet"은 외부 리소스를 불러온다.
href
- <a>태그에서 웹사이트 링크 주소를 넣을 때 사용
- <link> 태그에서는 외부 파일을 불러오는 속성
3. Selector (선택자)
HTML의 어떤 요소에 CSS을 적용할 것인가
1) 구성
Type
Class
ID
2) Type Selector
1> 특정 tag에 스타일을 적용 (style 태그)
<style>
h2 {
color: red;
}
</style>- 선택자로 'h2'라는 특정 태그를 이용
- 그래서 특정 태그<h2>에 스타일을 적용
3) Class Selector
1> Class 이름으로 특정 위치에 스타일을 적용 ('.coding')
<style>
.coding {
color: blue;
}
</style>
<h2 class="coding"> Hello World </h2>- HTML 태그에 class라는 속성을 만든다.
- class에 접근하려고 속성값에 '.' 을 붙여서 이용
4) ID Selector
1> ID를 이용하여 스타일을 적용 ('#coding')
<style>
#coding {
color: green;
}
</style>
<h2 id="coding">Hello World</h2>- HTML 태그에 id라는 속성을 추가해서 (id는 #을 이용해서 표현)
- id에 접근하려고 속성값에 '#' 을 붙여서 이용
'Web 기초' 카테고리의 다른 글
| HTML 빠른 정리 (0) | 2020.03.12 |
|---|
