1 / 43

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 >

yule
Download Presentation

HTML & CSS 겉핥기

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML & CSS겉핥기 2012 SUMMER SPARCS

  2. PANDA • SPARCS 11 • 잉여킹 • @Pandanism

  3. HTML Hyper Text Markup Language

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

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

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

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

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

  9. 그래서 뭘 쓰나요 • 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>

  10. 그래서 뭘 쓰나요 • 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>

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

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

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

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

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

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

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

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

  19. 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 (대부분의 태그 허용)

  20. 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>

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

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

  23. CSS Cascading Style Sheets

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

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

  26. 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>

  27. 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>

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

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

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

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

  32. 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

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

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

  35. 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>

  36. 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>

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

  38. 모바일아라 • <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"> • ….

  39. 모바일아라 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

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

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

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

  43. 감사합니다

More Related