diff --git a/02/index.html b/02/index.html new file mode 100644 index 0000000..7900502 --- /dev/null +++ b/02/index.html @@ -0,0 +1,13 @@ + + + + + 웹 개발 입문 + + +

웹 개발 기초

+

HTML

+

CSS

+

자바스크립트

+ + \ No newline at end of file diff --git a/02/results/web.html b/02/results/web.html new file mode 100644 index 0000000..dc2adfc --- /dev/null +++ b/02/results/web.html @@ -0,0 +1,4 @@ +

웹 개발 기초

+

HTML

+

CSS

+

자바스크립트

\ No newline at end of file diff --git a/02/web.html b/02/web.html new file mode 100644 index 0000000..10ed861 --- /dev/null +++ b/02/web.html @@ -0,0 +1,4 @@ +

웹 개발 기초

+

HTML

+

CSS

+

자바스크립트

\ No newline at end of file diff --git a/03/comment.html b/03/comment.html new file mode 100644 index 0000000..29a996a --- /dev/null +++ b/03/comment.html @@ -0,0 +1,66 @@ + + + + + Dream Jeju + + + +
+ +
+ + + + +
+
+
+

몸과 마음이 치유되는 섬

+
+ +

쉼(Healing)의 공간으로 안내합니다

 +

탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.

+
+
+

상세 일정

+
    +
  • 여행 기간 : 2박 3일
    • +
  • 여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)
    • +
+
+
+
+

다양한 액티비티가 기다리는 섬

+
+ +

모험과 스릴이 넘치는 레저의 천국으로 안내합니다.

 +

둘러보기만 하는 여행을 하셨나요?

+

하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?

+
+
+
+ +
+ + \ No newline at end of file diff --git a/03/css/structure.css b/03/css/structure.css new file mode 100644 index 0000000..e216ec8 --- /dev/null +++ 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; /* 글자 색 */ +} \ No newline at end of file diff --git a/03/images/activity.jpg b/03/images/activity.jpg new file mode 100644 index 0000000..7137b84 Binary files /dev/null and b/03/images/activity.jpg differ diff --git a/03/images/healing.jpg b/03/images/healing.jpg new file mode 100644 index 0000000..7b2efcf Binary files /dev/null and b/03/images/healing.jpg differ diff --git a/03/index.html b/03/index.html new file mode 100644 index 0000000..da9d6a0 --- /dev/null +++ b/03/index.html @@ -0,0 +1,14 @@ + + + + + HTML 기본 문서 + + +

웹 문서 만들기

+
+

HTML

+

CSS

+

자바스크립트

+ + \ No newline at end of file diff --git a/03/my.html b/03/my.html new file mode 100644 index 0000000..1dea626 --- /dev/null +++ b/03/my.html @@ -0,0 +1,15 @@ + + + + + + HTML 웹 문서 연습 + + +

웹 문서 만들기

+
+

HTML

+

CSS

+

JavaScript

+ + \ No newline at end of file diff --git a/03/results/comment.html b/03/results/comment.html new file mode 100644 index 0000000..09c3cb4 --- /dev/null +++ b/03/results/comment.html @@ -0,0 +1,68 @@ + + + + + Dream Jeju + + + +
+ +
+ + + + +
+ + +
+
+

몸과 마음이 치유되는 섬

+
+ +

쉼(Healing)의 공간으로 안내합니다

 +

탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.

+
+
+

상세 일정

+
    +
  • 여행 기간 : 2박 3일
    • +
  • 여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)
    • +
+
+
+
+

다양한 액티비티가 기다리는 섬

+
+ +

모험과 스릴이 넘치는 레저의 천국으로 안내합니다.

 +

둘러보기만 하는 여행을 하셨나요?

+

하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?

+
+
+
+ +
+ + \ No newline at end of file diff --git a/03/results/my-1.html b/03/results/my-1.html new file mode 100644 index 0000000..561ed64 --- /dev/null +++ b/03/results/my-1.html @@ -0,0 +1,14 @@ + + + + + + 웹 문서 연습 + + +

웹 문서 만들기

+

HTML

+

CSS

+

Javascript

+ + \ No newline at end of file diff --git a/03/results/my-2.html b/03/results/my-2.html new file mode 100644 index 0000000..5617980 --- /dev/null +++ b/03/results/my-2.html @@ -0,0 +1,15 @@ + + + + + + 웹 문서 연습 + + +

웹 문서 만들기

+
+

HTML

+

CSS

+

Javascript

+ + \ No newline at end of file diff --git a/03/sol-1.html b/03/sol-1.html new file mode 100644 index 0000000..172a1a8 --- /dev/null +++ b/03/sol-1.html @@ -0,0 +1,25 @@ + + + + + My First Page + + +
+

My Blog

+
+
+
+

Blog Post Title

+

This is a blog post.

+
+
+ + + + \ No newline at end of file diff --git a/03/structure.html b/03/structure.html new file mode 100644 index 0000000..10db634 --- /dev/null +++ b/03/structure.html @@ -0,0 +1,63 @@ + + + + + Dream Jeju + + + +
+
+ + +
+
+
+

몸과 마음이 치유되는 섬

+
+ +

쉼(Healing)의 공간으로 안내합니다

 +

탁 트인 바다, 시원한 바람에 몸을 맡기고 뚜벅뚜벅 오름을 오르고 올렛길을 걷다보면 온전히 나에게 집중할 수 있습니다.

+
+
+

상세 일정

+
    +
  • 여행 기간 : 2박 3일
    • +
  • 여행 일정 : (여행 일정은 상담을 통해 결정 및 조정 가능합니다)
    • +
+
+
+
+

다양한 액티비티가 기다리는 섬

+
+ +

모험과 스릴이 넘치는 레저의 천국으로 안내합니다.

 +

둘러보기만 하는 여행을 하셨나요?

+

하늘을 날며 시원한 바다를 내려다보는 패러글라이등과 투명한 물빛 속을 여행하는 스킨스쿠버... 아름다운 제주 해안도로를 씽씽 전동바이크나 전동킥보드로 달려보세요. 시원한 바다를 가까이에서 느낄 수 있는 요트 체험과 배낚시도 빼놓을 수 없겠죠?

+
+
+
+ +
+ + \ No newline at end of file