HTML과 CSS HTML과 CSS 세미나에 오신 것을 환영합니다. hodduc@sparcs

Hodduc @hodduci (간단한 자기소개) 3번째 세미나? 공개 세미나는 처음 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

Review : 복습 HTML seminar by casper 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

앞으로 배우게 될 것들 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

HTML을 이용한 마크업 HTML(2) CSS로 레이아웃 만들기 HTML(1) Advanced CSS 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

markup 화면에서 어떻게 보여야 할 것인지를 나타내기 위해 파일의 특정 위치에 삽입되는 일련의 문자들이나 기호들 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

MARKUP 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

“ ” list 거의 모든 웹 페이지에서 볼 수 있는 필수요소 “ ” list 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

Home <br /> About Us <br /> Calendar <br /> … Home <br /> About Us <br /> Calendar <br /> …. Login <br /> 방법 1. <br />을 사용해 목록처럼 “보이게” 만들기 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

How? 글씨 크기 바꾸기 버튼처럼 보이게 꾸미기 마우스를 올려뒀을 때 색 반전 시키기 …… 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

가장 큰 걸림돌 감싸는 태그가 없다 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

몇 개? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<li> Home </li> <li> About Us </li> <li> Calendar </li> … <li> Login </li> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

잘 되네요! 잘 되는 것처럼 보이죠? 하지만 어쩌면 사소한, 하지만 매우 중요한 문제가 남아있습니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

한 리스트와 다른 코드의 분리 “이 항목 전체는 하나의 리스트입니다!” 바로 이 리스트를 둘러쌀 만한 것이 없다는 것이죠. 다시 말해 이 리스트와 코드 안의 다른 부분을 분리할 수 없게 됩니다. HTML 마크업의 기본은, 같은 의미를 가지는 것은 같은 Element나 같은 ID, 같은 Class를 공유하도록 만들고 서로 다른 의미를 가지는 것은 반드시 서로 분리하는 것입니다. 한 리스트와 다른 코드의 분리 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

의미를 살린 마크업 Semantics “이 목록에 속한 항목은 모두 동일한 성격을 띤다”는 의미를 나타낼 수 있어야 합니다. 이는 이 코드를 읽어서 렌더링을 통해 실제로 사용자들에게 보여주는 브라우저나 여러 소프트웨어들에게 “이 항목들은 하나의 목록입니다”라는 것을 정확히 알려주는 것입니다. 이렇게 실제 데이터의 의미에 맞도록 구조를 설계하고 나면, 이것을 이쁘게 잘 보여주는 것은 당신의 코드를 읽어내는 브라우저의 몫입니다. 의미를 살린 마크업 Semantics 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<ul id=“Navigation”> <li> Home </li> <li> About Us </li> <li> Calendar </li> … <li> Login </li> </ul> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

이제 불릿도 이쁘게 잘 표시되고, 각 Element가 명확한 의미를 담고 있는 코드를 완성했습니다. 글꼴 크기를 키워도 잘 동작하는 것을 보실 수 있습니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

(사실 지난 시간에 다 했어요) 사실 li를 감쌀 수 있는 태그는 ul뿐만이 아닙니다. Ol이라는 것도 있고, 사실 DL도 있습니다. DL에 대해서는 나중에 설명하도록 하죠. ul? ol? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

