Link to a Stylesheet
CSS 파일과 HTML을 연결하기 위해서는,
다음과 같은 코드를 HTML <head> 부분에 넣음
<link rel="stylesheet" type="text/css" href="main.css"/>Anatomy of a CSS Rule
- Rule: 특정 HTML 요소 혹은 요소의 그룹에 대해 스타일을 적용하는 방법에 관한 CSS Instructor 리스트
- Selector: 스타일을 적용할 특정 HTML요소
- Properties and Values: { } 내 위치한 Selector에 적용할 스타일을 규정하는 속성 및 값. 아래 그림의 예시에서는 Selector에서 지정된 h1에 적용할 color 속성을 red로 지정
Inheritance of CSS
상위 부모 HTML 요소에 적용된 CSS 속성 및 값은 하위 자식 HTML 요소에 자동적으로 적용되며, 자식 HTML에서 별도로 규칙이 Overwrite된다면 사라진다.
Selector
CSS Class Selector
HTML의 요소를 선택할 때, tag name뿐 아니라, class 등을 활용 가능함
.header {
color: #ffffff;
}CSS id Selector
HTML 요소를 class보다 상세하게 선택하여, 요소별 스타일을 지정하기 위해 id attribute를 사용할 수 있음
<a id="learn-code" href="https://www.abcd.com">와 같이 HTML 요소에 'learn-code' id를 지정했다면,
#learn-code {
color: #2e69a3;
}와 같이 id에 대한 CSS 속성 및 값을 지정할 수 있음
id Attribute
- id attribute는 유일하게 한번만 사용될 수 있음
- id는 class보다 세분화하여 개체를 지정할 수 있다.
만약에 HTML에서 id와 class 속성을 둘 다 사용중이라면, id를 지정한 CSS 규칙이 class보다 우선적으로 사용된다.
Property
폰트(Font) & 텍스트(Text)
font-family
CSS를 활용한 Website의 폰트 전환 방법
h1 {
font-family: Georgia, serif;
}Selector에서 지정된 h1에 적용할 font-family 속성으로, Georgia가 지정되었으며, 대체 폰트(fallback)로 serif를 지정
- fallback: 방문자의 웹브라우저가 first font를 지원하지 않을 때 fallback font로 나타나며, 여러 개의 fallback을 지정할 수도 있음
color
CSS를 활용한 폰트의 색 지정
h1 {
color: red;
}컬러값 참고
1. Hexadecimal color (#RRGGBB)
#2e69a3
#d8dabe
2. RGB (Red, Green, Blue)
rgb(46, 105, 163)
rgb(216, 218, 190)
3. hsl(hue, saturation, lightness)
hsl(4, 82%, 57%)
font-size
HTML 요소의 폰트 사이즈 선택
p {
font-size: 60px;
}CSS에서는 폰트 사이즈를 pixels(px), rems, ems로 지정 가능
- pixel(px): 폰트 사이즈를 표기하는 표준적인 방법
- rem: 웹브라우저의 default 폰트 사이즈를 활용. rems는 HTML 요소 간의 크기 비율이 다양한 웹 브라우저와 스크린 사이즈에서 유지시키고자 할 때 활용. 대부분의 웹브라우저에서는, 1rem = 16px, 2rem = 32px이다.
- em: 상위 요소(parent)를 기준으로 상대적인 크기를 정함. font-size는 상속 속성이기 때문에, 일반적으로 em이 사용되는 요소에 font-size가 명시적으로 설정되지 않으면 상위 요소의 글꼴 크기에 비례하여 em 값이 변경
예: Parent font-size: 20px: & Child font-size:1em; -> 20px
font-weight
폰트 굵기 조정 속성
h1 {
font-weight: bold;
}font-style:
폰트 스타일 조정 속성
h1 {
font-style: italic;
}line-height
줄간격 조정 속성
h1 {
line-height: 15px;
line-height: 1.5em;
}text-align
텍스트 정렬 속성
h1 {
text-align: center;
}text-decoration
밑줄 등 텍스트 꾸미기 속성
h1 {
text-decoration: underline;
}만일 하이퍼링크 등에 기본적으로 들어가있는 underline을 지우고 싶을 때는,
h1 {
text-decoration: none;
}배경(Background)
background-image
HTML 요소의 백그라운드 이미지 넣기
.hero {
background-image: url("https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg");
}background-size
백그라운드 이미지의 사이즈 변경
.hero {
background-image: url("https://content.codecademy.com/projects/make-a-website/lesson-2/bg.jpg");
background-size: cover;
}이미지 (Image)
width, height
HTML에서 이미지의 크기를 직접 조정하는 대신, CSS에서 해당 HTML 요소를 선택하여 이미지 크기 조정을 할 수 있음
#cute-cat{
width: 120px
}HTML과 동일하게 폭, 높이 중 하나만 조정하면 나머지 값은 비율에 맞게 자동 조정됨
