[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습

c o d i n g . . 🍉/HTML & CSS

[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습

H J 2021. 2. 1. 07:46

전에 만들었던 html 파일에 디자인을 더해보았다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>개강하기 전 할 일</title>
	<style media="screen">
		header{
			border-bottom: 1px solid gray;
			padding: 20px
		}
		nav{
			border-right: 1px solid gray;
			width: 200px;
			float: left;
			height: 600px;
		}
		article{
			float:left;
			padding: 20px;
		}
		h2 {
			color: green;
		}
	</style>
</head>
<body>
	<header>
		<a href="http://localhost/"><h1>웹 프로그래밍 공부</h1></a>
	</header>
	<nav>
		<ul>
			<li>html</li>
			<ol>
				<a href="http://localhost/2021.01_pr/page_html_theory.html"><li>html 이론</li></a>
				<a href="http://localhost/2021.01_pr/page_html_practice.html"><li>html 실습</li></a>
			</ol>
			<li>css</li>
			<ol>
				<a href="http://localhost/2021.01_pr/page_css_theory.html"><li>css 이론</li></a>
				<a href="http://localhost/2021.01_pr/page_css_practice.html"><li>css 실습</li></a>
			</ol>
		</ul>
	</nav>
</body>
</html>

그! 런! 데!!!

지금은 각각의 파일마다 css가 따로 저장되어있는 상태이다

이때 하나의 css 파일을 로드해서 사용할 수 있는 방법이 있다!!

.css로 파일 하나를 만들고 style 내의 css 속성들을 저장해준다

그리고 html의 style 부분을 링크로 대신해주면 완성!!

	<link rel="stylesheet" type="text/css" href="http://localhost/style.css">

저 가운데 부분의 type은 왜 쓰는지 아직은 모르겠다(rel과 href 부분은 link를 친 후 엔터를 눌러주면 자동으로 나온다 ㅎㅁㅎ)

그래서 index.html의 완성 코드는 아래와 같다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>개강하기 전 할 일</title>
	<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
	<header>
		<a href="http://localhost/"><h1>웹 프로그래밍 공부</h1></a>
	</header>
	<nav>
		<ul>
			<li>html</li>
			<ol>
				<a href="http://localhost/2021.01_pr/page_html_theory.html"><li>html 이론</li></a>
				<a href="http://localhost/2021.01_pr/page_html_practice.html"><li>html 실습</li></a>
			</ol>
			<li>css</li>
			<ol>
				<a href="http://localhost/2021.01_pr/page_css_theory.html"><li>css 이론</li></a>
				<a href="http://localhost/2021.01_pr/page_css_practice.html"><li>css 실습</li></a>
			</ol>
		</ul>
	</nav>
</body>
</html>

그럼 결과도 마찬가지이다 (우헤헤 신기해)

'c o d i n g . . 🍉 > HTML & CSS' 카테고리의 다른 글

[생활코딩] html (0)	2021.03.15
Visual code 설치 & 파일 만들기 (0)	2021.03.15
[생활코딩] 웹 애플리케이션 만들기(4): CSS 이론 (0)	2021.01.31
[생활코딩] 웹 애플리케이션 만들기(3): HTML 실습 (0)	2021.01.30
[생활코딩] 웹 애플리케이션 만들기(2): HTML 이론 (0)	2021.01.30

현재글[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습

🍃🛋🧤🍋🍧🍈🐈🎧

웹프로그래밍, html 독학, 웹 프로그래밍, 프론트엔드, 코딩, 백엔드, 42 seoul, css, 내가 정리한, Nodejs, 파이썬, 생활코딩, 생활코딩 nodejs, 인프런, 웹프, 자바스크립트, python, JavaScript, 생활코딩 웹, html,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

🐹's tory