별초롱언니는 개발중

▣ table-layout · 셀 안 내용의 양에 따라 셀 너비를 조절 속성값설명table-layout: auto;내용 분량에 따라 셀 너비가 자동으로 조절된다. (기본값)table-layout: fixed;내용 분량과 관계없이 셀 너비를 고정한다table-layout: initial;변경된 테이블 레이아웃을 기본값 상태(auto)로 설정한다table-layout:inherit;부모 요소의 값을 상속 받아 셀 너비를 결정한다 table layout auto 예제 table layout auto 내용 분량에 따라서 자동으로 조절 table layout fixed 예제 table layout fixed 내용 분량과 상관 없이 고정 ..

▣ float· 화면을 구성하는 요소 간의 관계를 고려하여 각 요소를 배치하는 방법속성값설명inherit요소를 감싸는 부모 요소의 float 속성을 상속받는다.left요소를 왼쪽으로 떠 있는 상태로 만든다. right요소를 오른쪽으로 떠 있는  상태로 만든다.nonefloat 속성을 적용하지 않는다 (요소를 떠 있지 않게 한다.) float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다. float 속성은 특정 요소를 떠 있게 해줍니다. 여기서 '떠 있다'라는 말의 의미는 특정 요소가 기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의 레이아웃을 구성하는 데 필요한 핵심 속성으로, 특정 요소가 주변 요소와..

▣ position· 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성구분속성값설명정적 위치 설정position: static;각종 요소를 웹 문서의 흐름에 따라 배치한다.상대 위치 설정position: relative;웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법이다.절대 위치 설정position: absolute;전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치하는 방법이다.고정 위치 설정position: fixed;요소의 위치를 '절대 위치 설정'과 똑같은 방법으로 배치하되, 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있다. ▣ 정적 위치 설정 · 텍스트, 이미지, 표 등..

▣ box-shadow { box-shadow: 수평 그림자(필수) | 수직 그림자(필수) | 그림자 흐림 | 그림자 번짐 | 그림자 색상 | 삽입 효과; } · 박스에 그림자 효과 적용· 수평 그림자 (h-shadow) : 그림자의 수평 거리 지정· 수직 그림자 (v-shadow) : 그림자의 수직 거리 지정 · 그림자 흐림 (blur) : 그림자의 흐림 정도 지정· 그림자 번짐 (spread) : 그림자의 번짐 정도 지정 · 그림자 색상 (color) : 그림자의 색상 지정 · 삽입 효과 (inset) : 박스 외부로 표현되는 그림자를 박스 안쪽으로 표현하는 효과  박스 그림자 스타일링 예제1 박스 그림자 스타일링 예제2 박스 그림자 스타일링 예제3 박스 그림자 스타일링 예제4 박스 ..

▣ border-radius· 테두리의 모서리를 둥글게 설정형식설명border-radius: 속성값;네 개의 모서리 모두 둥글게 한다. border-top-left-radius: 속성값; 상단 왼쪽 모서리를 둥글게 한다. border-top-right-radius: 속성값; 상단 오른쪽 모서리를 둥글게 한다. border-bottom-right-radius: 속성값; 하단 오른쪽 모서리를 둥글게 한다. border-bottom-left-radius: 속성값; 하단 왼쪽 모서리를 둥글게 한다.  둥근 모서리 스타일링 예제1 둥근 모서리 스타일링 예제2 둥근 모서리 스타일링 예제3 둥근 모서리 스타일링 예제4 ❤_❤ 똥글이로 스타일링중

▣ border-width · 테두리 두께 설정 · Top, bottom, left, right를 이용하여 네 방향으로 설정 가능속성값설명수치테두리의 두께를 픽셀(px), 포인트(pt), 센티미터(cm)같은 단위로 지정한다. thin얇은(1px) 두께의 테두리를 지정한다.medium중간(3px) 두께의 테두리를 지정한다. 기본값이다.thick굵은(5px) 두께의 테두리를 지정한다. ▣ border-color ·  테두리 색상 지정·              black을 #000000 / 0, 0, 0 으로 표현가능 ▣ border-style · 테두리 스타일 지정속성값설명none테두리가 나타나지 않는다. 기본값이다.hidden테두리를 감춘다.dotted테두리를 점섬으로 지정한다.dashed테두리를 파선으로..

▣ 박스 모델· 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용 · 웹 문서의 전체 레이아웃을 정의 · 각종 요소들을 웒라는 위치에 배치  ▣ 박스의 속성 · content : 실제 내용이 표현되는 곳 · padding : 콘텐츠와 테두리 사이의 여백 · border : 박스의 테두리 두께 · margin : 테두리와 박스의 최종 경계 사이의 여백  CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다. 박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있습니다.▣ Content · 실제 내용이 표헌되는 곳 · 속성..