odada

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

기본 단축기 관리자(admin) Q 이전 글 A 다음 글 S 최근에 올라온 글 Z 최근에 달린 댓글 X 최근에 받은 트랙백 C 티스토리 글쓰기 기본 모드에는 여러 단축키가 있습니다. 마우스로 모든 기능을 사용할 수 있지만 간단한 문서 편집에서 단축키가 있다면 훨씬 쉬운 문서 작성이 가능할 것입니다. 어떤 단축키가 있는지 하나씩 살펴보겠습니다. 문단 스타일 스타일 PC Mac 제목1 (h2) Alt+Shift+2 Ctrl+Alt+2 제목2 (h3) Alt+Shift+3 Ctrl+Alt+3 제목3 (h4) Alt+Shift+4 Ctrl+Alt+4 문단3 (p) Alt+Shift+7 Alt+Shift+7 티스토리 에디터에서 제공하는 문단 스타일은 제목1이 HTML의 h2에 해당합니다. 글 제목이 h1에 해당하..

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

CSS 선택하기 요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다. CSS 엘리먼트 선택 요소 선택기는 요소 이름을 기반으로 HTML 요소를 선택합니다. p { text-align: center; color: red; } CSS id 선택기 id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다. 요소의 id는 페이지 내에서 고유하므로 id 선택기는 하나의 고유 한 요소를 선택하는 데 사용됩니다! 특정 ID를 가진 요소를 선택하려면 해시 (#) 문자와 요소의 ID를 차례로 쓰십시오. #para1 { text-align: center; color: red; } 아이디 이름은 숫자로 시작할 수 없습니다! CSS 클래스 선택기 클래스 선택기는 특정 클래스 속성을 가진 HTML ..