Yeonee's Story

안녕하세요. #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..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 글꼴관련스타일 #ff1{ font-family: 궁서체; } #ff2{ font-family : 고딕체; } #ff3{ font-family : 경민2체 , 궁서체, 고딕체; /* 앞의 글꼴이 없다면 뒤의 대체 글꼴 반영 */ } #web-font{ font-size : 30px; font-family: 'Noto Sans KR', sans-serif; } #fs1{ font-size:30px; } #fs2{ font-size:2em; } #fs3{ font-size:200%; } #fw1{ font-weight: normal; } #fw2{ font-weight: bold; } #fw3{ font-weight: 900; /* b..