ECC-FrontEnd-study · Seohyun0316 · Apr 4, 2025 · Apr 4, 2025
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8">
+    <title>웹 개발 입문</title>
+  </head>
+  <body>
+    <h1>웹 개발 기초</h1>
+    <p>HTML</p>
+    <p>CSS</p>
+    <p>자바스크립트</p>
+  </body>
+</html>
diff --git a/02/results/web.html b/02/results/web.html
@@ -0,0 +1,4 @@
+<h1>웹 개발 기초</h1>
+<p>HTML</p>
+<p>CSS</p>
+<p>자바스크립트</p>
diff --git a/02/web.html b/02/web.html
@@ -0,0 +1,4 @@
+<h1>웹 개발 기초</h1>
+<p>HTML</p> 
+<p>CSS</p>
+<p>자바스크립트</p>
diff --git a/03/comment.html b/03/comment.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Dream Jeju</title>
+  <link rel="stylesheet" href="css/structure.css">
+</head>
+<body>
+  <div id="container">
+        <!-- 헤더 영역 -->
+    <header>
+      <!-- 로고 영역 -->
+      <div id="logo">
+        <a href="index-footer.html">
+          <h1>Dream Jeju</h1>
+        </a>
+      </div>
+      <!-- 내비 영역 -->
+      <nav>
+        <ul id="topMenu">
+          <li><a href="#">단체 여행</a></li>
+          <li><a href="#">맞춤 여행</a></li>
+          <li><a href="#">갤러리</a></li>
+          <li><a href="#">문의하기</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main class="contents">
+      <section id="headling">
+        <h2>몸과 마음이 치유되는 섬</h2>                  
+        <div class="detail"> 
+          <img src="images/healing.jpg">                            
+          <b><p>쉼(Healing)의 공간으로 안내합니다</p></b>          
+          <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>        
+        </div>        
+        <div class="schedule">
+          <h3>상세 일정</h3>
+          <ul>
+            <li>여행 기간 : 2박 3일</li>
+            <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
+          </ul> 
+        </div>
+      </section>
+      <section id="activity">
+        <h2>다양한 액티비티가 기다리는 섬</h2>
+        <div class="detail">          
+          <img src="images/activity.jpg">
+          <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p></b>          
+          <p>둘러보기만 하는 여행을 하셨나요? </p>
+          <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
+        </div>
+      </section>
+    </main>
+    <footer>    
+      <section id="bottomMenu">
+        <ul>
+          <li><a href="#">회사 소개</a></li>
+          <li><a href="#">개인정보처리방침</a></li>
+          <li><a href="#">여행약관</a></li>
+          <li><a href="#">사이트맵</a></li>
+        </ul>
+      </section>   
+    </footer>  
+  </div> 
+</body>
+</html>
diff --git a/03/css/structure.css b/03/css/structure.css
@@ -0,0 +1,142 @@
+@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');
+
+* {
+  margin:0;   /* 마진 리셋 */
+  padding:0;   /* 패딩 리셋 */
+  box-sizing: border-box;   /* 박스 영역은 테두리까지 */ 
+}
+a {
+  text-decoration:none;  /* 텍스트 링크 밑줄 없애기 */ 
+}
+ul {
+  list-style: none;
+}
+
+#container {
+  margin:0 auto;  /* 화면 중앙에 배치 */
+  width:1200px;    /* 너비 */    
+  background-color: #fff;
+}
+
+/*********************************/
+/* 헤더 영역 - 로고와 내비게이션 */
+/*********************************/
+
+header{
+  width:100%;    /*  너비 */
+  height:100px;   /* 높이 */ 
+  background-color:#045;  
+}
+
+/* 로고 */
+#logo{ 
+  float:left;   /* 왼쪽으로 플로팅 */ 
+  width:250px;   /*  너비 */ 
+  height:100px;   /* 높이 */
+  line-height:100px;  /* 세로로 중간에 맞춤 - 줄간격을 높이 값과 같게 */
+  padding-left:20px;  /* 왼쪽에 여백 */
+}
+#logo h1 {
+  font-family:'Merienda', cursive;
+  font-weight:700;
+  font-size:40px;   /* 글자 크기 */
+  color:#fff;   /* 글자 색*/
+  text-shadow:0 -1px 0 #222;  /* 그림자 색 */
+}
+
+/* 내비게이션 */
+nav{  
+  float:right;   /* 오른쪽으로 플로팅 */
+  width:900px;   /*   너비 */  
+  height:100px;   /* 메뉴 영역 높이 */  
+  padding-top:40px;  /* 메뉴를 아래로 내리기 위해 */  
+}
+#topMenu {  
+  height:60px; 
+}
+#topMenu > li {
+  float:left;  /* 메뉴 항목을 왼쪽으로 플로팅 */ 
+  position: relative;  
+}
+#topMenu > li > a{
+  display:block;  /* 링크 텍스트는 블록으로 */ 
+  font-size:1.1em;
+  color:#fff;  /* 글자 색 */
+  font-weight:600;  /* 글자 굵기 */
+  padding:20px 60px;  /* 패딩 */ 
+}
+#topMenu > li > a:hover {
+  color:#1fa8f8;
+  text-shadow:0 -2px #222;
+}
+
+
+/* 본문 */
+
+.contents {
+  width:1000px;
+  margin:50px auto;  
+}
+main > section {
+  margin-top:60px;  
+}
+main h2 {    
+  font-size:1.5em;
+  line-height: 2.5;
+}
+main div {
+  margin-top:20px;
+}
+main h3 {
+  font-size:1.2em;
+  line-height:2.2;
+}
+.detail p {
+  line-height: 2.0;
+  color:#222;
+}
+.detail > img {
+  float:left; 
+  margin-right:50px;
+  border-radius:20px;
+}
+.schedule h4 {
+  font-size:1.2em;
+}
+.schedule ul {
+  list-style: none;
+}
+.schedule ul li { 
+  line-height: 2;
+}
+
+
+/******************/
+/*   푸터 영역    */
+/******************/
+
+footer{   
+  width:1200px;   /* 너비 */
+  height:100px;  /* 높이 */
+  border-top:2px solid #222;
+}
+#bottomMenu{
+  width:100%;
+  height:20px;
+  margin-left:60px;
+}
+#bottomMenu ul {
+  margin-top:15px;  
+}
+#bottomMenu ul li{
+  float:left;  /* 가로로 배치 */ 
+  padding:5px 20px;
+  border-right:1px solid #ddd;   /* 항목 오른쪽에 테두리 */ 
+}
+#bottomMenu ul li:last-child{
+  border:none;  /* 마지막 항목에는 오른쪽 테두리 없음 */  
+}
+#bottomMenu ul li a, #bottomMenu ul li a:visited {  
+  font-size:15px;  /* 글자 크기 */ 
+  color:#666;   /* 글자 색 */ 
+} 
diff --git a/03/images/activity.jpg b/03/images/activity.jpg
diff --git a/03/images/healing.jpg b/03/images/healing.jpg
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML 기본 문서</title>
+</head>
+<body>
+  <h1>웹 문서 만들기</h1>
+  <hr>
+  <p>HTML</p>
+  <p>CSS</p>
+  <p>자바스크립트</p>
+</body>
+</html>
diff --git a/03/my.html b/03/my.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML 웹 문서 연습</title>
+</head>
+<body>
+  <h1>웹 문서 만들기</h1>
+  <hr>
+  <p>HTML</p>
+  <p>CSS</p>
+  <p>JavaScript</p>
+</body>
+</html>
diff --git a/03/results/comment.html b/03/results/comment.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <title>Dream Jeju</title>
+  <link rel="stylesheet" href="css/structure.css">
+</head>
+<body>  
+  <div id="container">    
+    <!-- 헤더 영역 -->
+    <header>
+      <!-- 로고 -->
+      <div id="logo">
+        <a href="index-footer.html">
+          <h1>Dream Jeju</h1>
+        </a>
+      </div>
+      <!-- 내비게이션 -->
+      <nav>
+        <ul id="topMenu">
+          <li><a href="#">단체 여행</a></li>
+          <li><a href="#">맞춤 여행</a></li>
+          <li><a href="#">갤러리</a></li>
+          <li><a href="#">문의하기</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <!-- Main 내용 -->
+    <main class="contents">
+      <section id="headling">
+        <h2>몸과 마음이 치유되는 섬</h2>                  
+        <div class="detail"> 
+          <img src="images/healing.jpg">                            
+          <b><p>쉼(Healing)의 공간으로 안내합니다</p></b>          
+          <p>탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다. </p>        
+        </div>        
+        <div class="schedule">
+          <h3>상세 일정</h3>
+          <ul>
+            <li>여행 기간 : 2박 3일</li>
+            <li>여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)</li>
+          </ul> 
+        </div>
+      </section>
+      <section id="activity">
+        <h2>다양한 액티비티가 기다리는 섬</h2>
+        <div class="detail">          
+          <img src="images/activity.jpg">
+          <b><p>모험과 스릴이 넘치는 레저의 천국으로 안내합니다.</p></b>          
+          <p>둘러보기만 하는 여행을 하셨나요? </p>
+          <p>하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?</p>
+        </div>
+      </section>
+    </main>
+    <footer>    
+      <section id="bottomMenu">
+        <ul>
+          <li><a href="#">회사 소개</a></li>
+          <li><a href="#">개인정보처리방침</a></li>
+          <li><a href="#">여행약관</a></li>
+          <li><a href="#">사이트맵</a></li>
+        </ul>
+      </section>   
+    </footer>  
+  </div> 
+</body>
+</html>
diff --git a/03/results/my-1.html b/03/results/my-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>웹 문서 연습</title>
+</head>
+<body>
+  <h1>웹 문서 만들기</h1>
+  <p>HTML</p>
+  <p>CSS</p>
+  <p>Javascript</p>  
+</body>
+</html>
diff --git a/03/results/my-2.html b/03/results/my-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>웹 문서 연습</title>
+</head>
+<body>
+  <h1>웹 문서 만들기</h1>
+  <hr>
+  <p>HTML</p>
+  <p>CSS</p>
+  <p>Javascript</p>  
+</body>
+</html>