HTML & CSS 겉핥기 2012 SUMMER SPARCS
PANDA SPARCS 11 잉여킹 @Pandanism
Hyper Text Markup Language HTML Hyper Text Markup Language
HTML Hyper Text Markup Language Hypertext : text displayed on a electronic device with hyperlinks, which may contain tables, images, etc. Markup language: a modern system for annotating a document in a way that is syntactically distinguishable from the text. (format, indexing, link)
어디서 많이 본 것 <html> <head> <title> 팬더홈 </title> </head> <body> 안녕하세요. <br> 팬더홈입니다. <br> <img src=“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>
그래서 뭘 쓰나요 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>
링크를 걸어보자 <a href=“주소”>보여줄 말</a> <a href=“http://sparcs.org”>스팍스</a> <a href=“http://sparcs.org” target="_blank“> <font size=16px>스팍스</font> </a>
이미지를 보여주자 <img src=“이미지 url”> <img src=“panda.jpg”> <img src=http://images.wikia.com/animals/images/1/19/ Giant_Panda.jpg> 상대경로 절대경로
이미지를 보여주자 <img src=“이미지 url”> <img src=“panda.jpg”> <img src=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>
메뉴를 만들자 <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>
의미를 살린 태그 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>
charset 인코딩을 지정한다. <head> <meta name="author" content=“Panda Cho" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head>
Cascading Style Sheets 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> Inline style
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> External style sheet
CSS 왜 쓰나 유지보수가 쉽다 CSS에서 수정하면 전체 페이지에 적용됨 content와 style이 분리되어 있어서 수정이 편함 가벼움 중복되는 코드가 줄어든다.
CSS 어떻게 쓰나 Selector { 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; }
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는 좀 더 실제적인 구분을 할 때 쓰인다. <div id=“menu”> <div class=“main_menu”> … </div> <div class=“sub_menu”> #menu { list-style: none ; font-family: 맑은고딕, serif; } .main_menu { font-size: 20px; color: red; } .sub_menu { font-size: 13px; } Body같은건 단위가 너무 크니까, 부분 부분마다 속성을 주고 싶음. 이럴땐 html에서 각 부분에 이름을 붙여주고, css에서 이름을 selector삼아서 속성을 주면 됨. id는 class보다 상위개념. Id는 이름 앞에 #을 쓰고 class는 .을 쓴다 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이 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 class="sub"> <a href="http://sparcs.org">스팍스로 가는 링크</a> 이건 padding에 margin도 좀 들어감.
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 class="sub"> <a href="http://sparcs.org">스팍스로 가는 링크</a> 이건 padding에 margin도 좀 들어감.
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 id="sec_wb"> <div class="h_area"> …. </div> <div class="wb_list"> <ul>…</ul> </div> <div id="sec_hot"> ….
모바일아라 div id: header div id: nav div id: userInfo div class: h_area <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 id="sec_wb"> <div class="h_area"> …. </div> <div class="wb_list"> <ul>…</ul> </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
끝 감사합니다