전체 글

테두리 스타일 지정 (border-style) border-위치-style: none/dotted/dashed/solid/double/groove/ridge/inset/outset; none dotted : 점선 dashed : 긴 점, 각진 테두리 solid : 실선 double : 두 줄 실선 groove : 파인 선 ridge : 불룩한 선 inset : 위쪽이 튀어나옴 outset : 아래쪽이 튀어나옴 테두리 두께 지정 (border-width) border-위치-width : 테두리두께; 테두리 색상 지정 (border-color) border-위치-color : 테두리색상; 박스에 그림자 효과 (box-shadow) box-shadow : 가로(x) 세로(y) 흐림정도 번짐정도 색상; 둥근 모..

여백 및 간격 관련 스타일 요소 영역 : content(문장) + padding(여백) + border(테두리) width와 heights는 content 영역의 크기를 의미, padding, border 영역 미포함 div 요소는 border 영역 까지를 포함 padding, border 영역 까지 포함하려면 box-sizing 사용 속성 하나로 상하좌우 스타일 지정 css에서 상하좌우 지정할 스타일이 있으면 시계방향 (top-left-bottom-right)으로 한 번에 지정 가능 2개만 정하면 상하, 좌우로 적용됨 1개만 정하면 모든 방향에 적용됨 #test3{ padding : 50px 20px 10px 0px; /*시계 방향(위, 오른쪽, 아래, 왼쪽) */ } padding 내용물영역(cont..

list-style-type 불릿기호를 변경해줄때 사용 ul (순서 없는 목록) 선택자 { list-style-type : none(자주사용됨) / disc(원) / circle(속이 빈 원) / square; } ol (순서 있는 목록) decimal : 목록 항목을 1부터 시작하는 숫자로 표시 decimal-leading-zero : 10 미만 숫자에 01부터 시작하는 두 자리 숫자로 표시 lower-alpha : 알파벳 소문자로 표시 upper-alpha : 알파벳 대문자로 표시 lower-roman : 로마 숫자 소문자 (i)로 표시 upper-roman : 로마 숫자 대문자 (I)로 표시; 선택자{ list-style-type : decimal/decimal-leading-zero; list-s..