WEB/CSS61

• 

  [CSS] ch03-05. bgposition 05_bgposition.html 05_bgposition.css @CHARSET "UTF-8"; .intro{ /*CSS에서 중복은 클래스, 유일은 ID로 불러온다.*/ width:500px; height:300px; border:1px solid black; } #bg1{ background-image:url(../img/bg2.png); background-repeat:no-repeat; background-position:0% 0%; } #bg2{ background-image:url(../img/bg2.png); background-repeat:no-repeat; background-position:30% 60%;/*기준점 왼쪽 맨위, left / top*/ } body{ background-i.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch03-04. bgimg 04_bgimg.html 04_bgimg.css @CHARSET "UTF-8"; body{ background-image: url(../img/bg.png); background-repeat:repeat-x; /*repeat을 지정하지 않으면, x,y 방향 모두 채움.*/ } WEB/CSS 2017. 8. 23.

• 

  [CSS] ch03-03. bgcolor 03_bgcolor.html 객실 소개 여성 도미토리, 유채방 대상 여성 도미토리 크기 4인 가격 1인 20,000원 동성 도미토리, 또는 가족 1팀을 위한 동백방 대상 동성 도미토리 또는 가족 1팀 크기 4인 가격 1인 20,000원 03_bgcolor.css @CHARSET "UTF-8"; table{ width: 300px; margin-bottom: 30px; } td{ border: 1px solid black; margin-left: 0; padding: 5px; } th{ border: 1px solid black; margin-right: 0; padding: 5px; width: 100px; background-color:#0c5775; color: #ffffff; } WEB/CSS 2017. 8. 23.

• 

  [CSS] ch03-02. opacity 02_opacity.html Joandora Joandora Joandora Joandora 02_opacity.css @CHARSET "UTF-8"; body{ background-color: #036;/*색깔을 나타내는 표현법1*/ } h1{ font-family: Arial, Helvetica, sans-serif; /*맨 앞부터 순서대로 있는 폰트를 찾아낸다 만약 없으면 브라우저 기본 글꼴로 출력된다.*/ font-size: 3em; } .op0{ color: rgb(255,255,255);/*색깔을 나타내는 표현법2*/ } .op1{ color: rgba(255,255,255,1.0);/*색깔을 나타내는 표현법3*/ } .op2{ color: rgba(255,255,255,0.5); } .op3.. WEB/CSS 2017. 8. 23.

• 

  [CSS] ch03.01. rgba 첫번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/998F6C33599CDFCE33 두번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9939DC33599CDFCE24 세번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99710833599CDFCE0B 네번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99074433599CDFCE22 사진 파일 4개는 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요. 첫번째 사진명: beach.png 두번째 사진명: bg.png 세번째 사진명: bg2.png 네번쨰 사진명: station.jpg CSS 강의에 앞서 파일 4개.. WEB/CSS 2017. 8. 23.

• 

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