odada

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..

CSS @ font-face 규칙 웹 글꼴을 사용하면 웹 디자이너는 사용자 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다. 사용하려는 글꼴을 찾거나 구입 한 경우 웹 서버에 글꼴 파일을 포함 시키면 필요할 때 자동으로 사용자에게 다운로드됩니다. /fonts 폴더에 폰트를 저장 후 css에서 폰트를 연결합니다. @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } 자주 사용하는 웹폰트 CDN 글꼴을 웹 페이지에 포함 시키려면 아래 코드를 HTML 문서의 태그 안에 붙여넣시오 . 아래는 자주 사용하는 글꼴 모음입니다. link 방식 import 방식 /* Noto Sa..

CSS 글꼴 속성은 Serif와 Sans-serif 글꼴의 차이점 글꼴 모음, 굵게, 크기 및 텍스트 스타일을 정의합니다. Font Family 텍스트의 글꼴 군은 font-family속성으로 설정됩니다 . 이 font-family속성에는 "대체"시스템으로 여러 글꼴 이름이 있어야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴 등을 시도합니다. 다른 글꼴을 사용할 수없는 경우 브라우저가 일반 패밀리에서 유사한 글꼴을 선택할 수 있도록 원하는 글꼴로 시작하고 일반 패밀리로 끝납니다. 참고 : 글꼴 모음 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다. 쉼표로 구분 된 목록에 둘 이상의 글꼴 패밀리가 지정되었습니다. p { font-family: "Ti..

가상 클래스 선택자 /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; }​ a:link 링크가 걸린 문자에 속성을 부여하는 선택자 a:visited 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자 a:hover 링크기 걸린 문자에 마우스가 닿았을 경우의 속성을 부여하는 선택자 a:active 링크가 걸린 글자가 활성화되었을 경우의 속성을 부여하는 선택자 (클릭했다가 돌아왔거나 클릭하려다..

h1[class] class명을 가진 h1 요소 img[alt] alt 속성을 가진 img 요소 p[class="abc"] class명이 유일하게 'abc'인 p 요소 p[class~="abc"] class명이 유일하게 'abc이거나 여러 개의 class명 중 하나가 'abc'인 p요소 p[class|="abc"] class명이 'abc'이거나 'abc-'로 시작하는 요소 p[class^="abc"] class명이 철자 'abc'로 시작하는 p 요소 p[class$="abc"] class명이 철자 'abc'로 끝나는 p 요소 p[class*="abc"] class명이 철자 'abc'가 포함되어 있는 p 요소 p[href="mailto"] href 속성값이 'mailto'로 시작하는 a 요소 CSS [at..