05_decoration.html 1인 40,000원 2인 60,000원 3인 80,000원 4인 100,000원 6인 140,000원 05_decoration.css @CHARSET "UTF-8"; .line1{ text-decoration: underline;/*밑줄*/ } .line2{ text-decoration: overline;/*윗줄*/ } .line3{ text-decoration: line-through;/*취소선*/ } .line4{ text-decoration: overline underline;/*윗줄 밑줄*/ } p{ line-height: 20px; /*위와 아래의 줄간격*/ }

04_overflow.html 요안도라 소개 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 04_overflow.css @CHARSET "UTF-8"; .over1{ text-overflow: clip; /*잘라내기*/ } .over2{ text-overflow: ellipsis; /*생략...*/ } p{ font-size: 1.5em; white-spa..

03_shadow.html Joandora Joandora Joandora Joandora 03_shadow.css @CHARSET "UTF-8"; body{ font-family: Arial; background: #808080; } h1{ font-size:5em; color: white; } .shadow1{ text-shadow:1px 1px 3pxc #000; } .shadow2{ color: black; text-shadow: 3px -3px 5px #fff; } .shadow3{ color: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20; }

02_align.html 이용 안내 A 객실 소개 예약 방법 예약하기 < 요안도라 소개 ¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 text-align:left 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. text-align:right 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. text-align:center 내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미..

- 클릭 - 클릭 - 클릭 초록색 원 사진링크 :https://t1.daumcdn.net/cfile/tistory/99EBF833599CD57604 초록색 원 사진은 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요. 초록색 원 사진명: bullet.png CSS 강의에 앞서 파일 4개를 다운받아주세요. 그 후 WebContent아래 css, html, img 폴더 생성 후 파일은 img폴더에 html > html폴더에 css > css폴더에 생성하여 코딩해주세요. 01_font.html Joandora 01_font.css @CHARSET "UTF-8"; body{ background-color: #09280B; background-image: url('../img/bullet.png'); } @f..

11_nav.html Home HTML5 CSS3 JQuery 11_nav.css @CHARSET "UTF-8"; /*첫번째 항목의 스타일*/ ul.navi li:first-child { border-top-left-radius: .5em; /*왼쪽 상단 코너를 부드럽게 */ border-bottom-left-radius: .5em; /*왼쪽 하단 코너를 부드럽게*/ } /*두번째 항목의 스타일*/ ul.navi li:last-child { border-top-right-radius: .5em; /*오른족 상단 코너를 부드럽게*/ border-bottom-right-radius: .5em; /*오른쪽 하단 코너를 부드럽게*/ }

10_pseudo.html 이용 안내 객실 소개 예약 방법 및 요금 예약하기 10_pseudo.css @CHARSET "UTF-8";/*should select*/ .container { width: 960px; margin: 0 auto; background-color: #fff; border: 1px solid #E7E7E7; } header { height: 280px; margin-top: 0; background-image: url(../img/10_bg.png); /*이미지 URL*/ background-repeat: no-repeat; /*이미지 사이즈 조정*/ background-position: left top; /*왼쪽삳단에 백그라운드를 위치 시키겠다.*/ } .navi { backgr..

09_attr.html 예약하기 예약자 정보 예약자 연락처 예약 인원 입금 은행 09_attr.css @CHARSET "UTF-8"; ul li { list-style: none; /*목록에서 불릿 없앰*/ font-size: 16px; /*글자 크기 16px*/ margin-top: 10px; /*위쪽 여백 10px*/ } ul li label { float: left; /*왼쪽으로 배치*/ width: 80px; /*너비 80px*/ line-height: 25px; /*줄간격 25px*/ } input[type="text"] { width: 150px; /*너비 150px*/ background-color: skyblue; /*배경색 하늘색*/ border: 1px solid #000; /*1px짜..

08_group.html 요안도라 소개 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. 08_group.css @CHARSET "UTF-8"; h1, h3{ font-family: "돋움"; /*돋움 글꼴// 현장에서는 돋움, 굴림 선호.*/ color: purple; /*글자색 보라*/ } p{ font-size: 12px; /* 글자크기 12px*/ line-height: 20px; ..

07_child.html 예약 방법 및 요금 요안도라에 예약하려면? 예약 방법 직접 통화 문자 남기기 요금 1인 : 40,000원 2인 : 60,000원 3인 : 80,000원 4인 : 100,000원 07_child.css @CHARSET "UTF-8"; #container>ul { /*바로 밑 ul에만 적용*/ border: 1px dotted black; /*id: container인 요소 아래의 자식 ul 요소에 1px 실선을 그린다.*/ }

06_descendant.html 예약 방법 및 요금 요안도라에 예약하려면? 예약 방법 직접 통화 문자 남기기 요금 1인 : 40,000원 2인 : 60,000원 3인 : 80,000원 4인 : 100,000원 06_descendant.css @CHARSET "UTF-8"; #container ul ul{/*ul 밑 ul*/ border: 1px dotted black; /*id: container인 요소 아래의 자식 ul 요소에 1px 실선을 그린다.*/ }

05_id.html YOANDORA 05_id.css @CHARSET "UTF-8"; #title{ float: left; margin-left: 10px; width:200px; height:110px; background-color:orange; border:1px solid black; /*/선의굵기/선의모양:실선/선의색깔/ */ text-align:center; /*텍스트 가운데 정렬*/ } #pic1{ clear: both; float: left; /*왼쪽으로 플로팅*/ margin-left: 10px; /*왼쪽여백 10px*/ width:200px; /*너비 200px*/ height:110px; /*높이 110px*/ } #pic2{ clear:both; /*이전 요소와 줄 바꿔서 표시*/ ..