WEB HTML CSS Overview

Size: px

Start display at page:

Download "WEB HTML CSS Overview"

루시아 방
6 years ago
Views:

1 WEB HTML CSS Overview 2017 spring seminar bloo

2 오늘의수업은 실습

3 오늘의수업은 이상 : 12:40 목표 : 1:00 밤샘 SPARCS 실습

4 오늘의수업은 근데숙제는많음 화이팅

5 WEB 2017 spring seminar bloo

6 WEB

7 WEB 의원시적형태

8 WEB 의원시적형태

9 질문 못받음 ㅈㅅ

10 HTML 2017 spring seminar bloo

11 HTML 웹을위한언어 HyperText Markup Language Hypertext : 참조 ( 하이퍼링크 ) 를통해독자가한문서에서다른문서로즉시접근할수있는텍스트 Markup Language : 태그등을이용하여문서나데이터의구조를명기하는언어

12 태그 (tag)? <, >, 태그이름으로이루어지며, 보통시작태그와종료태그가한쌍을이룬다. element <tagname> 글, 이미지등의 hypertext </tagname> 시작태그 종료태그

13 HTML structure index.html <!DOCTYPE html> 이문서는 html 문서이다. <html> <head> css, js 등부가적인파일을불러오거나메타데이터를표시 <title> SPARCS 에오신것을환영합니다! </title> </head> <body> 화면에보이는본내용 </body> </html>

14 head <title> </title>: html 문서의제목 <link> : allows to link their document to other resources Ex) css 를 import 할때사용 <script > </script> : include dynamic script and data blocks Ex)JavaScript 를 import 할때사용 <meta> : 기타 metadata

15 Basic tag <h1></h1> ~ <h6></h6> : 큰글씨 -> 작은글씨 <p></p> : paragraph <a></a> : 하이퍼링크태그 <img/> : 이미지태그 <div></div> : 여러 tag 를모아놓은 container(block element) <span></span>: 여러 tag 를모아놓은 container(inline element)

16 그외다양한태그 <ul></ul> : unordered list <ol></ol> : ordered list <li></li> : list element <table></table> : table tag <form></form> : 각종입력 tag 텍스트의미부여하는태그 <strong> </strong> : 글씨를두껍게 <em></em> : 글씨를기울임

17 Example <h1>the Brown Bear</h1> <h3>the Brown Bear</h3> <h6>the Brown Bear</h6> <a href=" target="_blank">the Brown Bear</a> <p>the following are subspecies of bears:</p> <ul> <li>arctos</li> <li>collarus</li> <li>horribilis</li> <li>nelsoni (extinct)</li> </ul> <p>the following countries have the largest populations<br /> of brown bears:</p> <ol> <li>russia</li> <li>united States</li> <li>canada</li> </ol> <a href=" target="_blank"> <img src=" alt="fucking bear"/> </a>

Example result <h1>the Brown Bear</h1> <h3>the Brown Bear</h3> <h6>the Brown Bear</h6> <a href="https://en.wikipedia.

18 Example result <h1>the Brown Bear</h1> <h3>the Brown Bear</h3> <h6>the Brown Bear</h6> <a href=" target="_blank">the Brown Bear</a> <p>the following are subspecies of bears:</p> <ul> <li>arctos</li> <li>collarus</li> <li>horribilis</li> <li>nelsoni (extinct)</li> </ul> <p>the following countries have the largest populations<br /> of brown bears:</p> <ol> <li>russia</li> <li>united States</li> <li>canada</li> </ol> <a href=" target="_blank"> <img src=" alt="fucking bear"/> </a>

19 index.html Attributes attributes= value <span style="color:#ff0062"> 핫핑크로보입니다 </span> <strong> 강조됩니다 </strong> <em> 기울어집니다 </em> <p style="font-size:20px"> 폰트크기 20px의 paragraph</p> <p style="text-align:center"> 텍스트를중앙정렬했습니다.</p> <p style="letter-spacing: -2px"> 자간을줄여보았습니다. </p>

20 index.html Example <!DOCTYPE html> <html> <head> <title> I'm Learning To Code! </title> </head> <body> <span style="color:#ff0062"> 핫핑크로보입니다 </span> <strong> 강조됩니다 </strong> <em> 기울어집니다 </em> <p style="font-size:20px"> 폰트크기 20px의 paragraph</p> <p style="text-align:center"> 텍스트를중앙정렬했습니다.</p> <p style="letter-spacing: -2px"> 자간을줄여보았습니다. </p> </body> </html>

21 CSS 2017 spring seminar bloo

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

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

24 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>

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

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

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

28 Basic CSS color : 글자색깔, (red, green, ), (#000, #fff, #ff0000, #40e0d0, ) font-size : 폰트사이즈, (12px, 14px, ) line-height : 줄간격, (12px, 14px, ) text-decoration : underline( 아래 ), overline( 위 ), line-through( 가운데 ) font-family : 글자체, ( 돋움, Times New Roman ) font-weight : normal, bold width, height : 가로, 세로 background-color : 배경색, color와동일

29 Selector css 를적용시키고싶은대상을명시할때사용! 부모 - 자식관계 < 부모 > < 자식 > < 자식의자식 /> </ 자식 > </ 부모 >

30 Selector ( 띄어쓰기 ) : 모든자손들에게적용 ex) div a {font-color: red;} -> div 안에있는모든 a 에적용됨 > : 바로한단계아래의자식에게만적용 ex) ol>li {font-clor: red} -> ol 바로아래에있는 li 에만 css 가적용됨.

31 Example body { font-family: serif; background-color: #7700e0; color: #ffffff; } a { text-decoration: none; color: yellow; font-size: 20px;} ul { list-style: none; }

32 Example <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title> 스팍스세미나 </title> </head> <body> <div class= pink > 핫핑크로보입니다. 중정에 20px </div> <div class= under > 자간 -1px, 밑줄속성을줬고크기는 15px </div> <ul> <li> 메뉴는보통 </li> <li> 이렇게 </li> <li>ul로만듦 </li> </ul> <a href=" target="_blank"> 이링크는어디로갈까 </a> </body> </html>

33 Selector: id, class id : 단하나의 element class : 여러 element id 는이름앞에 # 을쓰고 class 는. 을쓴다 <div id= menu > <div class= main_menu > </div> <div class= sub_menu > </div> </div> html #menu { list-style: none ; font-family: 맑은고딕, serif; }.main_menu { font-size: 20px; color: red; }.sub_menu { font-size: 13px; } css

34 Selector: id, class class 는한문서내에서여러번사용가능하고, id 는한번만사용가능하다. id 의명시도가클래스보다높다. 헤더와푸터에는 id 를주로사용한다. Class 가범용성이높아서쓰기편하다. 다중클래스 : <div class= pannel weather > 라고쓰면, css 파일의.pannel 과.weather 가동시에적용된다. ( 중복되면위에있는것이적용.)

35 Example div#header a {font-color: red;} -> header 라는 id 를가진 div 안의모든 a 에적용됨 div.header>a {font-color: red;} -> header 라는 class 를가진 div 바래아래의 a 에적용됨

36 Building block : div 레이아웃 (layout) 레이아웃등덩어리의기본은 div. <div id= 이름 > </div> <div class= 이름 > </div> div div div div div

37 이름만다른 div 들 <header> - header <nav> - navigation links <section> - section <article> - independent self-contained article <aside> - content aside from the content (like a sidebar) <footer> - footer <details> - additional details <summary> - heading for the <details> element

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

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

Padding, margin <div id="content"> </div> <div class="intro"> <span class="hotpink"> 핫핑크로보입니다. 패딩을안주면이꼴남 </span> </div> <div class="main"> </div> <div class="sub"> <p class="center"> 텍스트를중앙정렬했습니다.

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

41 block, inline block: 아래위로여백을가지며같은줄에다른 element 가못옴. div, p, h 등. inline: 같은줄에여러 element 가옴. span 등. 속성을줘서바꿀수도있다. display : inline; 한줄에함께나타남 display : block; 한줄에한개만나타남 block block display : none; 화면에나타나지않음 display : inline-block; inline 이지만크기조정가능 inline inline

42 References w3school 스팍스기존세미나 thanks to jara, panda

43 Homework 코드카데미 Learn HTML & CSS: Part I 1. HTML Fundamentals ~ 6. The CSS Box Model 여기로스크린샷제출 언제까지? 4 월 8 일이끝날때까지

44 Homework 프사밖에확인할방법이없지만양심껏자기꺼찍어서올려주세요.

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4