기본과활용
목차 1. HTML와 CSS 시작 2. HTML 기본문서작성 3. 텍스트, 목록, 하이퍼링크 4. 박스, 표 5. 이미지와멀티미디어 6. 입력폼양식
웹개발환경 웹브라우저종류 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 웹개발편집기 메모장 (Notepad) 노트패드 ++(Notepad++) 아크로에디트 (AcroEdit) 드림위버 (Dreamweaver) https://notepad-plus-plus.org
1. HTML5 특징 Hyper Text Markup Language 의약자 웹문서를만들기위해약속된언어
HTML5 시작 시작과종료태그 태그중첩 들여쓰기와줄바꿈 대소문자구분 태그내글자의공백처리 태그속성 < 태그이름속성 = 값 > <p> 시작과종료 </p> <p> <b> 태그중첩작성 </b> </p> <img src= rose.jpg >
HTML 실행 html 문서기록과저장 html 문서실행 html 문서편집 <html> <head> <title> 문서제목 </title> </head> <body> <p> 문장 1 </p> <p> 문장 2 </p> 문장 3 </body> </html>
CSS3 란? Cascading Style Sheet의약자 HTML 구조안에서구현 HTML로작성된태그의속성처럼적용 글자와박스의그림자효과, 둥근테두리, 이미지테두리, 불투명도적용 <head> <style type= text/css > p {color:blue;} </style> </head> <body> <p > 문장 1 </p> <p > 문장 2 </p> 문장 3 </body>
CSS3 작성과활용 참고 : exe1.html <p style= color:blue > 방법 1 태그안에직접스타일입력 </p> <style> 태그이름.class 이름 { css 스타일 ; }.class 이름 { css 스타일 ; } #id 이름 { css 스타일 ; } </style> 별도의 CSS 파일로저장하여연결하기 <link rel= styleheet type= text/css href= style.css /> 방법 2 방법 3
2. HTML 기본문서작성 <html> <head> <title> 문서의기본구조이해 </title> </head> <body> 본문의내용을입력합니다. </body> </html>
head 영역 <meta> : 문서를이해하기위한기본정보 참고 : exe2.html 속성 http-equiv name content 내용동적인페이지전환효과를위해정의항목의이름정의항목에대한값의미 <title> ~ </title> : 문서의제목 <meta http-equiv= 항목이름 name= 정보이름 content= 값 > <meta http-equiv= author content= 유선주강사 >
body 영역 태그이름 <h1> ~ <h6> <p> <div>, <span> <br> <hr> <blockquote> 설명단락의제목, 숫자가낮을수록큰제목단락구분내용영역을구분, div : 블록단위, span : 줄단위줄바꿈수평선인용문정의 참고 : exe3.html, exe3-1.html, exe3-2.html
문서배경색상 background-color: 색상코드 ; 예 : body { background-color:#c0c0c0; } 색상지정방법 : 16진수 (#ff0000), RGB(255,0,0), 색상이름 (RED) 배경투명도지정 : 0~1 사이값, 값이클수록불투명 예 : p {background-color:rgba(255,0,0,0.5);} 참고 : exe4.html
문서배경이미지 background-image:url( 이미지경로 ); 배경이미지반복 : background-repeat(repeat-x, repeat-y, no-repeat) 배경이미지크기조절 : background-size: 이미지크기 문서제목 <h> 등에배경이미지적용 h1 { background: url(./image/bg.jpg ) no-repeat; } 참고 : exe4-1.html, exe4-2.html
3. 텍스트, 목록, 하이퍼링크 태그이름 <i>, <em> <b>, <strong> <u>, <ins> <del> <sup>, <sub> 텍스트를이탤릭체로표시, 기울임꼴텍스트를굵게강조텍스트에밑줄표시텍스트에가로줄 ( 취소선 ) 표시위첨자, 아래첨자표시 설명 <ol> type 값 : decimal, lower-alpha, lowerroman, upper-alpha, upper-roman <ul> type값 : circle, disc, square 목록태그이름 설명 옵션 <ol> 순서있는목록 type(1, A, a, i), start, reversed <ul> 순서없는목록 <dl> 정의목록, 항목과내용 <dl> <dt> 항목 </dt> <dd> 설명 </dd> </dl> 참고 : exe5.html, exe5-1.html, exe5-2.html
목록태그로가로메뉴만들기.menu ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }.menu { width:800px; text-align: center; }.menu ul li a { text-decoration:none; color:#eee; }.menu ul { border-top:1px solid #fff; border-bottom:1px solid #fff; padding:10px 0; } /* 메뉴영역을 inline 선언가로배치 */ /* 메뉴의글자를모두대문자로표시 */ /* 메뉴간의간격을 10px로지정 */ /* 글자간격을 10px로지정 */ /* 메뉴영역의너비 800px, 가운데정렬 */ /* 글자색상과밑줄속성제거 */ /* 위쪽여백을 10, #eee 색상의구분선삽입 */ 참고 : exe5-3.html
하이퍼링크 웹페이지내에서다른사이트혹은문서다른위치로연결 <a>~</a> 참고 : exe6.html 속성 설명 클릭했을때실행할웹페이지, 실행하지않고자할경우 # 으로정의 href 상대경로 :./image/exe.html 절대경로 : http://www.naver.com/index.html target 클릭했을때웹페이지가실행되는방법, _blank( 새창 ), _self( 현재창 ) 기본형식 <a href= 링크페이지 target= 실행대상 > 링크될텍스트 </a>
하이퍼링크와책갈피 한페이지에서원하는영역으로이동 <a name= 책갈피이름 > <a href= # 책갈피이름 > 참고 : exe7.html
텍스트 CSS 스타일 font-family : 텍스트글꼴 serif, sans-serif, cursive, fantasy, monospace ( 항상지원 ) 글꼴이컴퓨터에설치되어있지않으면기본글꼴로적용 font-family: Arial, 굴림, serif; font-size : 텍스트크기 크기값 (em, pt, px, %), inherit, xx-smail, x-smaill, small, medium, large, x-large, xx-large, smaller, larger <h1> { font-size: medium; } font-style : 텍스트스타일 : normal, italic, oblique, inherit( 주변의텍스트동일한스타일로설정 ) font-weight : 텍스트굵기지정, font-variant : 텍스트대소문자지정 font : 통합지정, 글꼴, 크기, 굵기등을순서대로공백으로구분하여지정 p { font: 20px Arial, sans-serif; } 참고 : exe8.html
단락 CSS 스타일 color : 텍스트색상 body { color: red; } 또는 h1 { color: RGB(0,255,0); } 또는 16 진수표현 text-shadow : 텍스트그림자효과 h-shadow, v-shadow, blur, color line-height : 줄간격지정 p { line-height: 12pt; font-size: 10px; } text-align : 단락정렬 left, right, center, justify( 양쪽정렬 ), inherit 참고 : exe8-1.html
4. 박스와표 많은내용을일목요연하게정리할수있는기능으로사용 _top _left content padding border margin _right _bottom
Box 속성 참고 : exe9.html, exe9-1.html margin 속성 padding 속성 content margin-top padding-top width margin-right padding-right height margin-bottom padding-bottom margin-left padding-left margin padding 속성한번에지정, 위 / 오른쪽 / 아래 / 왼쪽순서대로공백구분 예 : h1 { margin: 10px 0px 10px 100px; border: 1 dotted; } border-width border-top(right, bottom, left)-width thin, medium, thick, 길이값 border-color border-style border-top(right, bottom, left)-color border-top(right, bottom, left)-style border border-width, style, color 속성을한꺼번에순서대로지정, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
표태그 <table> 표선언 <tr> 행선언 <td> 첫번째행첫번째열 </td> 열선언 <td> 두번째행두번째열 </td> </tr> <tr> <td> 두번째행두번째열 </td> <td> 두번째행두번째열 </td> </tr> </table> 참고 : exe10.html 1 행 1 열 1 행 2 열 2 행 1 열 2 행 2 열
표레이아웃 참고 : exe10-1.html 표내부구조이해 표속성설명예 <caption> <th> 표제목 표제목행 / 열삽입 <table> <caption> 표제목 </caption> <tr> <td> 내용 </td> </tr> </table> <table> <tr> <th> 제목 1</th> <th> 제목 2 </th> </tr> <tr> <td> 내용 1</td> <td> 내용 2</td> </tr> </table> <thead> 표머리말 <tbody> 본문 <tfoot> 표꼬리말
표합치기 ( 행 / 열합치기 ) 참고 : exe10-2.html 속성 colspan rowspan 설명 여러개의열을합친다 여러개의행을합친다 1 2 3 1 2 (colspan= 2 ) 3 4 5 4 5 6 1 (rowspan= 2 ) 2 3 4 5
표여백과테두리이해 margin height table border td border td height 번호날짜항목내용 1 2017-08-01 월급입금 1,000,000 2 2017-08-2 학원비 250,000 width padding td width
5. 이미지와멀티미디어 <img> 태그 속성 src width height alt title 설명 이미지파일경로지정이미지가로크기지정이미지세로크기지정이미지를대체할수있는설명, 텍스트삽입이미지정보, 이미지설명, 풍선도움말 참고 : exe11.html <img src= 이미지경로 alt= 대체텍스트 title= 이미지설명 width= 너비 height= 높이 >
이미지파일의종류 파일형식 확장자 설명 gif.gif 256컬러, 작은아이콘, 움직이는이미지 jpg.jpg 웹에서가장많이사용되는이미지 png.png 색상손실없이이미지구현, 투명한배경지원 bmp.bmp 크기가커서다른형식으로변환하여사용
다양한이미지효과 그림자효과 둥근모서리효과 속성 h-shadow v-shadow blur spread color inset 속성 border-top-left/right-radius border-bottom-right/left-radius border-radius 참고 : exe11-1.html 설명 가로그림자세로그림자그림자의번짐정도그림자의퍼짐정도그림자의색상바깥그림자를안쪽으로변경 설명 왼쪽 / 오른쪽위모서리오른쪽 / 왼쪽아래모서리위의순서대로한번에지정
이미지반사효과와필터 ( 크롬, 사파리 ) 반사효과 : -webkit-box-reflect 참고 : exe11-2.html 필터효과.filter1 { -webkit-filter:blur(5px); }.filter2 { -webkit-filter:grayscale(1); }.filter3 { -webkit-filter:sepia(1); }.filter4 { -webkit-filter:invert(1); }.filter5 { -webkit-filter:brightness(1.5); }.filter6 { -webkit-filter:brightness(3) contrast(10); }
이미지변형 이미지회전 transform: rotate(30deg) -ms-transform: rotate(30deg) : 익스플로러용 -webkit-transform: rotate(30deg) : 크롬과사파리용 이미지기울이기 transform: skewx; skewy; 또는 transform: skew(x, y)
Position, float, display 속성 참고 : position.html position float display static left block relative right inline absolute none none fixed <img src=./image/photo1.jpg class= static > <div style= display:inline; background:yellow;> 문장 </div>
멀티미디어활용 HTML 5 에서지원하는비디오 / 오디오파일형식 비디오파일형식 mp4.mp4 video/mp4 ogg.ogg video/ogg webm.webm video/webm 오디오파일형식 mp3.mp3 audio/mpeg wav.wav audio/wav ogg.ogg audio/ogg
동영상파일삽입 <video src= 경로 ></video> 컨트롤버튼삽입 <video src= 경로 controls= control ></video> 자동으로재생하기 <video src= 경로 autoplay= autoplay ></video> 동영상미리다운로드하기 <video src= 경로 preload= auto ></video> 그외속성 auto= muted ( 음소거 ), loop= loop ( 반복재생 ) width, height ( 플레이어의너비와높이 ) 참고 : exe11-3.html
오디오파일삽입 <audio src= 경로 ></audio> 컨트롤버튼삽입 <audio src= 경로 controls= control ></audio> 자동으로재생하기 <audio src= 경로 autoplay= autoplay ></audio> 오디오미리다운로드하기 <audio src= 경로 preload= auto ></audio> 그외속성 auto= muted ( 음소거 ), loop= loop ( 반복재생 ) width, height ( 플레이어의너비와높이 ) 참고 : exe11-3.html
유튜브동영상가져오기 <iframe> 태그 : 웹페이지안에다른웹페이지표시 (inline frame 약자 ) <iframe src= 파일위치 width= 가로크기 height= 세로크기 name= 타겟으로설정할이 름 > 예 : <iframe src="https://www.youtube.com/embed/zmal84yupgm" frameborder="0" width="560" height="315"></iframe> 참고 : exe11-3.html
<iframe> 태그속성 iframe 속성 설명 src= 주소 표시할내용의경로 (URL) 를지정 name= 이름 " 이름, target을이용지정된위치에표시 width= 0 가로폭설정 ( 숫자표시, 픽셀 ) height= 0 세로폭설정 ( 숫자표시, 픽셀 ) marginwidth= 0 좌, 우내부여백 ( 숫자표시, 픽셀 ) marginheight= 0 상, 하내부여백 ( 숫자표시, 픽셀 ) scrolling= auto 스크롤바생성여부 (yes, no, auto) frameborder= 0 프레임경계선의표시유무 (0, 1) align= 정렬위치 정렬위치 (left, center, right) border, bordercolor 경계선의두께, 색상
움직이는마퀴태그익스플로러, 크롬 <marquee>~ </marquee> 참고 : exe12.html 속성 설명 behavior slide, alternate, scroll direction 움직이는방향, left, right, up, down scrollamount 움직이는양, 속도 ( 숫자가클수록빠르다 ) scrolldelay 글자가마지막까지도달하는시간 ( 숫자가클수록느려진다 ) loop 반복횟수 hspace / wspace 스크롤좌우여백 bgcolor 스크롤글자의배경색 width / height 스크롤가로 / 세로넓이
6. 폼 (Form) 사용자로부터필요한자료를입력받아서버로전송하기위한양식 <form> 태그 속성 설명 name method action <form> 태그의고유이름정의 어떤방식으로입력된내용을전달할지에대한방식 get 방식과 post 방식 데이터를전달할대상페이지의주소 <form name= myform method= get action= result.html > <input type= text name= login-name > </form>
입력양식 <input> 태그 참고 : exe13.html type text password button submit reset checkbox radio file hidden 설명 한줄텍스트입력받을수있는양식비밀번호입력받을수있는필드 * 표시클릭가능한버튼폼의데이터를다른페이지혹은서버로전송하는버튼폼의데이터값을초기화여러항목선택체크가가능한사각형모양의필드한항목만선택가능한원형의필드파일을선택할수있는창을실행하는버튼실제화면에는보이지않고숨겨진상태로데이터를전송
선택목록양식 <select> ~ </select> 태그 : <option> 태그와함께사용 속성 name size multiple disable 속성 value selected disabled 설명 <select> 이름지정목록의크기지정, 2이상이면펼침목록이아닌스크롤형태로목록의값을선택 size가 2이상으로정의, ctrl 또는 shift 키로여러항목선택가능 <select> 태그를비활성화설명목록의값이선택되었을때서버로전송될약속된값문서를열었을때기본적으로선택되어진채로보이게하는속성목록의값을선택할수없도록비활성화 <option> 태그속성