로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 문법 == CSS는 기본적으로 다음과 같이 생겼다. <syntaxhighlight lang="css"> div.wiki#libre { padding: 10px; color: #663399; } </syntaxhighlight> 여기서 <code>div.wiki#libre</code>는 선택자(Selector)로, 해당 선택자에 맞는 요소에 스타일이 적용된다. 여기선 "div태그 중에 class가 wiki이고, id가 libre인 요소"를 의미한다. 중괄호(<code>{}</code>) 사이에는 속성(attribute) 이름과 값이 연속으로 나오는 데, 여기서 해당 요소에 어떤 속성을 지정하는 지를 표기한다. 최신 CSS(CSS3)에는 미디어 쿼리(Media Query) 및 애니메이션 등의 기능이 추가되어 문법이 다소 복잡해졌다. === 선택자 === 선택자는 CSS에서 "어떤 요소"에 스타일을 적용할 지를 표현하는 요소이다. 위의 예제코드에서 <code>div.wiki#libre</code>에 해당하는 부분이다. CSS에서 쓰는 선택자의 종류는 다음과 같다. ==== 기본 선택자 ==== {| class="wikitable" ! 문법 ! 설명 |- | <code>*</code> | 모든 요소 선택 |- | <code>Element</code> | Element 요소 선택<br /> <small>div, body같은 태그 선택</small> |- | <code>#ID</code> | 특정 ID를 가진 요소 선택 |- | <code>.Class</code> | 특정 클래스를 가진 요소 선택 |} <code>*</code> 모든 요소를 선택한다. 함부로 사용하면 웹 페이지의 로딩 속도를 느리게 할 수 있으므로 꼭 필요할 때 사용한다. <code>Element</code> div, body, span 같은 HTML 태그를 직접 선택한다. 지정하지 않고 아래의 선택자만 사용하면 모든 태그에 해당한다. <code>.Class</code> Class는 한 페이지당 여러 개의 요소를 선택할 수 있다. <code>#ID</code> ID는 HTML문서 한 곳에만 지정 할 수 있다. class와 달리 한 페이지의 한 요소에만 스타일 지정을 할 수 있다. class처럼 HTML페이지에 같은 ID 여러 개를 쓰면 맨 처음의 ID만 스타일 적용이 되고 그 다음은 무시되니 그 때는 class를 쓰자. ==== 속성 선택자 ==== 요소의 속성값은 <code><a href="#libre" target="_blank"></code>같은 태그가 주어줬을 때, <code>href</code>나 <code>target</code>같은 부분을 뜻한다. 단, <code>id</code>나 <code>class</code>는 (위에 나와있듯이) 따로 문법이 있다. {| class="wikitable" ! 문법 ! 설명 |- | <code>[속성이름]</code> | 특정 속성을 가진 요소 선택 |- | <code>[속성이름='값']</code> | 특정 속성값이 해당 값과 일치하는 요소 선택 |- | <code>[속성이름^='값']</code> | 특정 속성값이 해당 값으로 시작하는 요소 선택 |- | <code>[속성이름$='값']</code> | 특정 속성값이 해당 값으로 끝나는 요소 선택 |- | <code>[속성이름*='값']</code> | 특정 속성값에 해당 값이 들어 있는 요소 선택 |- | <code>[속성이름~='값']</code> | (여러 단어가 띄어쓰기로 구분된) 특정 속성값에 해당 값이 들어 있는 요소 선택 |- | <code><nowiki>[속성이름|='값']</nowiki></code> | 특정 속성값이 해당 값과 일치하거나 해당 값 + 하이픈(-)으로 시작하는 요소 선택 |} ==== 조합 선택자 ==== 두 가지 이상의 선택자를 조합한다. 주로 특정 요소 다음에 오는 요소나, 자식 요소를 선택하는 데 쓴다. {| class="wikitable" ! 문법 ! 설명 |- | <code>선택자1, 선택자2</code> | 선택자1 또는 선택자2 선택 |- | <code>선택자1선택자2</code> | 선택자1과 선택자2를 동시에 만족하는 요소 선택 |- | <code>선택자1 선택자2</code> | 선택자1의 자식 요소 중 선택자2 요소 선택 |- | <code>선택자1 > 선택자2</code> | 선택자1의 바로 밑에 있는 자식 요소 중 선택자2 요소 선택 |- | <code>선택자1 + 선택자2</code> | 선택자1 바로 다음에 오는 선택자2 요소 선택 |- | <code>선택자1 ~ 선택자2</code> | 선택자1 다음에 오는 모든 선택자2 요소 선택 |} ==== 특수 선택자 ==== ===== 가상 클래스 선택자 ===== === 속성 정의 === 선택자로 선택한 요소를 "어떻게 보일지"를 정의하는 부분이다. 문법은 <code>속성: 값;</code>의 연속으로 구성되어 있다. ==== 단위 ==== CSS의 값에는 뒤에 단위가 붙는 경우가 있다. CSS에서 사용할 수 있는 단위는 다음과 같다. ===== 길이(절대값) ===== {| class="wikitable" ! 단위 ! 이름 ! 길이 |- | <code>cm</code> | 센티미터 | 1cm = 96px / 2.54 |- | <code>mm</code> | 밀리미터 | 1mm = 1cm의 1/10 |- | <code>q</code> | 쿼터-밀리미터 | 1q = 1cm의 1/40 |- | <code>in</code> | 인치 | 1in = 2.54cm = 96px |- | <code>pc</code> | 피카 | 1pc = 1인치의 1/6 |- | <code>pt</code> | 포인트 | 1pt = 1인치의 1/72 |- | <code>px</code> | 픽셀 | 1px = 1인치의 1/96 |} ===== 길이(상대값) ===== {| class="wikitable" ! 단위 ! 길이 |- | <code>%</code> | 부모 요소에서 퍼센트 값 |- | <code>em</code> | 요소의 글자크기 |- | <code>ex</code> | x-높이 (알파벳 x의 글자크기 기준) |- | <code>ch</code> | 0 (숫자 영)의 글자폭 |- | <code>rem</code> | 루트 요소의 글자크기 |- | <code>vw</code> | 뷰포트의 폭 1% |- | <code>vh</code> | 뷰포트의 높이 1% |- | <code>vmin</code> | 뷰포트의 좁은 쪽 1% |- | <code>vmax</code> | 뷰포트의 넓은 쪽 1% |} ===== 기타 ===== * 각도에선 <code>deg</code>(원=360deg),<code>grad</code>(원=400grad),<code>rad</code>(원=2πrad),<code>turn</code>(원=1turn)을 사용한다. * (애니메이션 등에서 쓰이는) 시간의 단위로는 <code>s</code>(초)와 <code>ms</code>(밀리초)가 있다. * 주기를 나타내는 단위로 <code>Hz</code>와 <code>kHz</code>가 있다. ==== 색상 ==== CSS에선 색상을 나타내는 표기법이 여러 가지 있다. * 16진법 표기: <code>#A2CCA3</code>, '#' 이후에 두 글자씩 각각 Red, Green, Blue를 나타낸다. 이 표기법이 가장 자주 쓰인다. 만약 <code>#AABBCC</code> 각각의 [[RGB]] 값이 모두 같은 두 글자라면 <code>#ABC</code>와 같이 줄여서 작성 할 수도 있다. * 10진법 RGB 표기: <code>rgb(162, 204, 163)</code>, 세 숫자가 각각 Red, Green, Blue를 나타낸다. * 10진법 % 표기: <code>rgb(64%, 80%, 64%)</code>, 위와 같으나 백분율을 사용해 표기한다. * HSL 표기: <code>hsl(119, 29%, 72%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Lightness(명도)를 나타낸다. * HSV 표기: <code>hsv(119, 21%, 80%)</code>, 세 숫자가 각각 Hue(색조), Saturation(채도), Value(명도)를 나타낸다. HSL과 차이가 있음에 유의할 것. * 색상 이름: <code>lightgreen</code>, 직접 색상의 이름을 넣을 수 있다. 전체 색상 목록은 [http://www.w3.org/TR/css3-color/#svg-color CSS 스펙 문서]를 참고할 것. CSS3엔 알파 값(투명도) 개념이 추가되어서, RGB/HSL/HSV의 4번째 값에 알파 값을 쓸 수 있다. 단, 앞에 소문자 a를 붙여야 하며, 0은 완전 투명, 1은 불투명이다. (예: <code>rgba(162, 204, 163, 0.8)</code>) 16진수 표기법에서는 뒤에 투명도를 두글자로 적으면 된다. (<code>#AABBCCDD</code>의 형식) === 미디어 쿼리(Media query, @media) === CSS3에 새로 추가된 기능으로, 특정 기기나 해상도 등에 따라 다른 효과를 줄 때 사용하며, 반응형 웹 디자인의 핵심 기능 중 하나이다. CSS 내에서 미디어 쿼리를 사용한 문법은 다음과 같다. <syntaxhighlight lang="css"> @media screen and (min-width: 768px) { div.wiki#libre { font-size: 10pt; } } </syntaxhighlight> 또한, <code><link></code>태그로 CSS를 적용할 때에도 <code>media</code>속성에 미디어 쿼리를 다음과 같이 사용할 수 있다. <syntaxhighlight lang="html5"> <link rel="stylesheet" media="screen and (min-width: 768px)" href="stylesheet.css" /> </syntaxhighlight> === 웹 폰트 (@font-face) === CSS3에 새로 추가된 기능으로, 현재 컴퓨터(또는 스마트폰)에 설치되어 있지 않은 글꼴을 내려받아 적용하는 기능이다. 파일 형식으로는 <code>woff2</code>, <code>woff</code>를 주로 쓰며, 구형 브라우저를 위해 <code>ttf</code>, <code>svg</code>, <code>eot</code>도 쓰인다. 웹 폰트는 다음과 같이 사용한다. <syntaxhighlight lang="css"> @font-face { font-family: 'LibreWiki Font'; /* 글꼴의 이름 */ src: url('webfont.eot'); /* IE9 */ src: local('LibreWiki Font'), /* 해당 글꼴이 이미 설치되어 있으면 그걸 사용한다. */ url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6 - IE8 */ url('webfont.woff2') format('woff2'), /* WOFF 2.0 */ url('webfont.woff') format('woff'), /* WOFF 1.0 */ url('webfont.ttf') format('truetype'), /* 트루타입 */ url('webfont.svg#svgFontName') format('svg'); /* 구형 iOS */ } div.wiki#libre { font-family: 'LibreWiki Font', sans-serif; } </syntaxhighlight> 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포됩니다(자세한 내용에 대해서는 리브레 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 글이 직접 작성되었거나 호환되는 라이선스인지 확인해주세요. 리그베다 위키, 나무위키, 오리위키, 구스위키, 디시위키 및 CCL 미적용 사이트 등에서 글을 가져오실 때는 본인이 문서의 유일한 기여자여야 하고, 만약 본인이 문서의 유일한 기여자라는 증거가 없다면 그 문서는 불시에 삭제될 수 있습니다. 취소 편집 도움말 (새 창에서 열림) | () [] [[]] {{}} {{{}}} · <!-- --> · [[분류:]] · [[파일:]] · [[미디어:]] · #넘겨주기 [[]] · {{ㅊ|}} · <onlyinclude></onlyinclude> · <includeonly></includeonly> · <noinclude></noinclude> · <br /> · <ref></ref> · {{각주}} · {|class="wikitable" · |- · rowspan=""| · colspan=""| · |} {{lang|}} · {{llang||}} · {{인용문|}} · {{인용문2|}} · {{유튜브|}} · {{다음팟|}} · {{니코|}} · {{토막글}} {{삭제|}} · {{특정판삭제|}}(이유를 적지 않을 경우 기각될 가능성이 높습니다. 반드시 이유를 적어주세요.) {{#expr:}} · {{#if:}} · {{#ifeq:}} · {{#iferror:}} · {{#ifexist:}} · {{#switch:}} · {{#time:}} · {{#timel:}} · {{#titleparts:}} __NOTOC__ · __FORCETOC__ · __TOC__ · {{PAGENAME}} · {{SITENAME}} · {{localurl:}} · {{fullurl:}} · {{ns:}} –(대시) ‘’(작은따옴표) “”(큰따옴표) ·(가운뎃점) …(말줄임표) ‽(물음느낌표) 〈〉(홑화살괄호) 《》(겹화살괄호) ± − × ÷ ≈ ≠ ∓ ≤ ≥ ∞ ¬ ¹ ² ³ ⁿ ¼ ½ ¾ § € £ ₩ ¥ ¢ † ‡ • ← → ↔ ‰ °C µ(마이크로) Å °(도) ′(분) ″(초) Α α Β β Γ γ Δ δ Ε ε Ζ ζ Η η Θ θ Ι ι Κ κ Λ λ Μ μ(뮤) Ν ν Ξ ξ Ο ο Π π Ρ ρ Σ σ ς Τ τ Υ υ Φ φ Χ χ Ψ ψ Ω ω · Ά ά Έ έ Ή ή Ί ί Ό ό Ύ ύ Ώ ώ · Ϊ ϊ Ϋ ϋ · ΐ ΰ Æ æ Đ(D with stroke) đ Ð(eth) ð ı Ł ł Ø ø Œ œ ß Þ þ · Á á Ć ć É é Í í Ĺ ĺ Ḿ ḿ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź · À à È è Ì ì Ǹ ǹ Ò ò Ù ù · İ Ż ż ·  â Ĉ ĉ Ê ê Ĝ ĝ Ĥ ĥ Î î Ĵ ĵ Ô ô Ŝ ŝ Û û · Ä ä Ë ë Ï ï Ö ö Ü ü Ÿ ÿ · ǘ ǜ ǚ ǖ · caron/háček: Ǎ ǎ Č č Ď ď Ě ě Ǐ ǐ Ľ ľ Ň ň Ǒ ǒ Ř ř Š š Ť ť Ǔ ǔ Ž ž · breve: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț