Well-made-plush (토론 | 기여) 편집 요약 없음 |
Well-made-plush (토론 | 기여) 잔글편집 요약 없음 |
||
22번째 줄: | 22번째 줄: | ||
하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <code><style></code> 태그 또는 <code><link rel="stylesheet" href="(주소)"></code> 태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. | 하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <code><style></code> 태그 또는 <code><link rel="stylesheet" href="(주소)"></code> 태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다. | ||
요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) | 요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) [[디버깅]]도 할 수 있다. 물론 현재 페이지에 CSS를 수정했다 하더라도 새로고침을 하면 다시 원래대로 돌아오니 참고하자. | ||
{{-}} | {{-}} | ||
==그래서 어떻게 HTML 문서에 CSS를 넣는건데요?== | ==그래서 어떻게 HTML 문서에 CSS를 넣는건데요?== | ||
==ID와 Class== | |||
==흔히 쓰이는 CSS 속성들을 알려주세요.== | ==흔히 쓰이는 CSS 속성들을 알려주세요.== | ||
===Text-align 속성=== | ===Text-align 속성=== |
2015년 5월 30일 (토) 09:16 판
HTML
HTML은 모르면 간첩일 정도로 웹 페이지의 가장 기본적인 틀이자 알파이다!
새 HTML 문서를 만들어 보자!
CSS
CSS는 HTML 언어로 미리 짜여진 페이지를 꾸미는 데 아주 유용한 언어이다. 당장 이 리브레 위키만 봐도, 아니 흔히 볼 수 있는 다른 사이트만 해도 CSS가 안 쓰이는 곳은 없다고 무방하다.
CSS의 기본적인 구조
평소에 눈에 잘 안띄는 CSS 값을 밝혀 보자!
다음과 같은 방법으로 어떻게 CSS가 굴러가는지 직접 두 눈으로 보면 큰 도움이 된다.
에디터 모드
리브레 위키 위키방이나 익명게시판의 댓글 쓰기에서 '에디터 선택하기'를 클릭해서 '에디터 모드'로 바꾸자. 그리고 아무 글자나 친 다음에 위에 보이는 각종 버튼을 클릭하거나 기능을 이용해서 글자를 최대한 꾸며보자.
그 예시로 리브레 위키 슬로건 "펜을 쥔 모든 손에 권리를."을
펜을 쥔 모든 손에 권리를.
위와 같이 꾸민 다음에 'HTML 편집기' 버튼을 눌러서 확인해보면
<u><em><strong><span style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u>
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 <u>
<em>
<strong>
<span>
태그 안에 들어있는 저 강조된 style
과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다.
요소 검사
하지만 위 에디터 모드에서 확인할 수 있는 CSS가 전부는 아니며, <style>
태그 또는 <link rel="stylesheet" href="(주소)">
태그를 지원하지 않는 각 리브레 위키 문서들, 댓글란 등등을 제외하면 별로 권장하지 않는 방법이기도 하다. 따라서, 실제로 적용되는 CSS를 직접 두 눈으로 보고싶다면 원하는 사이트에서 '요소 검사'를 통해 확인해야 한다.
요소 검사를 하는 방법은 간단하다. 요소를 확인하고 싶은 구간에 우 클릭을 한 다음에 '요소 검사'를 클릭하면 된다. 그러면 오른쪽 아래에 있는 규칙에서 해당 태그에 어떤 CSS가 적용되었는지 알 수 있고, 또한 그것을 직접 조작해서(!) 디버깅도 할 수 있다. 물론 현재 페이지에 CSS를 수정했다 하더라도 새로고침을 하면 다시 원래대로 돌아오니 참고하자.