HTML & CSS 겉핥기

HTML & CSS겉핥기 2012 SUMMER SPARCS

PANDA • SPARCS 11 • 잉여킹 • @Pandanism

HTML Hyper Text Markup Language

HTML • Hyper Text Markup Language 웹브라우저에서 웹페이지와 기타 정보를 보여주기 위한 markup language

어디서 많이 본 것 • <html> • <head> • <title> 팬더홈</title> • </head> • <body> • 안녕하세요. <br> • 팬더홈입니다. <br> • <imgsrc=“panda.jpg”> <br> • <a href=“http://sparcs.org”> SPARCS </a> • </body> • </html>

HTML tags • < , > , 태그이름 으로 이루어지며, • 보통 시작태그와 종료태그가 한 쌍을 이룬다. • <tagname> 글, 이미지 등의 hypertext </tagname> 시작태그 종료태그

HTML elements • Tag를 포함한 • 시작태그와 종료태그 사이에 있는 모든 것들. • <tagname> 글, 이미지 등의 hypertext </tagname> element

HTML structure html • <html> • <head> • 중략1 • </head> • <body> • 중략2 • </body> • </html> head 중략1 body 중략2 (실제로 보이는 영역)

그래서 뭘 쓰나요 • name=“value” • <span style="color:#ff0062"> 핫핑크로 보입니다</span> • <strong>강조됩니다 </strong> • <p style="font-size:20px">폰트 크기 20px의 paragraph</p> • <p style="text-align:center">텍스트를 중앙정렬 했습니다.</p> • <p style="letter-spacing: -2px">자간을 줄여보았습니다. </p>

링크를 걸어보자 • <a href=“주소”>보여줄 말</a> • <a href=“http://sparcs.org”>스팍스</a> • <a href=“http://sparcs.org” target="_blank“> • <font size=16px>스팍스</font> • </a>

이미지를 보여주자 • <imgsrc=“이미지 url”> • <imgsrc=“panda.jpg”> • <imgsrc=http://images.wikia.com/animals/images/1/19/ Giant_Panda.jpg>

메뉴를 만들자 • <ul> • <li>메뉴는</li> • <li>보통</li> • <li>이걸로씀</li> • </ul> <ol> <li>이건</li> <li>번호가</li> <li>붙어나옴</li> </ol>

의미를 살린 태그 • Heading • <h1> </h1> • <h2> </h2> • 강조 • <em></em> • <strong></strong>

Doctype • <!DOCTYPE>을 선언해서 문서형식을 지정한다. • 브라우저에게 이 document의 종류를 알려주는 역할. <!DOCTYPE html> HTML 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ ”http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 strict (<b> 등 markup태그및 일부 속성 사용 불가) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 transitional (대부분의 태그 허용)

Meta tag • 이 document에 대한 metadata(정보)를 제공함. • <head> • <meta name="description" content=“introduction to panda" /> • <meta name="keywords" content=“panda, sparcs” /> • <meta name="author" content=“Panda Cho" /> • <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> • </head>

charset • 인코딩을 지정한다. • <head> • <meta name="author" content=“Panda Cho" /> • <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> • </head>

CSS Cascading Style Sheets

CSS • Cascading Style Sheets HTML elements를 어떻게 보여줄 것인가에 대한 정의만 따로 모아놓은 것.

CSS • HTML과 별개로 있는 external style sheets. • html에서 css파일을 불러와서 씀. <head><link rel="stylesheet" type= "text/css" href=“style.css" /></head> 속성을 정의하는 애들이 잔뜩 써있음 어쩌구.html style.css

Style을 분리한다 • <div style="text-align: center; color: #ff0062; font-size: 20px;"> 핫핑크로보입니다. 중정에20px </div> • <div style="letter-spacing: -1px; font-size: 15px; text-decoration: underline;"> 자간 -1px, 밑줄 속성을 줬고 크기는 15px </div>

