odada

Transforms CSS 변환을 사용하면 요소를 이동, 회전, 크기 조절 및 기울일 수 있습니다. 2D 회전 브라우저 지원 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. 브라우저 별 접두사 일부 구형 브라우저 (IE 9)는 2D 변환 속성을 이해하기 위해 특정 접두사 (-ms-)가 필요합니다. div { -ms-transform: rotate(20deg); /* IE 9 */ transform: rotate(20deg); /* Standard syntax */ } CSS 2D 변환 방법 CSS transform속성을 사용하면 다음과 같은 2D 변형 방법을 사용할 수 있습니다. translate() rotate() scaleX() scaleY() scale() skewX() s..

CSS overflow속성은 너무 커서 영역에 맞지 않는 내용의 내용을 제어합니다. #overflowTest { background: #4CAF50; color: white; padding: 15px; width: 50%; height: 100px; overflow: scroll; border: 1px solid #ccc; } This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed d..

div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } 모든 HTML 요소는 상자로 간주 될 수 있습니다. CSS에서 "상자 모델"이라는 용어는 디자인과 레이아웃에 대해 이야기 할 때 사용됩니다. CSS 상자 모델은 본질적으로 모든 HTML 요소를 둘러싸는 상자입니다. 여백, 테두리, 패딩 및 실제 내용으로 구성됩니다. 아래 이미지는 박스 모델을 보여줍니다. 요소의 너비와 높이 모든 브라우저에서 요소의 너비와 높이를 올바르게 설정하려면 상자 모델의 작동 방식을 알아야합니다. 중요 사항 : CSS를 사용하여 요소의 너비 및 높이 특성을 설정하는 경우 컨텐츠 영역 의 너비 및 높이 만 설정하면 됩니다. 요소의 전체 크기를 계산..

CSS Padding padding속성은 정의 된 테두리 내에서 요소 내용 주위에 공간을 생성하는 데 사용됩니다. padding-top padding-right padding-bottom padding-left div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } div { padding: 25px 50px 75px 100px; } 패딩 및 요소 너비 CSS width속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 패딩, 테두리 및 여백 내부의 부분입니다 ( 상자 모델 ). 따라서 요소에 지정된 너비가 있으면 해당 요소에 추가 된 패딩이 요소의 총 너비에 추가됩니다. div { wi..

CSS Margins margin속성은 정의 된 경계 외부에서 요소 주위에 공간을 만드는 데 사용됩니다. CSS를 사용하면 여백을 완전히 제어 할 수 있습니다. 요소의 각 측면에 대한 여백을 설정하는 속성이 있습니다 (위쪽, 오른쪽, 아래쪽 및 왼쪽). p { margin: 70px } 이 요소의 여백은 70px입니다. CSS에는 요소의 각 측면에 대한 여백을 지정하는 속성이 있습니다. margin-top margin-right margin-bottom margin-left p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } 모든 여백 속성은 다음 값을 가질 수 있습니다. auto-브라우저가 마진을 계..

CSS 높이와 너비 설정 height및 width특성 요소의 높이와 폭을 설정하는 데 사용된다. 높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 패딩, 테두리 및 요소의 여백 내부 영역의 높이 / 너비를 설정합니다. CSS 높이 / 폭 값 height및 width속성은 다음과 같은 값을 가질 수 있습니다 : auto-이것이 기본값입니다. 브라우저는 높이와 너비를 계산합니다 length -높이, 너비를 px, cm 등으로 정의합니다. % -포함 블록의 높이 / 폭을 퍼센트로 정의 initial -높이 / 너비를 기본값으로 설정 inherit -높이 / 너비는 부모 값에서 상속됩니다 div { height: 200px; width: 50%; background-color: powderb..

border-radius속성은 요소에 둥근 테두리를 추가하는 데 사용 .border_radius1 .radius { display: inline-block; width: 100px;height: 100px; background: gray; } .border_radius1 .radius1 { border-radius: 10px; } .border_radius1 .radius2 { border-radius: 50%; } .border_radius1 .radius3 { border-radius: 100px 100px 0 0; } .border_radius1 .radius4 { border-radius: 40px 15px 40px 15px; }

wCSS Border Style border-style속성은 표시 할 테두리 종류를 지정합니다. p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dot..

CSS background-color background-color속성은 요소의 배경색을 지정합니다. /* a valid color name - like "red" */ body { background-color: lightblue; } /* a HEX value - like "#ff0000" */ #p1 {background-color: rgb(255, 0, 0);} /* red */ #p2 {background-color: rgb(0, 255, 0);} /* green */ #p3 {background-color: rgb(0, 0, 255);} /* blue */ /* an RGB value - like "rgb(255,0,0)" */ #p1 {background-color: rgba(255, 0, ..

실무 샘플 text-overflow를 이용한 말줄임 text-overflow속성은 표시되지 않은 오버플로 된 콘텐츠를 사용자에게 알리는 방법을 지정합니다. 잘 리거나 줄임표 (...)를 표시하거나 사용자 지정 문자열을 표시 할 수 있습니다. .text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 24px; color: #222; } text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-trans..