불릿이 너무 괴상해요! 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<style type=“text/css”> ul { list-style: none; } </style> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<style type=“text/css”> ul { list-style: none; padding-left: 0; } </style> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<style type=“text/css”> ul { list-style-image: url(arrow <style type=“text/css”> ul { list-style-image: url(arrow.gif); } </style> 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

메뉴바 만들기 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

#Navigation { list-style: none; padding: 0; } #Navigation li { float: left; height: 20px; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; background: #242424; color: white; padding: 0 12px; margin: 0 3px;

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

없으면 잠시 휴식! 여기까지 질문? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

headings 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

2011 Spring / Topic Seminar / WEB : hodduc@sparcs

headings 한 단락을 시작하기 전에 그 단락의 내용을 요약해 기술한 것 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<span class=“heading”> SPARCS </span> <span class=“heading”> SPARCS </span> .heading { font-size: 24px; font-weight: bold; color: blue; } 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

의미를 살린 마크업! <span class=“heading”> SPARCS </span> 우리 코드를 살펴보면, CSS를 지원하지 않는 브라우저에서는, ‘heading’이라는 ‘class’를 가진다는 점을 제외하면 일반적인 글과 다를 게 없죠. 다시 말해서, ‘머리글’이라는 의미를 전혀 포함하지 못하게 됩니다. 아까도 설명했지만, 가급적 이런 상황은 피하는 것이 좋겠죠. 특히 검색 엔진의 동작에 대해 고려해봅시다. 보통 검색엔진은 문서의 핵심이라고 생각되는 부분을 키워드로 사용하는데, 이렇게 마크업 하면 이 부분이 앞으로 나올 문서의 키워드라는 사실을 검색 엔진이 알아채기 곤란하겠죠. 의미를 살린 마크업! 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<span class=“heading”> SPARCS </span> <span class=“content”> SPARCS는 컴퓨터와 관련된 다양한 이슈에 관심이 있는 사람들이 모여, 다양한 활동을 통해 자신을 성장시키고, KAIST 학우 들에게 도움이 되는 서비스를 개발하는 KAIST 최고의 컴퓨터 R&S 동아리입니다. </span> 어쨌든 그건 그렇다 치고, 제목을 넣었으니 내용도 넣어봅시다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

어, 그런데 제목과 내용이 붙어서 나오네요. 줄 바꿈이 되어야 하는데… 왜 그럴까요? 정답은 바로, span이 Inline 엘리먼트이기 때문입니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

Block? Inline? 한 줄에 여러 개 올 수 있는가! Block-level element와 Inline-level element의 가장 큰 차이점은 “한 줄에 복수로 올 수 있는가 없는가”입니다. 블록레벨 엘리먼트는 엘리먼트가 나올 때마다 각각 다른 줄에 표시하는 반면, 인라인 엘레먼트는 줄 바꿈이 등장하기 전까지 같은 줄에 표시됩니다. 블록레벨 엘리먼트는 블록레벨과 인라인 엘리먼트를 모두 포함할 수 있습니다. 반면 인라인 엘리먼트는 블록레벨 엘리먼트를 포함할 수 없습니다. Block? Inline? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<span style="border:1px solid black;">Inline-level</div> <div style="border:1px solid black;"> Block-level</div> Div는 대표적인 블록레벨 엘리먼트입니다. 반면, span은 대표적인 인라인 엘리먼트입니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

물론 style 태그를 이용해 얼마든지 바꿀 수도 있습니다. 여기서 제시하는 것은 특별히 명시하지 않았을 때의 기본값입니다. 앞으로 여러 가지 태그를 사용하면서 이것이 블록레벨인지 인라인인지 헷갈릴 때가 많을 텐데, 그럴 땐 반드시 검색해보도록 합시다. 따라서, 결과적으로 앞에서 본 예제를 의도대로 나오게 하기 위해선 span을 p나 div와 같은 block-level element로 감싸야겠죠. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

스타일과 내용 모두 살리기 이 방법은 생각해야 할 게 너무 많네요. 그렇다면 스타일과 내용을 모두 살릴 수 있는, 좋은 방법은 없을까요? 스타일과 내용 모두 살리기 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

<h1> SPARCS </h1> <span class=“content”> SPARCS는 컴퓨터와 관련된 다양한 이슈에 관심이 있는 사람들이 모여, 다양한 활동을 통해 자신을 성장시키고, KAIST 학우 들에게 도움이 되는 서비스를 개발하는 KAIST 최고의 컴퓨터 R&S 동아리입니다. </span> 바로 h1 ~ h6을 이용하면 됩니다. (기억하시는분?) 이 태그를 적절히 사용하면 머리글을 의미에 맞게 나타날 수 있을 뿐만 아니라 색인할 수도 있고, 스타일도 쉽게 입힐 수 있습니다. H1이 가장 중요한, h6이 가장 중요성이 떨어지는 것에 해당합니다. 아, 참고로 h1 ~ h6은 블록 레벨입니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

다시 스팍스 홈페이지로 돌아와서, 스팍스 홈페이지는 어떻게 구현했는지 소스를 들여다봅시다. 우선 상단의 SPARCS는 가장 중요한 부분이므로 h1을 사용해서 마크업했네요. 이후 SPARCS에 오신 것을 환영합니다!를 h2로, “연락하기”를 h3으로, “동아리방”과 “전자우편”을 h4로 마크업한 것을 볼 수 있습니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

휴! 네, 지금 쉬기는 좀 그런 것 같고, 우리 상큼한 지은이 사진을 보면서(…) 잠깐 눈을 풀고 가도록 해요. 이제 오늘 세미나의 마지막 Topic이 남았습니다. 휴! 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

Interactive 사용자와 사이트가 정보를 주고 받는 것 예를 들어, 아라에 들어가기 위해 아이디와 비밀번호를 전송할 때 글을 쓰기 위해 글 제목과 글 내용을 전송할 때, 또 답글을 달 때, 글 검색을 위해 Query를 전송할 때, 비밀번호 변경을 위해 기존 아이디와 새 비밀번호를 전송할 때, 누군가에게 쪽지를 보낼 때, 사용자와 서버가 정보를 서로 전송하고, 받으면서 통신할 필요가 있습니다. 이럴 때 썼던 태그가 있죠. 기억 나시는 분 있나요? Interactive 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

form 네, 바로 form 태그입니다. 오늘의 마지막 Topic은 form을 마크업하는 것입니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

피곤하시죠? 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

다음 기회에.. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

question 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

References 실용예제로 배우는 웹표준 (에이콘 출판사) (“노란색”) CSS 마스터 전략 (에이콘 출판사) 실용예제로 배우는 웹표준 (에이콘 출판사) (“노란색”) CSS 마스터 전략 (에이콘 출판사) (“초록색”) 웹 2.0을 이끄는 방탄웹 (에이콘 출판사) (“파란색”) http://www.w3schools.com 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

책을 읽으세요 그리고 꼭 ‘해보세요’ 저 세 권 책은 정말로 좋은 책들이고, 읽기도 부담스럽지 않은 책입니다. 시간 나시면 동방에서 잘 찾아서, 혹은 구입하셔서 꼭 읽어보시기 바랄게요. 그리고 반드시 실제로 해보시길 바랍니다. 실제로 대부분의 예제는 책에 나오는 것들이기도 하니, 잘 이해가 가지 않으시거든 책을 찾아 보시면 좋을 거에요. 그리고 언제든지 저에게 찾아오시길.  이 세미나에 나오는 대부분의 예제는 “실용 예제로 배우는 웹표준”의 예제를 짜깁기하거나, SPARCS 홈페이지를 비롯한 여러 홈페이지들에서 따온 것입니다. “리스트”는 1장, “머리글”은 2장, “폼”은 5장에 해당합니다. 2011 Spring / Topic Seminar / WEB : hodduc@sparcs

Thank you! hodduc@sparcs 오랜 시간동안 수고하셨습니다. 다음 시간에는 테이블 마크업, Form 마크업, 링크 걸기, 그리고 본격 CSS 스타일링에 대한 내용을 들고 다시 돌아오겠습니다. 감사합니다. Thank you! 2011 Spring / Topic Seminar / WEB : hodduc@sparcs