본문 바로가기
HTML

city 예제 <div>를 사용하여 영역나누기 External 방식

by aesup 2021. 2. 25.
728x90

외부파일에서 가져와 준다.

<link rel = "stylesheet" href = "city.css">

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- External방식 외부파일에서가져온다 -->
<link rel = "stylesheet" href = "city.css">

<!-- 헤드안에스타일은 인터널 방식 internal -->
<!-- 태그에 쓰는 방식 인라인 방식 -->


</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:#ffffff;
	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;
	

}
728x90