Hi

테두리 색상 지정하기 border-top-color: border-right-color: border-bottom-color: border-left-color: border-color: border-color 속성만 사용해서는 화면에서 결과를 확인할 수 없음.사전에 border-width 속성과 border-style 속성을 미리 적용해야함. 출처 : Doit html5 + css3 웹표준의 정석

테두리 두께 지정하기 border-top-width: | thin | medium | thickborder-right-width: | thin | medium | thickborder-bottom-width: | thin | medium | thickborder-left-width: | thin | medium | thickborder-width: | thin | medium | thick .box1 { border-width:2px; } 네방향의 테두리 굵기를 모두 2px로 표시합니다..box2 { border-width: thick thin; } 위와 아래는 thick(굵게), 왼쪽과 오른쪽은 thin(가늘게)으로 표시합니다..box3 { border-width: 5px 10px 15px 20px; ..

테두리 스타일 지정하기 border-style: none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

width, height 속성 - 콘텐츠 영역의 크기 (padding 안의 내용) width: | | height: | | display 속성 - 화면 배치 방법 결정하기블록 레벨 요소 -> 인라인 레벨 요소인라인 레벨 요소 -> 블록 레벨 요소 display: none | contents | block | inline | inline-block | table | table-cell 등 1) block 속성 값 : 인라인 레벨 요소 -> 블록 레벨 요소#block img { display:block; margin:10px; } 2) inline 속성 값 : 블록 레벨 요소 -> 인라인 레벨 요소nav ul li { display: inline; } 애완견 종류 입양하기 건강돌보기 더불어살기 3) inli..

박스모델 1. 블록 레벨 요소 : 블록 레벨(block-level)요소는 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 요소.2. 인라인 레벨 요소: 줄을 차지하지 않는 요소 종류 해당 태그 블록 레벨 태그 ,~,,,,,,,,, 인라인 레벨 태그 ,, ,,,,,,,

linear-gradient( to , color-step, [color-stop,..]); 방향 키워드속성 값 설명 to top 아래에서 시작해 위로 그라데이션이 만들어짐 to left 오른쪽에서 시작해 왼 쪽으로 to right 왼쪽에서 시작해 오른쪽으로 to bottom 위에서 시작해 아래로 * 각 브라우저마다 차이가 있을 수 있음. 원형 그라데이션radial-gradient( at , color-step, [color-stop...]) 원형 그라데이션 위치 조정.grad { background: blue; background: -webkit-radial-gradient(10% 10%, circle, white,blue); background: -moz-radial-gradient(10% 10%, ..