style과 html
style 때문에 html이 너저분해진다
(주객전도)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/main.css"> </head> <body> <img src="lion.png" style="width: 100px; display: block; margin-left: auto; margin-right: auto"> <h3 style="text-align: center;font-size: 16px; font-family: 'nanumsquare'; color: black; letter-spacing: 4px">bell-person-ii</h3> <p style="text-align: center"><span style="color: dimgray; font-weight: 100">Back-end</span> Developer</p> <div> <p style="text-align: center; font-family: 'nanumsquare'">-소개-</p> <p style="text-align: center; font-family: 'nanumsquare'"> <span style="color: limegreen">스프링</span>을 메인으로 공부하고 있는 학생입니다.</p> </div> </body> </html>딱 보기에도 지저분하다
CSS 파일을 분리하자
1단계 link 연결하기
<head> <meta charset="UTF-8"> <title>Title</title> <link href="css/main.css" rel="stylesheet"> </head>이렇게 css 파일과 html을 연결하여 css를 분리할 수 있다.
rel="stylesheet" 이렇게 지정해야 한다.
2단계 CSS 파일 작성 및 연결
CSS에 클래스를 생성하여 연결한다.
방법
"." + "클래스명" 형식으로 CSS 를 작성하여 html 과 연결한다.profile{ width: 100px; display: block; margin-left: auto; margin-right: auto; }<img src="lion.png" class="profile">
추가: 태그 마다 동일한 스타일을 넣기
p{ text-align: center }의미: 해당 html 문서에서 모든 p태그는 텍스트가 중앙에 오게 설정하기
추가: id로 연결하기(안쓰는 추세)
클래스 뿐만 아니라 '#' + "아이디"로 아이디에 대한 스타일을 선언하고 사용할수 있다.
#special{ text-align: center }<p id="special"> Backend Developer</p>
추가: 아이디, 클래스, 태그의 스타일이 겹칠때
우선 순위:
1.html 문서내부(style)값
2.id
3.클래스
4.태그
순으로 적용됨
BackEnd 공부 중인 학부생