wisePocket

[HTML, CSS] CSS 파일 모듈화(파일 분리) 본문

Python&Flask Tutorials, AWS EB/1st WEEK HTML,CSS

[HTML, CSS] CSS 파일 모듈화(파일 분리)

ohnyong 2023. 6. 27. 21:15

1. 메인 페이지의 코드를 간소화 시킴

2. 협업 시 분리 작업 가능

3. 프로젝트 관리 편리

head태그 내에서 링크태그를 통해 <style> 태그 내 꾸밈 코드들을 분리 할 수 있다.

 

index.html의 <head>에 추가된 내용

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href="style.css">

index.html의 style태그 코드는 모두 주석(삭제) 처리 되었다.

<style>
/* style.css로 모듈화 시킴 */
</style>

new file으로 style.css 파일 생성

style 태그 내에 있던 코드를 해당 파일로 옮김

* {
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)),
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;
}

 

index.html에 있을때와 동일한(style이 동일) 결과를 얻을 수 있다.

태그에 직접 입력하는 하드코딩보다 이와 같이 css파일을 분리하여 관리하면

협업시에도 style 이 적용안되거나 충돌이 생기는 부분을 최소화 할 수 있다.

 

 

해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다.

https://github.com/yzpocket/Sparta99training

 

GitHub - yzpocket/Sparta99training

Contribute to yzpocket/Sparta99training development by creating an account on GitHub.

github.com

 

'Python&Flask Tutorials, AWS EB > 1st WEEK HTML,CSS' 카테고리의 다른 글

[1주차 회고] HTML, CSS, 기초 웹페이지 생성 배운점, 어려웠던점  (0) 2023.07.08
[HTML, CSS] 생각보다 쓸만한 CSS 응용편!  (0) 2023.07.01
[HTML, CSS] Google Fonts 스타일 적용하기  (0) 2023.06.30
[HTML, CSS] 기초적인 로그인 페이지 생성  (0) 2023.06.26
'Python&Flask Tutorials, AWS EB/1st WEEK HTML,CSS' Related Articles more