소소한 개발 공부
[CSS] CSS 찍먹해보기2 | link 태그 - css 파일 링크하기 본문
CSS는 HTML을 디자인하는 역할을 가진 언어이다.
이 CSS를 이용해 웹 페이지를 디자인해 보는 시간을 가져보기로 한다.
웹 페이지 만들기
[HTML] HTML에 대해서2 | 웹페이지 만들기
📝 인프런 [따라하면서 배우는 웹애플리케이션 만들기] - Egoing Lee 를 보고 공부하며 작성한 글입니다. 링크 : 따라하면서 배우는 웹애플리케이션 만들기 위의 사진과 같은 웹페이
soso-study.tistory.com
지난 포스팅에서 간단한 웹페이지를 만들었는데 이 웹페이지를 CSS를 활용해서 퀄리티를 좀 더 올려보기로 한다.
위 결과물을 3 덩이로 나눠서 생각해보면 다음과 같다.
1. 사이트 제목 "JavaScript" 밑에 경계선이 있다.
2. 왼쪽 리스트의 오른쪽에 경계선이 있으며 본문과 나란히 배치한다.
3. h2 태그 된 "변수와 상수"의 크기를 키우고 왼쪽 정렬을 한다.
html 파일을 다음과 같이 수정한다.
page_vc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
header {
border-bottom: 1px solid gray;
padding: 20px;
}
nav {
border-right: 1px solid gray;
width: 200px;
height: 600px;
float: left;
}
article {
float: left;
padding: 20px;
}
h2 {
font-size: 50px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽 항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다.</li>
</ul>
</article>
</body>
</html>html 파일의 head 부분에 css 용 style 태그를 붙였다. 내용은 다음과 같다.
header 태그된 곳(JavaScript)에 밑 경계선(border-bottom)을 적용한다.
콘텐츠(JavaScript)로부터 상하좌우 여백(padding)은 20px을 준다.
header {
border-bottom: 1px solid gray;
padding: 20px;
}nav 태그된 곳(리스트)에 오른쪽 경계선을 적용한다.
콘텐츠의 가로 크기는 200px, 세로 크기는 600px을 적용한다.
콘텐츠를 왼쪽 정렬하고 다른 콘텐츠와 나란히 둔다.(float)
nav {
border-right: 1px solid gray;
width: 200px;
height: 600px;
float: left;
}article 태그된 곳(본문)을 왼쪽 정렬하고 다른 콘텐츠와 나란히 둔다.(float)
콘텐츠의 상하좌우 여백을 20px을 준다.
article {
float: left;
padding: 20px;
}h2 태그된 곳의 글자 크기를 50px로 한다.
h2 {
font-size: 50px;
}
CSS 파일을 링크하기
디자인 측면에서 웹 페이지의 수정사항이 있을 때 html 파일을 고치면 웹페이지를 수정할 수 있지만
수정사항이 있을 때마다 모든 html 파일을 고치면 시간이 많이 들게 된다.
여기서 웹 페이지의 디자인을 바꿀 때 한 번에 모든 페이지에 수정사항을 적용하는 방법이 있다.
바로 CSS 파일을 따로 두고 수정사항이 있을 때 CSS 파일만 고치는 것이다.
그럼 모든 html 파일을 수정할 필요가 없어 시간이 엄청나게 단축된다.
html 파일의 style 태그 부분을 떼서 CSS 파일로 만들어준다.
style.css
header {
border-bottom: 1px solid gray;
padding: 20px;
}
nav {
border-right: 1px solid gray;
width: 200px;
height: 600px;
float: left;
}
nav ol {
list-style: none;
}
article {
float: left;
padding: 20px;
}
h2 {
font-size: 50px;
}page_vc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽 항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다.</li>
</ul>
</article>
</body>
</html>style 태그를 뗀 부분에 link 태그를 이용한 다음의 문장만 붙여주면
CSS로 인한 디자인이 웹 페이지에 그대로 적용되는 것을 볼 수 있다.
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">link 태그는 외부 리소스를 해당 html 파일에 연결해주는 요소이다.
- rel 속성 : 필수 속성으로, 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.
- type 속성 : 링크된 외부 리소스의 미디어 타입을 명시한다.
- href 속성 : 링크될 외부 리소스(external resource)의 URL를 명시한다.
이런 식으로 CSS 파일을 HTML 파일에 링크하여 사용할 수 있다.
'개발 > Web' 카테고리의 다른 글
| [CSS] CSS 찍먹해보기1 | style 태그 (0) | 2021.05.24 |
|---|---|
| [HTML] HTML 찍먹해보기2 | 웹페이지 만들기 (0) | 2021.05.21 |
| [HTML] HTML 찍먹해보기1 | a tag, li tag (0) | 2021.05.16 |
| [Web] Apache, PHP, MySQL 제어판 - Bitnami Manager (0) | 2021.05.15 |
| [Web] 윈도우에 웹서버 설치하기 Bitnami / 웹문서 만들기 (0) | 2021.05.14 |
