css 기초 정리 (2) - css 속성 수정하는 방법 2가지

css 기초 정리 (2) - css 속성 수정하는 방법 2가지

Summary:

생활코딩 웹 기본수업 중 css에 대해 기억해야 할 내용입니다.


지난 html, css 1 시간에 만들었던 실습파일은 필요한 내용이 다 들어가있지만 디자인이 별로다. UI를 바꿔보자.

pic1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 페이지 제목 부분 -->
<header>
<h1>타이틀(헤더)</h1>
</header>
<!-- 페이지 목차 내용 -->
<nav>
<ol>
<li><a href="css_basics_2_page1.html">목차 1</a></li>
<li><a href="css_basics_2_page2.html">목차 2</a></li>
<li><a href="css_basics_2_page3.html">목차 3</a></li>
</ol>
</nav>
<!-- 각 목차에 대한 상세 내용 -->
<article>
<h2>목차 1</h2>
목차 1에 대한 설명입니다.
</article>
</body>
</html>

수정방법 1: 각 페이지마다 수정

위 코드의 경우 하나의 메인 페이지(index.html)와 각 항목에 대한 3개 세부페이지(page1.html, page2.html, page3.html), 총 4개의 html 파일로 구성되어 있다. 이 html의 스타일을 변경하는 가장 기초적인 방법은 각 페이지의 <head><style> 코드를 추가하는 것이다.

<header> 수정

<header>의 하단에 테두리를 그려 넣고 적절한 여백을 두는 것이 목표다. css_basics_2_page1.html 파일을 열어서 해당 css코드를 추가한다.

<!-- <header> 꾸미기 -->
<style>
header {
border-bottom: 1px solid gray;
padding: 20px;
}
</style>

pic2


<nav>의 컨텐츠 폭을 200px, navigation을 왼쪽에 정렬하고 상세 내용을 오른쪽에 표시하고 싶다. 목차와 상세내용 사이에는 테두리 선을 긋는다. 마찬가지로 css_basics_2_page1.html 파일을 열어서 해당 css코드를 추가한다.

<!-- <nav> 꾸미기 -->
<style>
nav {
width: 150px;
float: left;
border-right: 1px solid gray;
height: 600px;
}
</style>

pic3


<article> 수정

<article>을 왼쪽 정렬하고 왼쪽 테두리와의 간격을 조금 둘 것이다. 마찬가지로 css_basics_2_page1.html 파일을 열어서 해당 css코드를 추가한다.

<!-- <article> 꾸미기 -->
<style>
article {
float: left;
padding-left: 20px;
}
</style>

pic4


만약 <nav>의 리스트 앞에 붙어있는 숫자들을 없애고 싶다면 <ol>에서 숫자를 없애는 코드를 추가한다.

<style>
nav ol{
list-style: none;
}
</style>

pic5


수정방법 2: css를 html로부터 분리하기

첫번째로 시도했던 방법은 처음에 생각해내기는 쉽지만 하나의 수정사항이 생겼을 때 관련된 모든 html 파일을 모두 동시에 수정해야 한다는 단점이 있다. 코드 한 줄을 수정하려고 html을 4번이나 열어서 복붙을 해야 하는 것이다. 비효율적이다.

이제부턴 html 내에 디자인에 관한 영역을 하나의 파일로 따로 빼올 것이다.


1. html 내부 <style> ~ </style> 사이에 있던 css 코드를 복사한다.
2. style.css 라는 새로운 파일을 생성 후 그 안에 1번의 코드를 붙여넣는다.
3. 기존 html의 <style></style> 태그는 삭제한다.
5. index.html을 리로드해서 .css가 제대로 적용되는지 확인한다.


<!-- css_basics_2_page1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css_basics_2_style.css">
<title></title>
</head>
<body>
<header>
<h1>타이틀(헤더)</h1>
</header>
<nav>
<ol>
<li><a href="/css_basics_2_page1.html">목차 1</a></li>
<li><a href="/css_basics_2_page2.html">목차 2</a></li>
<li><a href="/css_basics_2_page3.html">목차 3</a></li>
</ol>
</nav>
<article>
<h2>목차 1</h2>
목차 1에 대한 설명입니다.
</article>
</body>
</html>


/*css_basics_2_style.css*/
/*<style> 안 코드만 빼옴.*/
header {
border-bottom: 1px solid gray;
padding: 20px;
}
nav {
width: 150px;
float: left;
border-right: 1px solid gray;
height: 600px;
}
nav ol{
list-style: none;
}
article {
float: left;
padding-left: 20px;
}

pic6


왜 이 방법이 좋을까?

변경사항이 생겼을 때 각 html마다 들어가서 스타일을 바꿀 필요가 없다. .css 에 접속한 뒤 스타일 속성을 단 한번만 변경하면 모든 html에 변경사항이 적용된다. 훨씬 편하다. 아 그래서 내 블로그도 .sass 폴더가 따로 있던 거구나.

또한 중복되는 코드를 한 번으로 퉁치는 것이기 때문에 데이터 저장 용량 부담도 덜하게 된다는 장점도 있다.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora