Yeonee's Story

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 배경관련스타일 body{ background-color:skyblue; } #div-bg{ background-color: white; border: 30px solid blue; padding : 20px; width:50%; /* div의 content의 가로길이는 부모요소의 50%만큼 지정하겠다 라는 뜻. */ box-sizing: border-box; /* 가로길이를 border까지 포함해서 지정*/ } .div-test{ margin:30px; border:10px dashed; padding:20px; background-color: yellow; /* 배경색이 border까지 확장되어있음을 확인 */ } #div1{ ..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 테두리관련스타일 div{ width:100px; height: 100px; border-width: 3px; margin:15px; } #test1{ border-style:dotted; border-top-width: 10px; } #test2{ box-shadow: 5px 5px 10px 5px gray; } #test3{ border-style:dashed; border-left-color: red; } #test4{ border-width:5px; border-style: dashed double solid dotted; } #test5{ border-style:groove; border-width: 10px; border..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 영역관련스타일 * { box-sizing: border-box; /* 가로,세로길이를 border까지 포함해서 지정하겠다 라는 의미. 기본값은(content-box)*/ } .test{ background-color: yellow; border:10px solid black; /* div요소는 border영역 까지를 포함 */ width:100px; height:100px; /* width와 height는 content영역의 크기를 의미 */ } #test1{ padding:100px; } #test2{ padding-top:50px; padding-left : 50px; } #test3{ padding : 50px 20px 10..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 목론 관련 스타일 #ul2{ list-style-position: outside; list-style-image: url("resources/images/iconsample2.png"); } 목록 관련 스타일(list~) list-style-type : 불릿기호를 변경해줄때 사용 * 순서 없는 목록(ul) 선택자 { list-style-type : none(진짜많이씀)/disc/circle/square; } * 순서 있는 목록(ol) 선택자{ list-style-type : decimal/decimal-leading-zero; list-style-type : lower-alpha/upper-alpha; list-style-type..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 텍스트 관련 스타일 #c { color: red; color:#24af86; color: rgb(42, 199, 133, 0.61); /* 최대값은 255*/ color: rgba(0, 255, 142, 0.5); /* a => 투명도를의미(0으로 갈수록 희미해짐) */ color: hsla(200, 50%, 50%,0.7);/* h : (0~360), 채도, 명도 , 투명도*/ } #td1{ text-decoration: underline; } #td2{ text-decoration: line-through; } #td3{ text-decoration: overline; } #td4{ text-decoration: none; c..