본문 바로가기
HTML, CSS, JS

html,css_박스모델 실습과제 layout_main.html 리뷰

by HTT 2022. 9. 24.

1. 문제점

- <div>로 제대로 구간 제대로 나누지 않음

- margin과 padding을 뒤늦게 이해함. 구분을 못했다......,,,,,,,,,,,,,,,,,

- 하나씩 차근차근 하면 되는데 자꾸 이거했다 저거했다 혼잡함 => 하나씩 정리하고 생각하면서 하기!!

- float을 제대로 사용하지 못함 ......?! 오른쪽으로 가야하는데 자꾸 오른쪽+밑으로 이동한다.

 

2. 해결 방법

- 맨 처음 박스로 구간나누고 시작하기!! 그래야 덜 헷갈림

- 위에서부터 하나씩 해나가기

- float:right; margin-top: -770px; 이용해 위로 보냈으나 다른 해결방법이 있을듯함

 

간단한 건데 틀렸다. 다음부턴 주의해서 구간 나누기!

 

3. 주의할 점

- 박스 제대로 묶어라

- 도저히 모르겠으면 검색!!! 혼자 계속 잡고 있는다고 해결되지 않음.

- 오타 잘 확인하기

 

4. 마지막으로

박스를 float을 이용해 오른쪽으로 옮겼는데 자꾸 옆으로 나란히 가지 않고 밑으로 가버림..

=> 강사님께 질문. 답변 기다리는 중

 

 

피드백 ===>  <div style="width: 80%; ">   --->  <div style="width: 80%; float: left;">

이런 기본적인 실수를 하다니... 플롯을 까먹었다..

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="../common/css/layout.css" rel="stylesheet">
<title>Insert title here</title>

