로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!== 기본 문법 규칙 == 더 자세한 내용은 [https://opentutorials.org/course/2418 생활코딩 CSS 튜토리얼]이나 [https://www.w3schools.com/css/ W3schools CSS부분] 등을 참조하시면 됩니다. 기본적으로 CSS 편집 규칙은 다음과 같습니다. <syntaxhighlight lang="css"> tagname { 'property1':'set1'; 'property2':'set2'; } </syntaxhighlight> 태그네임은 "div"같은 태그의 이름, Property는 속성명, set은 각 Property에 대해 원하는 값을 표현합니다. 예를 들면 <code><nowiki><div style="background-color:yellow;"></div></nowiki></code>를 의미하는 코드는 style 부분을 아래처럼 지정할 수 있습니다. <syntaxhighlight lang="css"> div { background-color:yellow; } </syntaxhighlight> === id, class 선택자 === ID와 Class 값은 각 태그에 고유한 이름을 붙입니다. 다만 ID값은 문서 내부에 오직 하나의 태그에만 붙일 수 있지만 class값은 문서 내부에 여러 태그에 붙일 수 있다는 차이가 있습니다. ID값은 <nowiki>#</nowiki>idname, class값은 .classname 형식으로 붙일 수 있습니다. 예를 들면 <code><nowiki><span id="libre-no-1" style="color:#4188f1;"></span></nowiki></code> 같은 경우 아래와 같은 방식으로 표현할 수 있습니다. <syntaxhighlight lang="css"> #libre-no-1 { /* 글자색을 libre 기본 색으로 바꾸는 코드 */ color:#4188f1; } </syntaxhighlight> 마찬가지로 <code><nowiki><span class="libre-holic" style="color:#4188f1;"></span></nowiki></code> 같은 경우는 아래와 같은 방식으로 표현이 가능합니다. <syntaxhighlight lang="css"> .libre-holic { /* 글자색을 libre 기본 색으로 바꾸는 코드 */ color:#4188f1; } </syntaxhighlight> === 자손 선택자 및 자식 선택자 === 특정 태그 A에 둘러싸인 부분에 태그 B가 있을 때 B를 A의 자손 선택자, A를 B의 조상 선택자라고 부릅니다. 특히 A와 B 사이에 감싼 태그가 없는 경우에는 B를 A의 자식 선택자, A를 B의 조상 선택자라고 부릅니다. 특정 조상선택자 A 안에 자식 선택자 B를 선택할 경우 띄어쓰기를 통해 (조상) (자식) 선택자 형태로 지정할 수 있습니다. 예를 들면 아래 HTML 태그를 보면 알 수 있습니다. <syntaxhighlight lang="xml"> <a href="https://librewiki.net/">리브레 위키</a> <ul> <li> <a href="https://librewiki.net/wiki/도움말:위키_문법">위키 문법</a> <li> <a href="https://librewiki.net/wiki/도움말:Tex_문법">Tex 문법</a> </ul> </syntaxhighlight> 여기서 단순히 선택자 a를 사용하면 위의 리브레 위키 링크까지 영향을 받습니다. 그러면 ul 태그 안의 a 태그의 스타일만 바꾸기 위해서는 다음과 같이 지정하면 됩니다. <syntaxhighlight lang="css"> ul a{ /*글자색 초록색으로 */ color:green; } </syntaxhighlight> 또는 a 태그가 li 태그 바로 아래에 있을 때만 글자색을 바꾸게 지정할 수도 있습니다. 자식 선택자는 ">" 기호를 사용합니다. <syntaxhighlight lang="css"> li>a{ /*글자색 초록색으로 */ color:green; } </syntaxhighlight> === 동시 선택자 === 선택자를 붙여서 서술할 경우 선택자 모두에 해당되는 것만 집어넣을 수 있습니다. 예를 들어 div 태그에서 클래스명이 "libre xtype"인 객체는 다음과 같이 선택하면 됩니다. <syntaxhighlight lang="css"> div.libre.xtype{ /*글자 기울임 */ font-style:italic; } </syntaxhighlight> === 병렬 선택자 === 반점(,)을 이용해서 여러 선택자에 같은 효과를 집어넣을 수 있습니다. 예를 들면 클래스명이 "libre-1"과 "libre-2"로 지정된 선택자에 동등한 효과를 주기 위해서는 다음과 같은 코드를 사용하시면 됩니다. <syntaxhighlight lang="css"> .libre-1, .libre-2{ /*글자를 굵게 */ font-weight:bold; } </syntaxhighlight> === 속성 선택자 === 쌍점 :를 이용해 마우스 속성을 선택할 수 있습니다. <syntaxhighlight lang = "css"> a:active {color: #FF0000} /*클릭 중인 링크 */ a:hover{color: #7F7F7F; text-decoration: underline;} /* 마우스 위 얹을 때 */ a:visited{color: #FF00FF;} /* 이미 방문한 링크에 대한 속성 추가 */ </syntaxhighlight> === 특정 속성 제거할 때 사용하기 === tag:not(속성명)을 이용해서 속성명이 없는 것을 설정할 수 있습니다. 다음과 같은 경우 하이라이트된 부분에만 속성이 적용됩니다. {| |width="60%"|코드 <syntaxhighlight lang ="xml" line highlight=2,4,5> <div class="selected">테스트</div> <div class="">예제</div> <div class="selected">보기</div> <div class="not-selected">선택된 부분에</div> <div class="">속성이 적용</div> </syntaxhighlight> | CSS <syntaxhighlight lang ="css"> div:not(.selected){ /*selected 클래스 미적용 */ font-weight:bold; } </syntaxhighlight> <br /><br /> |} === n번째 순번 지정시 사용 === 다음과 같은 속성들은 특정한 순번에서 지정할 때 사용됩니다. 태그명:속성함수(N)이며, N은 특정한 숫자거나 odd(홀수), even(짝수), 정수 A, B에 대해 An+B(예시 : 2n+3 - 3,5,7,...번째에 지정가능.) 형태로 지정할 수 있습니다. * tag:nth-of-type(N) 태그명이 tag이면서 N번째 순번의 태그에 모두 적용됩니다. 특히 tag:first-of-type은 tag:nth-of-type(1)을 의미합니다. * tag:nth-last-of-type(N) 태그명이 tag이면서 끝에서 N번째 순번의 태그에 모두 적용합니다. 특히 tag:last-of-type은 tag:nth-last-of-type(1)을 의미합니다. * tag:nth-child(N) 태그명이 tag이면서 tag의 부모 태그 중 N번째 순번의 자식일 때 적용됩니다. 특히 tag:first-child는 tag:nth-of-child(1)을 의미합니다. nth-of-type과는 달리 '''태그 자신이 반드시 부모의 N번째 자식이어야''' 적용됩니다. * tag:nth-last-child(N) 태그명이 tag이면서 tag의 부모 태그 중 끝에서 N번째 순번의 태그에 모두 적용합니다. 특히 tag:last-child는 tag:nth-last-child(1)을 의미합니다. 역시 nth-last-of-type과는 달리 '''태그 자신이 반드시 마지막에서 부모의 N번째 자식이어야''' 적용됩니다. 참조 : [http://nthmaster.com/ nth요소 관련 정보] nth-of-type vs nth-child의 의미 차이 보기 {| |width="50%"|코드 <syntaxhighlight lang ="xml" line> <div>div[1] <span>div[1]>span[1]</span> <p>div[1]>p[1]</p> <p>div[1]>p[2]</p> <div>div[1]>div[1]</div> <div>div[1]>div[2]</div> <span>div[1]>span[2]</span> </div> <p>p[1]</p> <p>p[2]</p> <div>div[2]</div> <p>p[3]</p> <p>p[4] <span>p[4]>span[1]</span></p> <div>div[3]</div> <p>p[5]</p> <p>p[6]</p> <div>div[4] <div>div[4]>div[1]</div> <p>div[4]>p[1]</p> <div>div[4]>div[2]</div> </div> </syntaxhighlight> | CSS <syntaxhighlight lang ="css"> p:nth-of-type(2), div:last-of-type{ font-style:italic } /* 두 번째로 나타나는 p는 기울임 */ /* 마지막으로 나타나는 div는 기울임 */ p:first-child, div:nth-last-child(2), span:last-of-type{ font-weight:bold } /* p가 부모 태그의 첫 번째 자식일 때는 굵게 */ /* div가 부모 태그의 마지막에서 2번째 태그일 때 굵게 */ </syntaxhighlight> <br /><br /> 결과 : <br /> 왼쪽은 기울인 글씨로 표시된 부분, 오른쪽은 굵은 글씨로 표시된 부분이 정답이 됩니다. |} {| |width="50%"|기울어지는 부분 <syntaxhighlight lang ="xml" line highlight=4,6,10,18,19,20,21,22> <div>div[1] <span>div[1]>span[1]</span> <p>div[1]>p[1]</p> <p>div[1]>p[2]</p> <div>div[1]>div[1]</div> <div>div[1]>div[2]</div> <span>div[1]>span[2]</span> </div> <p>p[1]</p> <p>p[2]</p> <div>div[2]</div> <p>p[3]</p> <p>p[4] <span>p[4]>span[1]</span></p> <div>div[3]</div> <p>p[5]</p> <p>p[6]</p> <div>div[4] <div>div[4]>div[1]</div> <p>div[4]>p[1]</p> <div>div[4]>div[2]</div> </div> </syntaxhighlight> | 굵어지는 부분 <syntaxhighlight lang ="xml" line highlight=6,7,14> <div>div[1] <span>div[1]>span[1]</span> <p>div[1]>p[1]</p> <p>div[1]>p[2]</p> <div>div[1]>div[1]</div> <div>div[1]>div[2]</div> <span>div[1]>span[2]</span> </div> <p>p[1]</p> <p>p[2]</p> <div>div[2]</div> <p>p[3]</p> <p>p[4] <span>p[4]>span[1]</span></p> <div>div[3]</div> <p>p[5]</p> <p>p[6]</p> <div>div[4] <div>div[4]>div[1]</div> <p>div[4]>p[1]</p> <div>div[4]>div[2]</div> </div> </syntaxhighlight> |} === 형제 선택자 === 선택자1+선택자2 형식으로 사용하면 선택자1 뒤에 나오는 선택자 2를 선택하고, 선택자1~선택자 2 형식으로 입력하면 선택자 1 다음의 형제 선택자 2를 고릅니다. <syntaxhighlight lang="css"> /* 인접 형제 선택자 - h2 바로 다음에 오는 형제 선택자만 */ h2+ul {background:green;} /* 일반 형제 선택자 - h1 다음에 오는 모든 형제 선택자 */ h2~ul {color:#7f0000;} </syntaxhighlight> === 애트리뷰터 선택자 === 대괄호 [attribute]를 이용해서 특정 애트리뷰트를 만족시키는 객체의 CSS를 줄 수 있습니다. [attribute] 단독으로 사용하면 attribute가 있는 것들, [attribute="값"] 형태로 사용하면 attribute가 특정한 값들을 바꿀 수 있습니다. 예시 : color가 검은색인 글씨를 빨간색으로 바꾸는 방법 <syntaxhighlight lang="css"> * [color="black"], * [color="#000000"], * [color=rgb(0,0,0)]{ color:red;} </syntaxhighlight> 또한 애트리뷰트 선택자는 등호 뿐 아닌 ~=, |=, ^=, $=, *=으로 표시할 수 있고, 각각 다음과 같은 의미를 나타냅니다. {|class="wikitable" |+ 애트리뷰트 선택자의 의미 |- ! 선택자 !! 의미 |- | [attribute~="value"] || 애트리뷰트의 값에서 특정 단어 value를 포함하는 경우. [border ~='solid']라고 지정하면 border가 solid 속성으로 지정된 모든 태그를 선택할 수 있습니다. |- | [attribute<nowiki>|</nowiki>="value"] || 애트리뷰트의 값에서 특정 단어 value로 시작하는 경우. 예를 들면 [class<nowiki>|</nowiki>='top']이라고 지정하면 top으로 시작하는 클래스 top, top-ten 등을 선택할 수 있습니다. |- | [attribute^="value"] || 애트리뷰트의 값에서 특정 문자열 value로 시작하는 경우. 예를 들면 [class^='t']라고 입력하면 클래스 중 t로 시작하는 모든 객체들에 대해 지정할 수 있습니다. |- | [attribute $="value"] || 애트리뷰트의 값에서 특정 문자열 value로 끝나는 경우. [class$='end']라고 입력하면 클래스 값이 'end'로 끝나는 모든 객체 (end, backend, dead-end 등등)에 대해 지정할 수 있습니다. |- | [attribute *="value"] || 애트리뷰트의 값에서 특정 문자열 value를 포함하는 경우. [class*='lap']이라고 입력하면 클래스 값 중 lap이라는 문자열을 포함하는 객체 (lap, slap, lapse, lap-time 등등)에 대해 지정할 수 있습니다. |} === 미디어 연결 선택자 === <code><nowiki>@import url(' ') (미디어 쿼리);</nowiki></code> 형식으로 URL에 지정된 CSS를 가져올 수 있습니다. 아래 표는 미디어 쿼리 목록입니다. {|class="wikitable" |- ! 미디어 쿼리 !! 역할 |- | all || 모든 장치에서 균일하게 보여줍니다. 생략시 all이 기본입니다. |- | tv || 텔레비전 유형의 장치에 적용합니다. |- | screen || 디지털 기기의 화면에 띄울 때 적용합니다. |- | print || 인쇄용 페이지에 적절한 요소 |- | speech || 스크린 리더에 적용되는 요소 |- | and, or, not || 논리 연산자를 적용할 수 있습니다. 예를 들면 print or speech |- | min-width:(최소넓이) || 최소 넓이가 얼마일 때 적용 |- | max-width:(최대넓이) || 최대 넓이가 얼마일 때 적용 |} 또한 <code><nowiki>@media (미디어 쿼리)</nowiki></code>선택자를 이용하면 특정 미디어 쿼리를 만족할 때 CSS 조건을 바꿀 수 있습니다. 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 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: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț