전체 글399

• 

  [CSS] ch02-09. list 2 09_list.html 이용 안내 객실 소개 예약 방법 및 요금 예약하기 예약 방법 및 요금 ¤ 요금 1인: 40,000원 2인: 60,000원 3인: 80,000원 4인: 100,000원 5인: 120,000원 6인: 140,000원 6인 이상이 머무르게 되면 2층 침대가 이닌 방바닥에 주무시거나 앞뜰에 텐트를 치고 주무실 수 있습니다. 침낭이나 텐트는 직접 가져오셔야 합니다. 이 경우 숙박 요금은 저희와 별도로 상의해 주세요. 09_list.css @CHARSET "UTF-8"; .out{ list-style-type: upper-alpha;/*알파벳 대문자의 반대 소문자=lower*/ list-style-position: outside; /*기본값 포지션값을 안줬을 경우 outside*/ } .in.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-08. list 08_list.html 이용 안내 객실 소개 예약 방법 및 요금 예약하기 예약 방법 및 요금 ¤ 요금 1인: 40,000원 2인: 60,000원 3인: 80,000원 4인: 100,000원 5인: 120,000원 6인: 140,000원 6인 이상이 머무르게 되면 2층 침대가 이닌 방바닥에 주무시거나 앞뜰에 텐트를 치고 주무실 수 있습니다. 침낭이나 텐트는 직접 가져오셔야 합니다. 이 경우 숙박 요금은 저희와 별도로 상의해 주세요. 08_list.css @CHARSET "UTF-8"; .navi{ margin-top: -15px; width: 100%; height: 60px; } .navi ul{ height: 40px; padding-top: 10px; padding-bottom: 5px; } .nav.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-07. spacing 07_spacing.html Joandora hello Joandora hello 07_spacing.css @CHARSET "UTF-8"; @font-face{ font-family:'myBand'; src:url('../img/Band.eot'); src:url('../img/Band.ttf') format('truetype'); src:url('../img/Band.woff') format('woff'); } .heading1{ font-family:myBand; font-size:5em; letter-spacing:0.1em;/*글자 간격*/ word-spacing:0.2em;/*단어 간격*/ } .heading2{ font-family:myBand; font-size:5em; letter-spa.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-06. indent 06_indent.html 이용 안내 객실 소개 예약 방법 예약하기 요안도라 소개 ¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. 내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-05. decoration 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; /*위와 아래의 줄간격*/ } WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-04.overflow 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.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch02-03. shadow 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; } WEB/CSS 2017. 8. 23.

• 

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

• 

  [CSS] ch02-01. font (폰트) - 클릭 - 클릭 - 클릭 초록색 원 사진링크 :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.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch01-11. navigation 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; /*오른쪽 하단 코너를 부드럽게*/ } WEB/CSS 2017. 8. 23.

• 

  [CSS] ch01-10. pseudo 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.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch01-09. attr 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짜.. WEB/CSS 2017. 8. 22.