소중한 교육자료 제작 이영수

소중한 교육자료 제작 이영수

웹 브라우징의 원리 사용자, 브라우저, 서버가 서로 통신하는 구조 브라우저가 서버에 해당 주소로 요청 사용자 주소 입력 브라우저의 요청을 해석하여 파일 값 전송 서버가 보낸 파일 값을 브라우저가 해석하여 화면에 출력 웹 브라우징

기본 HTML 태그 작성법 <태그>내용</태그> 단, 태그는 연 순서대로 닫아야 한다. ex) <태그1>내용1</태그1> <태그2><태그3>내용2</태그3></태그2> <태그2><태그3>내용2</태그2></태그3> (X)

HTML 문서의 기본구조 <html> <head> <title>페이지 제목</title> </head> <body> 웹 문서의 내용 </body> </html> 웹 문서 제작자나 사용된 언어 등 화면에 직접적으로 표시되지 않는 여러 정보가 들어감

정말 간단한 HTML 페이지 예제 <html> <head> <title>My Homepage</title> </head> <body> Welcome to my homepage! </body> </html>

닫는 태그가 없는 특수한 태그 <br> 등의 태그는 </br> 처럼 닫지 않음 대신 <br /> 처럼 사용가능 (XHTML에서 표준) ex) Hello<br> World<br /> <imgsrc=“parameter.png” width=“100” height=“100” />

<br> 태그 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않는다. (=한 줄로 연이어 나온다.) 이때 <br>(<br />)태그를 사용하면 줄 바꿈이 된다. ex) 잎새에 이는 바람에도<br>나는 괴로워했다.

<p> 태그 하나의 문단을 만들 때 씀 줄 바꿈이 되고 하나의 여백 문장이 생김 (<br> 태그를 두 번 쓴 것과 같음) ex) <p>서시</p> <p>죽는 날까지 하늘을 우러러….</p>

<center> 태그 태그 내 내용들을 가운데 정렬한다. ex) <center> <p>서시</p> <p>죽는 날까지 하늘을 우러러….</p> </center>

<b> 태그와 <i> 태그 <b> 태그는 태그 내 내용을 굵게 표시한다. <i> 태그는 태그 내 내용을 기울여서 표시한다. ex) <center> <p> <b>서시</b> </p> <p> <i>죽는 날</i>까지 하늘을 우러러…. </p> </center>

태그의 속성 태그의 속성은 <태그속성=“값”>의 형태로 사용한다. ex) <font color=“red” face=“나눔고딕”> Hello </font>World

<font> 태그 글씨에 색이나 글꼴등 다양한 효과를 준다. color 속성은 색상, face 속성은 글꼴을 나타낸다. ex) <fontcolor=“red” face=“나눔고딕”>Hello</font>

<a> 태그 하이퍼링크를 걸어주는 태그 <a> 태그 사이에 표시될 내용을 쓰고 href속성에 클릭하면 이동 할 링크를 작성한다. ex) <ahref=“http://prev.kr”>PrevHomePage</a> target 속성은 새로 열 페이지의 특성을 나타낸다. 기본값은 “_self” 로 현재페이지이며 “_blank” 사용시 새 페이지로 이동한다. ex) <ahref=“http://prev.kr” target=“_blank”>PrevHomePage</a>

<img> 태그 브라우저에 이미지를 삽입하는 태그. </img>로 닫지 않는 태그이다. src속성에 이미지 경로를 입력하고 width(가로), height(세로) 속성으로 크기를 지정한다. ex) <imgsrc=“parameter.png” width=“500” height=“300” />

<table> 태그 표를 만드는 태그 <table> 태그 안에 <tr> <td> 등을 써서 사용한다. <tr>은 열, <td>는 행을 나타낸다. ex) <table> <tr> <td> 내용1 </td> <td> 내용2 </td> </tr> </table>

XHTML, HTML5 HTML은한 회사가 단독적으로 언어를 제작하는 것이 아니고 상용 되고 있는 대다수의 브라우저들이 독립적으로 파일을 해석하므로 표준이 잘 정해져 있지 않다. 오랜 기간 동안 표준이 정해져 있지 않다가 등장한 것이 HTML5 이다. 그 이전 버전은 주로 XHTML을 쓴다.

XHTML, HTML5 - doctype HTML문서 앞에 doctype을 설정하는 것으로 버전을 표시한다. XHTML 문서는 아래와 같은 doctype을 쓴다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 문서는 아래와 같은 doctype을 쓴다. <!doctype html> doctype을 지정하지 않을 경우 ie는 구 버전 처리 방식을 사용하므로 꼭 지정 해 주도록 한다.

한글 깨짐 문제 HTML의 인코딩 방식 때문에 한글이 종종 깨질 때가 있다. 이럴 때에는 문서의 인코딩 방식을 UTF-8로 설정하고 HTML파일의 <head> 부분에 XHTML의 경우 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> HTML5의 경우 <meta charset="utf-8"> 를 삽입한다. * 파일 저장시에도UTF-8 인코딩을 사용해야 한다. (드림위버는 자동으로 utf-8 형식으로저장함)

XHTML ie최신 모드 사용 기본적으로 XHTML(일반 html 규격) 에서 ie는 쿼크 모드 혹은 ie7 모드를 사용한다. 최신 버전의 ie모드를 호출하려면 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 를<head> 태그에 쓴다.

<div> 태그 아무것도 없는 상자 역할 가로, 세로 크기를 지정 할 수 있고 테이블 대체 용도로 쓸 수 있음 div 태그 내 style속성에서 각종 추가 설정 가능 ex) <div style=“width:500px; height:300px; background-color:red;”> div태그 예제 </div>

<div> 태그 2 <div> 태그 다음태그는 자동으로 줄 바꿈 되어 표시된다. <div style=“width:500px; height:300px; background-color:red;”> div1 </div> <div style=“width:400px; height:300px; background-color:blue;”> div2 </div> 위와 같은 태그는 세로로 2개의 div 상자가 만든다.

태그의 style 속성 Style속성은 <태그style=“속성1:값1; 속성2:값2;”> 의 형태로 사용한다. ※style속성값의 속성의 값(위 태그의 값1, 값2)는 따옴표를 표시하지 않는다. ※ 속성-속성값의 끝에는 세미콜론(;) 을 붙인다. (단 마지막 값 뒤에는 안 붙여도 됨) ex) <div style=“width:500px; height:300px;”></div> <div style=“width:500px”></div>

<span> 태그 <div> 태그와 비슷한 태그 하지만 크기를 설정 할 수 없고 줄 바꿈이 되지 않는다. (inline 요소) ex) <span style="background-color:blue">span태그</span>

<button> 태그 버튼을 만드는 태그, <button>버튼 안에 들어갈 내용</button> 처럼 작성하며 div태그와 속성은 비슷하다.

<li> 태그 목록을 만드는 태그 <ol> 혹은 <ul>태그 내부에 사용한다. <ol>태그는 번호를 메겨 순서대로, <ul>태그는 순서없이 문양으로 목록을 만든다. ex) <ul> <li>목록1</li> <li>목록2</li> <li>목록3</li> </ul> <ol> <li>목록1</li> <li>목록2</li> <li>목록3</li> </ol>

<li> 태그 2 <ul>태그 style 속성의 list-style 을 none 설정 시 문양이 보이지 않는다. 이를 이용하여 메뉴 네비게이터를 만들기도 한다. <ul style="list-style:none;“> <li style="float:left; width:50px; text-align:center;“>목록1</li> <li style="float:left; width:50px; text-align:center;“>목록2</li> <li style="float:left; width:50px; text-align:center;“>목록3</li> </ul>

id속성과 class속성 대부분의 태그에는 id 속성과 class 속성이 있는데, 이를 이용하면 CSS나 JavaScript에서 태그를 좀더 쉽게 이용 할 수 있다. id는 원칙상 하나의 id당 하나의 태그에만 적용 할 수 있으며 class는 하나의 class당 여러 태그에 적용 할 수 있다.

CSS 1 – 일반 태그에 적용 웹 개발자와 디자이너 분리가 가능해지게 해줌 <style> 과 </style> 사이에 작성 <style> 대신 <style type="text/css"> 로 사용가능 (추천) <style> 태그 사이에 태그{ 속성1:속성값1; 속성2:속성값2;} 처럼 작성한다. ex) body { margin:0; padding:0; }

CSS 2 – id/class에 적용 태그에서 설정한 id나 class에도 스타일을 줄 수 있다. id에 줄 경우#아이디{ 속성1:속성값1; 속성2:속성값2;} class에 줄 경우.클래스명{ 속성1:속성값1; 속성2:속성값2;} 처럼 작성한다. ex) body{ background-color:red; } #m_box{ width:500px; height:300px; } .box{ background-color:blue; }

CSS 예제 <html> <head> <style> body{ background-color:red; } #m_box{ width:500px; height:300px; } #s_box{ width:400px; height:200px; } .box{ background-color:blue; } </style> </head> <body> <div id=“m_box”></div> <div class=“box”></div> <div class=“box”></div> <div id=“s_box” class=“box”></div> </body>

CSS 3 – CSS 여러 개 동시 적용 쉼표를 사용하면 여러 가지의 태그나 id/class 값에 동시에 css를 적용 시킬 수 있다. ex) html,body{ margin:0; padding:0}

CSS 4 – 태그+ id/class 상세적용 태그이름#아이디{ 속성1:속성값1; 속성2:속성값2; } 태그이름.클래스명{ 속성1:속성값1; 속성2:속성값2; } 위와 같은 CSS 설정은 해당 아이디 또는 클래스명을 가진 특정 태그에만 적용 할 수 있다. (태그이름이 다르면 사용 불가) ex) div#m_box{ width:500px; height:300px; } div.box{ background-color:blue; }

CSS 5 – 하위 태그 적용 태그이름하위태그이름 { 속성1:속성값1; 속성2:속성값2;} 위와 같은 CSS 설정은 특정 태그 하위에 있는 태그에 CSS를 적용시킨다. ex) 이전 설정처럼 태그이름 뒤에 #아이디 .클래스명 을 붙여 특정 아이디나 클래스명에도CSS를 적용 할 수 있다. ex) div span{ text-align:center; padding:10px; } div.yellow_box span{ background-color:yellow; } div#c_boxspan{ text-align:center; padding:10px; } div span.blue_span{background-color:blue; } div span#c_span{ text-align:center; padding:10px; }

CSS 6 – 추상 클래스 CSS 태그 혹은 아이디, 클래스명 설정 뒤 :이벤트 를 붙이면 특정 이벤트마다 적용 할 CSS를 사용 할 수 있으며 이를 추상(가상)클래스라 한다. 그 중 :hover을 붙이면 CSS가 적용된 태그에 마우스가 올려졌을 때 적용할 CSS를 의미한다. ex) :hover외에도 :active 등이 있는데 :active는 해당 태그를 클릭하고 있을 때의 CSS를 의미한다. .box{ background-color:blue; } .box:hover{ background-color:red; } div#c_boxspan:hover{background-color:green; }

CSS 7 – after 가상선택자 :hover, :active 외에도 다양한 추상 클래스 / 가상 선택자가 존재하는데 그 중 :after 라는 가상 선택자가 존재한다. 이는 컨테이너 요소 안 맨 마지막에 추가시킬 태그를 지정 할 수 있다. #container:after{ content:"추가된 텍스트"; display:block} 위 같은 CSS는 container 태그 안 맨 마지막에 "추가된 텍스트"를 출력시킨다. 단, IE7 이라는 after 가상 선택자를 지원 하지 않는다.

자주 쓰는 CSS속성 (1) width : 가로 height : 세로 margin : 외부 여백 padding : 내부 여백 color : 글자 색상 font-family : 글꼴 font-size : 글자 크기 font-weight : 두께 설정 text-align : 글자 정렬 background-color : 배경 색상 background-image : 배경 이미지 ( url(“경로”) 값 사용) background-position : 배경 이미지의 위치 cursor : 해당 태그에 마우스를 올렸을 때 마우스 상태 border : 테두리

자주 쓰는 CSS 속성 (2) position : 태그를 표시할 방법 left : 화면 맨 왼쪽으로부터 태그 객체 왼쪽 모서리까지의 거리 top : 화면 맨 위쪽으로부터 태그 객체 위쪽 모서리까지의 거리 right : 화면 맨 오른쪽으로부터 태그 객체 오른쪽 모서리까지의 거리 bottom : 화면 맨 아래쪽으로부터 태그 객체 아래쪽 모서리까지의 거리 z-index : 태그의 z 인덱스 (높을수록 다른 태그 위에 배치됨) float : 태그 정렬 방법 display : 태그 표현 방법

CSS – width/height width와 height 속성은 각각 가로길이, 세로 길이를 의미한다. “100px” 처럼 숫자 뒤에 단위를 표시하여 적는다. (px는 픽셀 이라는 의미) <span> 등 inline 요소는 적용 되지 않는다. (※ inline 요소는추후 설명) #box{ width:500px; height:300px}

CSS – margin/padding margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미한다. #box{ margin:10px; padding:20px }

CSS – margin/padding (2) margin과 padding 속성은 상,하,좌,우 각각 따로 너비를 줄 수 있으며 이에 따라 margin-left, margin-top, margin-right, margin-bottom, padding-left등의 속성이 따로 있다. 뿐만 아니라 띄어쓰기를 구분으로 두 값을 지정 할 경우 각각 상하 간격, 좌우 간격을 의미한다. margin:50px 10px; -> 상하 여백 50px, 좌우 여백 10px 띄어쓰기를 구분으로 네 값을 지정 할 경우 각각 위, 오른쪽, 아래, 왼쪽 간격을 의미한다. (시계방향) padding:5px 20px 10px 15px; -> 각각 위 5px 오른쪽 20px 아래 10px 왼쪽 15px 의 간격

CSS – margin/padding (3) 기본적으로 body 태그에는 margin이 적용되어 있어 상하좌우에 여백이 생긴다. 여백을 없애려면 body에 margin과 padding을 0으로 적용시키면 된다. 이때 IE는 html 태그에도 margin이 있으므로 html 태그의 margin과 padding을 없애도록 한다. html,body{ maring:0; padding:0}

CSS – margin auto 태그 객체의 margin-left, margin-right에 모두 auto를 적용 시 태그는 하위요소에 영향을 미치지 않고 자기 자신의 위치를 가로 가운데로 위치시킨다. 단, 태그가 div일 경우 크기가 지정되어야 한다. (미지정시 크기가 100%) margin:0 auto; 등으로 보다 더 쉽게 적용 시킬 수도 있다. #box{ width:500px; margin:0 auto }

CSS – color color 속성은 글자 색을 의미한다. color는 “red”, “blue” 등 이미 정의된 색이나 “#000”, “#FFFFFF” 등의 16진수 색상 코드, “rgb(255, 255, 255)” 등의 rgb색상, “rgba(200, 100, 150, 0.5)” 등의 알파가 적용된 rgb색상(rgba) 등을 사용 할 수 있다. #box{ color:green} #box2{ color:#F0C }

CSS– font-family font-family 속성은 글꼴을 의미한다 = font 태그의 face 속성과 같음 쉼표(,)로 여러 글꼴을 등록 할 수 있는데, 이때 맨 앞에 있는 글꼴을 우선으로 적용시키며, 맨 앞에 있는 글꼴이 사용자의 컴퓨터에 없을 때 그 다음 글꼴을 사용한다. body{ font-family:나눔고딕,NanumGothic,돋움,Dotum}

CSS – font-size font-size 속성은 글자 크기를 의미한다 = font 태그의 size와 같음 pt, em, 등의 단위와 small, big등의 상수 크기가 있다. body{ font-size:40pt}

CSS– font-weight font-weight속성은 글자 두께를 의미한다. 100~900 사이의 숫자, 혹은 normal, bold, bolder, lighter 의 상수가 있는데 이는 각각 400, 700, 900, 100을 의미한다. body{ font-weight:bold}

CSS – text-align text-align 속성은 텍스트의 정렬 방향을 의미한다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 중앙 정렬 justify : 자동 줄바꿈시 오른쪽 경계선 부분이 정리 (양쪽 정렬) #box{ text-align:center}

CSS- visibility visibility속성은 태그의 가시성 (보이는지) 을 결정한다. 총 4가지 속성이 있으며 기본값은 inherit 이다. visible : 보임 hidden : 숨기지만, 자신의 영역은 계속 차지한다. collapse : 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로해석된다.) inherit : 부모 요소의 값을 상속 #box{ visibility:hidden}

CSS – background-color background-color속성은 배경색을 의미한다. color 속성과 거의 비슷하게 설정 한다. ※ color속성과 혼돈하지 않도록 주의한다. ※ 크기가 없을 경우 표시되지 않으므로 주의한다. #box{ background-color:green } #box2{ background-color:#FF00CC}

CSS– background-image background-image속성은 배경 이미지를 설정한다. png, jpg 등의 이미지를 사용하려면 “url(이미지경로)” 를 사용한다. 이때, 컨테이너의 크기와 상관없이 background-image의 크기는 그대로 표시되며, 컨테이너가 더 클 시 이미지는 반복되어 표시된다. #box{ background-image:url(logo.png)}

소중한 교육자료 제작 이영수

소중한 교육자료 제작 이영수

Presentation Transcript