WEB/CSS61

• 

  [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.

• 

  [CSS] ch01-08. group 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; .. WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-07.child 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 실선을 그린다.*/ } WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-06. descendant 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 실선을 그린다.*/ } WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-05. ID 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; /*이전 요소와 줄 바꿔서 표시*/ .. WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-04.Class (클래스) 04_class.html 요안도라 소개 ¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. 04_class.css @CHARSET "UTF-8"; p{ /*tag selecter*/ font-size: 12px;/*글자크기 12px*/ margin-left: 20px;/*왼쪽여백 20px*/ } .accent{ /*class selecter*/ color: blue;/*글자색 파랑*/ f.. WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-03. 각종 태그 (tag) 03_tag.html 요안도라 소개 ¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. 03_tag.css @CHARSET "UTF-8"; h2{ color: blue; } p{ font-size: 12px; color: #ff0000; margin-left: 20px;/*화면 왼쪽으로부터 픽셀만큼 떨어뜨림.*/ } WEB/CSS 2017. 8. 22.

• 

  [CSS] ch01-02. 리스트 스타일 (list style) 02_inherit.html 예약 방법 및 요금 요안도라 예약의 가장 빠른 방법은? 예약 방법 직접 통화 문자 남기기 요금 1인 : 40,000원 2인 : 60,000원 3인 : 80,000원 4인 : 100,000원 4인 이상일 경우 상의해 주세요. 02_inherit.css @CHARSET "UTF-8"; ul{ color: blue; list-style: square; } WEB/CSS 2017. 8. 22.