Style을 분리한다 • .pink { • text-align: center; • color: #ff0062; • font-size: 20px; • } • .under { • letter-spacing: -1px; • font-size: 15px; • text-decoration: underline; • } • <div class=“pink”> • 핫핑크로보입니다. 중정에20px </div> • <div class=“under”> • 자간 -1px, 밑줄 속성을 줬고 크기는 15px</div>

CSS 왜 쓰나 • 유지보수가 쉽다 • CSS에서 수정하면 전체 페이지에 적용됨 • content와 style이 분리되어 있어서 수정이 편함 • 가벼움 • 중복되는 코드가 줄어든다.

CSS 어떻게 쓰나 • Selector { • attribute: value; • attribute: value; • attribute: value; • }

CSS 어떻게 쓰나 • body { • font-family: serif; • background-color: #7700e0; • color: #ffffff; } • a { text-decoration: none; • color: yellow; • font-size: 20px;} • ul { list-style: none; }

id, class • id는 포괄적으로 의미적 구분을 할 때, • class는 좀 더 실제적인 구분을 할 때 쓰인다. #menu { list-style: none ; font-family: 맑은고딕, serif; } .main_menu{ font-size: 20px; color: red; } .sub_menu{ font-size: 13px; } <div id=“menu”> <div class=“main_menu”> … </div> <div class=“sub_menu”> … </div> </div> html css

일단div나 쓰자 • 레이아웃등 덩어리의 기본은 div. • <div id=“이름”> … </div> • <div class=“이름”> … </div> • table은 약간 느리고 • frame은 각각이 별개의 html이라 • 자유도/표현력이 떨어짐. div div div div div

Padding, margin • padding: 안쪽 여백 • border: 테두리 • margin: 바깥 여백 margin border padding 내용물은 padding 안쪽에 여백 없이 꽉 채워지는 느낌으로 있음. Padding이 0이면 border와 글자가 거의 맞닿을 정도.

Padding, margin #content { margin: 10px 7px; padding: 15px; background-color: white; } .intro { background-color: #dddddd; font-weight: bold; } .main { padding: 5px; font-size: 15px; border: 1px solid black; } .sub { padding: 10px; margin: 10px 5px; background-color: #dddddd; } .hotpink{ color: #ff0062; } .center { text-align: center; } • <div id="content"> • <div class="intro"> • <span class="hotpink"> 핫핑크로 보입니다. 패딩을 안주면 이꼴남</span> • </div> • <div class="main"> • <p class="center">텍스트를 중앙정렬 했습니다. 얜 패딩5px씩.</p> • <p>얘는 center 이름이 안붙은plain한 paragraph</p> • <span class="hotpink">아무때나hotpink이름만 주면 핫핑크가 됨</span> • <span> 그냥 쓰면 기존에 정해진 색깔로</span> • </div> • <div class="sub"> • <a href="http://sparcs.org">스팍스로 가는 링크</a> • 이건 padding에 margin도 좀 들어감. • </div> • </div>

block, inline • block: 아래위로 여백을 가지며 • 같은 줄에 다른 element가 못 옴. div, p, h 등. • inline: 같은 줄에 여러 element가 옴. span 등. • display: block; • display: inline; • 속성을 줘서 바꿀 수도 있다. block block inline inline

모바일아라 • <div id="header"> … • <div id="nav"> <ul>..</ul> </div> • </div> • <div id="contentWrap"> • <div class="userInfo"> …. </div> • <div id="sec_tb"> <div class="h_area">.. </div> • <div class="tb_list"> <ul>…</ul> </div> • </div> • <div id="sec_wb"> • <div class="h_area"> …. </div> • <div class="wb_list"> <ul>…</ul> </div> • </div> • <div id="sec_hot"> • ….

모바일아라 div id: header • <div id="header"> … • <div id="nav"> <ul>..</ul> </div> • </div> • <div id="contentWrap"> • <div class="userInfo"> …. </div> • <div id="sec_tb"> <div class="h_area">.. </div> • <div class="tb_list"> <ul>…</ul> </div> • </div> • <div id="sec_wb"> • <div class="h_area"> …. </div> • <div class="wb_list"> <ul>…</ul> </div> • </div> • <div id="sec_hot"> • …. div id: nav div id: userInfo div class: h_area div class: tb_list div class: sec_tb div id: content_wrap

HTML5, CSS3 • 아직 개발 및 적용 진행 중 • 나으리…웹표준…웹표준 좀…. • IE 강제 업데이트 빨리 현기증나여

ASSIGNMENT • 자기소개 페이지 • - 이름, 사진, 소개글 포함 • 링크 페이지 • - 자주가는 사이트 3개 • 메뉴는 list를 사용. • 메뉴와 내용은 서로 다른 division으로. • 모든 style은 CSS에 담을 것. 내소개 링크 내용

References • 구글링하거나 여기서 찾으세요 • http://www.w3schools.com/ • 호떡 세미나 • http://sparcs.org/seminar/#hodduc-20110504_1

끝 감사합니다

HTML & CSS 겉핥기