경고 : 최신판이 아닙니다. 이 문서의 오래된 판을 편집하고 있습니다. 이것을 저장하면, 이 판 이후로 바뀐 모든 편집이 사라집니다. 로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!{{쉽게 알 수 있다 시리즈|이 문서는 정말 쉽습니다.|문서의 내용이 너무 쉬워서 오늘부터 프로그래밍 할 수 있을 것 같습니다.}} {{토막글}} =[[HTML]]= '''HTML'''은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다! ==새 HTML 문서를 만들어 보자!== =[[CSS]]= '''CSS'''는 HTML 언어로 미리 짜여진 페이지를 '''꾸미는 데''' 아주 유용한 언어이다. 당장 이 [[리브레 위키]]만 봐도, 아니 흔히 볼 수 있는 다른 사이트만 해도 CSS가 안 쓰이는 곳은 없다고 무방하다. ==CSS의 기본적인 구조== ==평소에 눈에 잘 안띄는 CSS 값을 밝혀 보자!== 다음과 같은 방법으로 어떻게 CSS가 굴러가는지 직접 두 눈으로 보면 큰 도움이 된다. ===에디터 모드=== 리브레 위키 위키방이나 익명게시판의 댓글 쓰기에서 '에디터 선택하기'를 클릭해서 '에디터 모드'로 바꾸자. 그리고 아무 글자나 친 다음에 위에 보이는 각종 버튼을 클릭하거나 기능을 이용해서 글자를 최대한 꾸며보자. 그 예시로 리브레 위키 [[슬로건]] "펜을 쥔 모든 손에 권리를."을 {{인용문2|<u><em><strong><span style{{=}}"color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u>}} 위와 같이 꾸민 다음에 'HTML 편집기' 버튼을 눌러서 확인해보면 {{인용문2|<u><em><strong><span '''style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;"'''>펜을 쥔 모든 손에 권리를.</span></strong></em></u>}} 다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code><u></code>|밑줄}}, {{Ruby|<code><em></code>|글씨 기울이기}} 그리고 {{Ruby|<code><strong></code>|굵은 글씨}} 태그가 보이긴 하지만 <code><span></code>태그 안에 들어있는 저 강조된 <code>style</code>과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다. ===요소 검사=== [[파일:CSSelement.png|thumb|[[파이어폭스]]에서 <code><h2></code> 태그에 요소 검사를 하고있는 모습.]] 하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <code><style></code> 태그 또는 <code><link rel="stylesheet" href="(주소)"></code> 태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. 요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) 직접 [[디버깅]]도 할 수 있다. 물론 현재 페이지에 CSS를 수정했다 하더라도 새로고침을 하면 다시 원래대로 돌아오니 참고하자. {{-}} ==그래서 어떻게 HTML 문서에 CSS를 넣는건데요?== ==흔히 쓰이는 CSS 속성들을 알려주세요.== ===Text-align 속성=== ===Display 속성=== ===Margin과 Padding 속성=== ===Position 속성=== ===Float 속성=== ==미디어 쿼리가 뭔가요?== =[[JavaScript]]= {{각주}} {{쉽게 배우는 프로그래밍 입문}} 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 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: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț 이 문서에서 사용한 틀: 틀:- (원본 보기) (준보호됨)틀:-- (원본 보기) (준보호됨)틀:Ruby (원본 보기) (준보호됨)틀:ㅊ (원본 보기) (준보호됨)틀:가로목록 (원본 보기) (준보호됨)틀:각주 (원본 보기) (준보호됨)틀:고지 상자 (원본 보기) (보호됨)틀:루비 (원본 보기) (준보호됨)틀:버튼 (원본 보기) (준보호됨)틀:빈 문단 (원본 보기) (준보호됨)틀:쉽게 알 수 있다 시리즈 (편집) 틀:인용문2 (원본 보기) (준보호됨)틀:취소선 (원본 보기) (준보호됨)틀:키 (원본 보기) (준보호됨)시리즈:쉽게 배우는 프로그래밍 입문 (편집)