반응형
- HTML 태그에 바로 적용하기
: html 태그에 style 속성을 추가하는 방식
속성1 : 속성값; 속성2 : 속성값; 속성3 : 속성값;
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
</head>
<body>
<h1 style="color: pink; background-color:grey;">Pink & Grey</h1>
</body>
</html>▶ 제목은 'This is a Test File.'이며 글씨는 'Pink & Grey'임
▶ 글씨 색상은 pink, 배경 색상은 grey로 설정
- 내부 스타일 시트 적용하기
: head 안의 style 태그를 작성하는 방식
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
</head>
<style>
h1{
color : pink;
background-color : grey;
}
</style>
<body>
<h1>Pink & Grey</h1>
</body>
</html>
- 외부 스타일 시트 적용하기
: css 속성을 별도의 파일로 저장하고 <link> 태그로 불러오기
→ 다른 사람의 라이브러리 파일을 불러오거나 css 파일을 여러개로 분리하여 관리하기 편함
1. html 파일과 같은 폴더 내에 style.css 파일 생성
2. style.css 파일 내에 css 속성 작성
h1{
color : pink;
background-color: grey;
}→ 이미 css를 확장자로 파일을 만들었기 때문에 <style> 태그는 작성할 필요 없음
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>Pink & Grey</h1>
</body>
</html>▶ rel="stylesheet" : 해당 문서가 css 파일임을 명시
▶ href="./style.css" : 해당 파일의 위치를 가리켜 파일을 불러옴
→ 상대경로는 현재 HTML 파일의 위치를 기준으로 하기 때문에 같은 폴더 내부에 있는 style.css 파일을 불러옴
# 상대경로
./ : 현재 위치
../ : 현재 위치의 상단 폴더
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
<link rel="stylesheet" href="./style.css" />
<img src="./static/dog.jpg" alt="강아지 사진" />
</head>
<body>
<h1>Pink & Grey</h1>
</body>
</html>▶ static 이라는 폴더에 저장된 dog 사진을 불러올 경우 상대 경로를 ./static/dog.jpg로 설정
→ img 태그에서 사용하는 alt 속성은 이미지를 오류로 인해 불러오지 못할 때 뜨는 문구
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] 텍스트 색 각자 다르게 설정하기 (0) | 2021.12.19 |
|---|---|
| [ Visual Studio Code ] 태그 정리 (0) | 2021.12.18 |
| [ Visual Studio Code ] 웹 폰트 적용 (0) | 2021.12.17 |
| [ Visual Studio Code ] html 파일 생성 (0) | 2021.12.13 |
| [ Visual Studio Code ] [ Window ] Visual Studio Code 설치 (0) | 2021.12.13 |