CSS는 웹 사이트의 스타일링을 담당하므로 빼놓을 수 없는 요소다.
HTML에 적용하는 3가지 방법에 대해서 알아보자 :D
1. 내부 스타일 시트 ( <style> 에 입력 )
<!DOCTYPE html>
<html>
<head>
<title> 1</title>
<meta charset="utf-8">
<style>
#id {
text-align: center;
font-size: 25px;
color: gray;
}
.class_1 {
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<h1 id="id"> class와 id </h1>
<p class="class_1">class: 여러개를 묶어서 효과지정이 가능하다. </p>
<p class="class_1">id: 하나만 가능하다. 대신 고유성을 줄 수 있다.</p>
</body>
</html>
그동안 올린 게시글에서 항상 썼던 방식이다. html파일 안 에 있는 <style>태그 안에 적으면 된다.
2. HTML 태그에 적용하기
<body>
<h1 style="text-align: center; font-size: 15px;"> class와 id </h1>
<p style="text-align: center; font-size:25px; color: grey; ">class: 여러개를 묶어서 효과지정이 가능하다. </p>
<p style="text-align: center; font-size:25px; color: grey; ">id: 하나만 가능하다. 대신 고유성을 줄 수 있다.</p>
</body>직접 태그 안에 style=""을 적어서 입력하는 방식이다. 개인적으로는 지저분해 보이고 한 눈에 안 들어와서 별로 안 좋아하는 방식 !
3. 외부 스타일 시트
마지막 방법은 직접 css파일을 만든 뒤 연결을 하는 방법이다.
a {
font-size: 20px;
text-align: center;
}이렇게 css파일을 만든 뒤
<!DOCTYPE html>
<html>
<head>
<title> diary <title>
<meta charset="utf-8">
<link href="cssFile.css" rel="stylesheet">
</head>html파일에 연결을 하면 된다.
<link href="내가 연결하고싶은 css 파일" rel="stylesheet"> 을 적으면 연결할 수 있다. 나중에는 코드가 점점 길어지기 때문에 이 방식을 가장 추천한다 !
난 처음에는 1번이 가장 편했지만 지금은 3번에 더 익숙해진 상태다 ! 더욱 더 열심히 해야지 ( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| 인턴 교육 시작 + <fieldset> , <table> 태그 정리 (0) | 2022.08.30 |
|---|---|
| css 기초 개념 정리 (0) | 2022.05.30 |
| [HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id) (0) | 2021.06.11 |
| [HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬.. (1) | 2021.06.02 |
| [HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ... (1) | 2021.05.31 |