시리즈:중급 프로그래밍 시리즈/웹 클라이언트 디자인 편집하기

편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.

편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.

최신판 당신의 편집
50번째 줄: 50번째 줄:
다음과 같은 방법으로 어떻게 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>}}
{{인용문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 편집기}} 버튼을 눌러서 확인해보면
위와 같이 꾸민 다음에 'HTML 편집기' 버튼을 눌러서 확인해보면
{{인용문2|<nowiki><u><em><strong><span style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u></nowiki>}}
{{인용문2|<nowiki><u><em><strong><span style="color: rgb(0, 158, 37); font-size: 16px; font-family: Verdana,Geneva,sans-serif;">펜을 쥔 모든 손에 권리를.</span></strong></em></u></nowiki>}}
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code><nowiki><u></nowiki></code>|밑줄}}, {{Ruby|<code><nowiki><em></nowiki></code>|글씨 기울이기}} 그리고 {{Ruby|<code><nowiki><strong></nowiki></code>|굵은 글씨}} 태그가 보이긴 하지만 <code><nowiki><span></nowiki></code>태그 안에 들어 있는 저 <code>style</code>과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다.
다음과 같은 HTML 코드를 확인할 수 있다. 중간에 {{Ruby|<code><nowiki><u></nowiki></code>|밑줄}}, {{Ruby|<code><nowiki><em></nowiki></code>|글씨 기울이기}} 그리고 {{Ruby|<code><nowiki><strong></nowiki></code>|굵은 글씨}} 태그가 보이긴 하지만 <code><nowiki><span></nowiki></code>태그 안에 들어 있는 저 <code>style</code>과 그 속성들을 주목하라! 이것이 우리가 배우게 될 CSS가 적용된 비교적 접하기 쉬운 예시라 할 수 있다.
리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포됩니다(자세한 내용에 대해서는 리브레 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요.
글이 직접 작성되었거나 호환되는 라이선스인지 확인해주세요. 리그베다 위키, 나무위키, 오리위키, 구스위키, 디시위키 및 CCL 미적용 사이트 등에서 글을 가져오실 때는 본인이 문서의 유일한 기여자여야 하고, 만약 본인이 문서의 유일한 기여자라는 증거가 없다면 그 문서는 불시에 삭제될 수 있습니다.
취소 편집 도움말 (새 창에서 열림)

| () [] [[]] {{}} {{{}}} · <!-- --> · [[분류:]] · [[파일:]] · [[미디어:]] · #넘겨주기 [[]] · {{ㅊ|}} · <onlyinclude></onlyinclude> · <includeonly></includeonly> · <noinclude></noinclude> · <br /> · <ref></ref> · {{각주}} · {|class="wikitable" · |- · rowspan=""| · colspan=""| · |}

이 문서에서 사용한 틀: