Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Size: px

Start display at page:

Download "Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]"

수지 진
5 years ago
Views:

Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.

asp WWW (World-Wide Web) 문서를작성하는 Markup 언어 HTML은여러태그 (tag) 들로구성되어있으며, 각태그들을사용하여원하는형태의문서를만들수있음 HTML 문서의기본형식 <!

1 Web Technology Stack HTML, CSS, JS Basics HTML Tutorial CSS Tutorial JS Tutorial 년봄학기 3/11/2019 박경신 WWW (World-Wide Web) 문서를작성하는 Markup 언어 HTML은여러태그 (tag) 들로구성되어있으며, 각태그들을사용하여원하는형태의문서를만들수있음 HTML 문서의기본형식 <!DOCTYPE html> <html> <title>my First Web Page</title> 헤더타이틀 --> <body> <h1>heading</h1> 본문 --> <p>hello World!</p> 본문 --> </body> </html> HTML 구성요소 태그 (Tag) <tag attr= value > content.. </tag> 요소 (Element) HTML에서시작태그와종료태그로이루어진명령 속성 (Attribute) 요소의시작태그안에서사용되는좀더구체화된명령 변수 (Arguments) 속성에값

2 <p> paragraph <p align="center"> 가운데로정렬한문단 </p> <h1> <h6> headings <a> link/anchor <a href= target= _blank > 네이버 </a> <img>, <video> images, videos <img src= src.jpg width= 100 height= 200 align= top > <table>, <tr>, <td> table, table column, table cell <table border= 1 align= center > <tr> <td> 1 x 1 </td> <td> 1 x 2 </td> </tr> <tr> <td> 2 x 1 </td> <td> 2 x 2 </td> </tr> </table> <frameset>, <frame> frame <frameset row= 100,* > <frame src= top_menu.html > <frameset cols= 200,* > <frame src= left_menu.html > <frame src= contents.html > </frameset> </frameset> <ul>, <ol>, <li> unordered list, ordered list, list element <ul> <ol> <li> data1 </li> <li> data1 </li> <li> data2 </li> <li> data2 </li> </ul> </ol> <b>, <strong> bold text formatting <i>, <em> italics text formatting <sup>, <sub> super/subscript text formatting <div>, <section>, <article> container, section, article <br>, <hr> line break, horizontal rule HTML이웹페이지의정보를표현하는언어이고, CSS는 HTML을보기좋게디자인하는역할을하는언어 CSS는문서의콘텐츠와레이아웃, 글꼴및시각적요소들로표현되는문서의디자인을분리하기위한목적으로만들어짐 CSS 명세는 WWW Consortium에서관리, CSS1, CSS2, CSS3가정의되어있음 하나의규칙으로여러 HTML 요소와 HTML 문서를제어할수있음

3 CSS 기본문법 CSS 규칙은선택자 (selector) 와선언부 (declaration) 로나뉘며, 선언부는다시속성 (property) 과속성값 (value) 으로나뉨 selector declaration p, td { color:blue; font-size:12px; 모든문단과테이블셀스타일을파란색과 12폰트로지정 property value 선택자는보통스타일링하고싶은 HTML element 나부여한 ID 혹은 class 가위치. 선택자는 HTML 태그중의하나. 여러선택자를사용할경우콤마 (,) 로구분 선언부에여러개의속성과속성값이있을때세미콜론 (;) 으로구분 각각의선언은속성과속성값을콜론 (:) 으로구분 CSS 주석은 /* */ 로둘러쌈 HTML 에서 CSS 적용방법 HTML 태그내에스타일지정 (Inline Styles) <p style= color:gray > 이문단의색은회색으로 </p> 안에내부스타일시트 (Internal Style Sheet) body { font-size:9pt; 외부 스타일시트 (External Style Sheet) HTML 에서 CSS 적용방법 안에 link 를이용한외부스타일시트 (External Style Sheet) <link href= style.css rel= stylesheet type= text/css > url( /css/style.css ); xml-stylesheet 처리명령으로외부스타일시트 <?xml-stylesheet type= text/css href= /css/style.css?> CSS 적용우선순위 CSS는기본적으로선언된순서에따라적용되지만, 각종선택자와삽입위치에따라우선순위가달라질수있음 우선순위를최대한단순하게유지해야함 선택자우선순위!important > 인라인스타일 > 아이디선택자 > 클래스 / 속성 / 가상선택자 > 태그선택자 > 전체선택자 삽입위치우선순위 1. 안의 style 요소 2. <style> 문 3. <link> 로연결된 CSS 파일 4. <link> 로연결된 CSS 문 5. 최종사용자가연결한 CSS 파일 6. 브라우저의기본스타일시트

4 CSS 선택자 (Selectors) 선택자 예시 예시설명.class.intro class="intro 인모든 elements를선택 #id #firstname id="firstname 인 element를선택 * * 모든 elements 선택 element p 모든 <p> elements 선택 element,element div, p 모든 <div> 와 <p> elements 선택 element element div p 모든 <div> 안에모든 <p> elements 선택 element>element div>p 모든 <div> 의한단계아래자식들 <p> 선택 element+element div+p 모든 <div> 바로다음에나오는 <p> 선택 element.class p.summary class= summary 인 <p> element 선택 element#id p#index id= index 인 <p> element를선택 CSS 선택자 (Selectors) 선택자 예시 예시설명 [attribute] [alt] alt attribute를가진모든 elements 선택 [attribute=value] [alt= dog ] alt= dog 인모든 elements 선택 [attribute~=value] [alt~= dog ] alt attribute로 dog를가진모든 elements 선택 [attribute =value] [lang =en] lang attribute로 en 로시작하는 elements 선택 :active a:active active link를선택 :focus input:focus focus된입력을선택 :lang p::lang(kr) lang attribute가 kr 인 <p> 선택 ::after p::after 각 <p> 다음에내용을삽입 ::befire p::before 각 <p> 전에내용을삽입 ::first-letter p::first-letter 각 <p> 에첫번째문자를선택 ::first-line p::first-line 각 <p> 에첫번째줄을선택 CSS class 선택자 클래스 (class) 선택자는여러개를사용할수있음 p.red { color:red <p> 일반적인문단 </p> <p class= red > red 라는이름의클래스가지정된문단 </p> CSS 아이디 (id) 선택자 아이디 (id) 선택자는고유성을가지므로한번만사용할수있음 #red { color:red <p> 일반적인문단 </p> <p id= red > 이문단 id 는 red</p>.red { color:red <h3 class= red > 소제목에도 red 클래스를지정 </h3> <p class= red > red 라는이름의클래스가지정된문단 </p>

5 HTML element <p> <p class= bp > <p id= headline > <div class= intro > <h1> </h1> </div> CSS rule p { font-size:14px;.bp { color:gray; #headline { font-size:20px;.intro h1 { font-size:18px; JavaScript HTML과 CSS는정적인언어인반면, JavaScript는 HTML과 CSS로만들어진웹페이지를동적으로, 프로그래밍적으로제어하기위해만들어진언어 최근자바스크립트는웹페이지스크립팅 (DOM) 뿐만아니라, 서버측스크립팅에서도사용 (node.js) 되고, 구글크롬웹브라우저플러그인, 구글스크립트, PDF, 각종데스크탑위젯에서도사용 jquery는자바스크립트라이브러리 <script> 태그안에자바스크립트정의 <script> document.getelementbyid("demo").innerhtml = Hello JavaScript"; </script> 함수 (function) function 함수명 ([ 인자.. [, 인자 ]) { // 코드 return 반환값 ; 배열 (array) var fruits = [ apple, banana, orange ]; 객체 (Object) var car = {type: Fiat, model: 500, color: white ; var person = {firstname: K", lastname: Park", age:50, fullname: function() { return this.firstname + + this.lastname; ; 이벤트 <button onclick= displaydate()">the time is?</button> <script> function displaydate() { document.getelementbyid("demo").innerhtml = Date(); </script> <p id= demo ></p> HTML Event 설명 onchange HTML element이변화될때 onclick 사용자가 HTML element를클릭할때 onmouseover 사용자가 HTML element에마우스오버할때 onmouseout 사용자가 HTML elemen에마우스를뺄때 onkeydown 사용자가키를누를때 onload 웹브라우저가페이지로딩을했을때

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법