</head>
<body>
	<p>
		<img src="../images/logo.jpg" alt="아침고요수목원" />
	</p>
	<div style="width: 100%;">         <!-- 전체묶음 -->
		<div style="width: 80%; float: left;">
			<h1 style="color: #197e84; font-family: HY고딕체;">아침고요수목원</h1>
			<p>축령산 자락에 위치한 아름다운 정원, 아침고요원예수목원이다. 대학 원예학과 교수가 꾸민 곳으로 단순히 여러
				종류의 나무와 꽃을 가져다 심어 놓은 것이 아니라 원예미학적인 관점에서 주제를 가지고 정원을 꾸며 놓았다. 입구의
				고향집정원에서부터, 수목원을 한눈에 내려다볼 수 있는 하경전망대가 있는 하경정원까지 20여개의 주제로 정원이 꾸며져 있다.
				시골집 주변에서 흔히 볼 수 있는 소나무, 조팝나무 등을 심어 놓은 고향집정원, 수목원을 향기롭게 하는 허브정원, 버드나무
				가지 바람에 하늘거리는 능수정원, 무궁과, 철쭉, 진달래 분홍빛 예쁜 색을 뽐내는 무궁화동산, 여러해살이풀들로 채워져
				다음해를 기약하게 하는 약속의 정원 등 20여개 정원 하나하나에 의미가 담겨 있다.</p>
			<div id="garden">
				<div id="ingarden">
					<p>전망이 아름다운 하경전망대는 수목원 가장 안쪽에 있지만 빠뜨리지 말고 찾아가 보아야 할 곳이며, 멋스런
						정자와 다양한 꽃나무가 어우러져 낭만적인 풍광을 자랑하는 서화연은 이곳 수목원이 자랑하는 곳이다. 한국정원에서
						하늘정원까지 이어지는 푸른 숲길인 아침고요산책길은 조용한 분위기 속에서 삼림욕을 즐기려는 사람들에게 인기이며, 수목원을
						가로지르는 에덴계곡에 만들어진 돌탑들도 이곳을 방문한 사람들이 하나씩 쌓아올려 만든 것으로 수많은 돌탑이 장관을
						이룬다.</p>
				</div>
			</div>
			<p>아침고요수목원에서 꼭 들러야 할 곳은 바로 하경전망대다. 개울 건너편 산길을 따라 약 100m 올라가면 한반도
				모양으로 조성된 하경정원과 함께 수목원의 풍경이 한눈에 들어온다. 이 외에도 계곡의 물소리, 새소리와 함께 벤치에서 조용한
				명상의 시간을 가지며 주옥 같은 시를 감상할 수 있는 산책로와 에덴동산에서 시작해 하늘나라까지 이어지는 성서산책로는
				낙엽으로 물든 가을 정취를 감상하기에 좋고 잣나무에서 나오는 피톤치드로 삼림욕을 즐기며 걸을 수 있다</p>
			<p>정원나라에는 주택 정원에 적합한 소규모의 한국 정원 모델들을 전시하였다. 성서정원은 성서 속의 에덴동산에서부터
				마지막 하늘나라까지 산책로를 따라 걸으면서 명상할 수 있는 곳이다. 침엽수정원은 잣나무, 구상나무, 주목 등을 심어 송진
				냄새를 맡으며 삼림욕을 할 수 있는 곳이다. 아침광장은 사계절 푸른 잔디광장이다. 주변에 축령산과 축령산 자연휴양림이
				있다.</p>

			<h2 style="color: #197e84; font-family: HY고딕체;">기타 다른 가평의 여행지</h2>
			<p>다른 이유를 들자면 가평군은 좋은 여행지, 관광지로 가득하다. 언젠가 내가 친구들과 당일 또는 1박 2일로
				여행을 가려고 한 적이 있다. 그래서 인터넷을 이용해 가깝고 좋은 여행지를 찾는데 가평군은 어느 사이트에나 빠지지 않는
				관광명소였다. ‘가평8경’이라는 말이 있을 만큼 산과 강, 계곡의 경치가 아름답고 깨끗하여 많은 사람들이 찾는 곳이기도
				하다. 요즘 한류 열풍은 주도 하고 있는 ‘욘 사마’가 출연한 겨울연가의 촬영지인 남이섬도 가평근처에 있어서 많은
				일본관광객이 꼭 찾는 곳이다. 이렇게 좋은 가평군에 대해 좀 더 자세히 알아보고 싶은 생각이 들었고, 인구의 구성이나 수는
				얼마나 되고, 관광 산업 외에 어떤 산업이 발전했으며, 농업은 어떻게 이루어지고 있는지 등, 많은 것에 대해 알아 보기위해
				‘가평군’을 주제로 선택하였다. 마지막으로 가평군은 대한민국 전도를 보면 우리나라의 한가운데에 위치하고 있다.</p>
			<ul>
				<li>쁘띠프랑스</li>
				<li>유명산</li>
				<li>자라섬</li>
				<li>명지산 계곡</li>
				<li>백운계곡</li>
			</ul>
		</div>
		<div id="garden03">
			<div id="garden02" style="padding: 15px;">
				<h2>아침고요수목원에 가볼 만한 곳</h2>
				<p>
					<img src="../images/garden01.jpg" alt="국화전시회" width="103"
						height="103" />
				</p>
				<h3 id="point">국화전시회</h3>
				<p>서늘한 바람이 부는 이때에만 만나볼 수 있는 국화축제, 어느 곳을 가도 아름다움의 연속이다. 아침고요수목원
					국화전시회가을의 색을 한 눈에 보고 싶을 때 가고 싶어지는 곳이 있다.</p>

				<p>
					<img src="../images/garden02.jpg" alt="서화연" width="103"
						height="103" />
				</p>
				<h3 id="point">서화연</h3>
				<p>멋스런 정자가 함께 어우러진 모습이 아침빛처럼 아름다워 "서화연"이라 이름이 붙여졌다. 봄이면 새하얀 벚꽃이
					꽃비처럼 날리고, 여름이면 시원한 숲에서 청명한 바람이 불어온다. 가을에는 무지개빛 단풍이...</p>

				<p>
					<img src="../images/garden03.jpg" alt="하경정원" width="103"
						height="103" />
				</p>
				<h3 id="point">하경정원</h3>
				<p>아름다운세상입니다 경기도 가평군 아침고요수목원 그 세번째글은 아침고요수목원의 대표적 정원 하경정원을 둘러
					봅니다. 하경정원은 우리나라 어디에도 볼 수 없는 독특한 정원으로 정원 전체가 한반도</p>
			</div>
		</div>
	</div>        <!-- 전체묶음 -->

	<div id="footer">
		<p>
			&copy; 2005, 가평여행기<br />
		</p>
	</div>
</body>
</html>

 

결과사진

'HTML, CSS, JS' 카테고리의 다른 글

2022-09-27 switch,다중if, for-if, 다중for  (0) 2022.09.28
2022-09-26 javascript 문법  (0) 2022.09.26
2022-09-23 javascript 사용방법, 함수정의  (0) 2022.09.24
2022-09-22 CSS우선순위, 속성  (0) 2022.09.22
2022-09-21(2) CSS  (0) 2022.09.21

댓글