1.
메인 페이지의 코드를 간소화 시킴
2.
협업 시 분리 작업 가능
3.
프로젝트 관리 편리
head태그 내에서 링크태그를 통해 <style> 태그 내 꾸밈 코드들을 분리 할 수 있다.
index.html의 <head>에 추가된 내용
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href="style.css">
HTML
복사
index.html의 style태그 코드는 모두 주석(삭제) 처리 했다.
<style>
/* style.css로 모듈화 시킴 */
</style>
HTML
복사
* {
font-family: "Gowun Dodum", sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle>button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns>button {
margin-right: 10px;
}
CSS
복사
index.html에 있을때와 동일한(style이 동일) 결과를 얻을 수 있다.
태그에 직접 입력하는 하드코딩보다 이와 같이 css파일을 분리하여 관리하면
협업시에도 style 이 적용안되거나 충돌이 생기는 부분을 최소화 할 수 있다.