๐ HTML\CSS
External ๋ฐฉ์์ ์ด์ฉํ ์ธ๋ถ CSSํ์ผ ํธ์ถ
Meteora_
2021. 2. 25. 12:29
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- External ๋ฐฉ์ / ์ธ๋ถํ์ผ ํธ์ถ -->
<link rel="stylesheet" href="cssFile.css">
</head>
<body>
<div id="header"><h1>City Gallery</h1></div>
<div id="nav">
London<br>
Paris<br>
Seoul<br>
</div>
<div id="section">
<h2>London</h2>
<p>
๋ฐ๋(London)์ ์๊ตญ์ ์๋์ด๋ฉฐ ๊ทผ๋ ๋ฏผ์ฃผ์ฃผ์์ ๋ฐ์์ง์ด๋ค. ๋ถํด์ ์ด๋ฅด๋ ํ
์ฆ๊ฐ์ ๋ผ๊ณ ๋ฐ๋ฌํ ๋ฐ๋์ ์์ , ์์
, ๊ต์ก, ์ค๋ฝ, ํจ์
, ์๋ฃ, ๋ฏธ๋์ด, ์ ๋ฌธ ์๋น์ค ๋ถ์ผ์ ์ธ๊ณ์ ์ธ ์ค์ฌ์ง ๊ฐ์ด๋ฐ ํ ๊ณณ์ด๋ค. ํนํ ๊ธ์ต์ฐ์
์ ๋
๋ณด์ ์ด๋ค. ๋ค์ํ ์ธ์ข
๊ณผ ๋ฌธํ๊ฐ ๊ณต์กดํ๊ณ ๋ฐ๋ํ, ์จ์คํธ๋ฏผ์คํฐ ์ฌ์, ๊ทธ๋ฆฌ๋์น ๋ฑ์ด ์๋ค. ๋ฒํน์ ๊ถ์ , ์ธ์ธํธ ํด ๋์ฑ๋น, ๋์๋ฐ๋ฌผ๊ด์ด ๊ด๊ด๊ฐ์ ๋์ด๋ค์ด๊ณ ์๋ค.
</p>
<h2>Paris</h2>
<p>
ํ๋์ค์ ์๋์ด์ ๊ฐ์ฅ ์ธ๊ตฌ๊ฐ ๋ง์ ๋์๋ก ํ๋์ค ๋ถ๋ถ ์ผ๋ํ๋์ค ์ง๋ฐฉ์ ์ค์์ ์๋ค. ์ผ๊ฐ ์ค๋ฅ์ ์์ผ๋ฉฐ, ํ์ ๊ตฌ์ญ์ 1~20๊ตฌ๋ก ๋๋์ด ์๋ค. ์ผ๊ฐ์ ๊ธฐ์ค์ผ๋ก ์ฐ์๊ณผ ์ข์์ผ๋ก ๋๋๋ค. 17์ธ๊ธฐ ์ดํ ํ๋ฆฌ๋ ์ ๋ฝ์ ๊ธ์ต, ์ธ๊ต, ์์
, ํจ์
, ๊ณผํ, ์์ ์ค์ฌ์ง๋ค. ์ํ๋น๊ฐ ์ฑ๊ฐํฌ๋ฅด์ ์ด์ด ์ธ๊ณ์์ ๋ ๋ฒ์งธ๋ก ๋น์ผ ๋์๋ค.
</p>
<h2>Seoul</h2>
<p>
๋ํ๋ฏผ๊ตญ์ ์๋์ธ ์์ธ์ ์ง๋ฐฉ์์น๋จ์ฒด์ธ ํน๋ณ์๋ก ๋ถ๋ฅด๋ ๋ช
์นญ์ด๋ค. ํ๋ฐ๋ ์ค์์ ์์ผ๋ฉฐ, ํ๊ฐ์ ์ฌ์ด์ ๋๊ณ ๋จ๋ถ์ผ๋ก ํผ์ณ์ ธ ์๋ค. ๋ถ์ชฝ ๋์ ๋๋ด๊ตฌ ๋๋ด๋, ๋์ชฝ ๋์ ๊ฐ๋๊ตฌ ์์ผ๋, ๋จ์ชฝ ๋์ ์์ด๊ตฌ ์์ง๋, ์์ชฝ ๋์ ๊ฐ์๊ตฌ ์ค๊ณก๋์ด๋ค. ์์ฒญ์ ์ค๊ตฌ ์์ง๋ก1๊ฐ(ํํ๋ก1๊ฐ 31)์ ์๋ค.
</p>
</div>
<div id="footer">
City@naver.com
</div>
</body>
</html>
CSSํ์ผ
@charset "UTF-8";
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section{
width:800px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
๊ฒฐ๊ณผ๋ฌผ