(저번 포스트 이미지랑 똑같다. 다만 코드가 다를뿐)
저번 포스트에선 태그에 직접 style 속성을 달아 꾸몄는데
style 속성을 없애고 CSS 파일을 직접 만들어 분할하기로 한다.
style이 너무 길면 css 파일로 만들어서 쓴다.
📝CSS 파일 만들어서 써보기
<link>로 CSS 파일 연결
- href에 css파일 연결
<link rel="stylesheet" href="./main.css">- CSS 파일에 스타일 보관하기
- css 파일에 style 작성
.profile {
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
}
.title {
font-size: 16px;
font-family: 'gulim';
color: red;
letter-spacing:1px;
}
.frontend {
color:blueviolet;
font-weight: 900
}- 기존 태그 style에 class 작명
<img src="./img/cat.jpg" alt="cat" class="profile">
<h3 class="title">Potter</h3>
<p><span class="frontend">Front-End</span> Developer</p>📝코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body style="text-align: center;">
<img src="./img/cat.jpg" alt="cat" class="profile">
<h3 class="title">Potter</h3>
<p><span class="frontend">Front-End</span> Developer</p>
<div>
<strong>소개</strong>
<br>
냥냥거리고 싶은 프론트엔드 개발자입니다.
</div>
</body>
</html>그 외
- class는 점찍고 작명하기
- 이름 중복 피하기
- class 말고 다르게 스타일 넣는 법
p {
text-align: center
}
- p 태그는 다 이렇게 해주세요라는 뜻
- id로 스타일 넣는 법
#special {
text-align: center
}
- .class vs #id
- 스타일은 .class 추천
- JS 만들 때는 #id 추천
- 스타일이 겹칠 경우 우선순위 따라 정해짐
- id > class > tag
- 참고로 태그 안에 style 속성 직접 정하면 style 속성이 1순위
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.