HTML CSS 자바스크립트 무작정 따라하기

HTML CSS 자바스크립트 무작정 따라하기

Chapter 02. 웹 문서 기본 구조와 배경 다루기

학습목표 HTML 문서의 기본 구조를 이해할 수 있다. <head> 태그에 들어갈 <DOCTYPE>과 <title>, <meta> 태그에 대해 이해할 수 있다. <body> 태그의 기본 태그를 알 수 있다. 웹 요소의 색상을 바꾸는 방법을 이해할 수 있다. 배경 이미지를 다양하게 활용하는 방법을 이해할 수 있다. HTML CSS 자바스크립트 무작정 따라하기

웹 문서의 시작과 끝을 표시 <html> <head> <title> 초콜릿의 종류</title> </head> <body> <h1>카카오 함유량에 따른 초콜릿의 분류</h1> 블랙 초콜릿<br> 밀크 초콜릿<br> 화이트 초콜릿<br> </body> </html> 웹 문서 제작자나 사용된 언어, 문서의 제목 등 웹 문서의 기본 정보들 실제 웹 브라우저 창에 나타날 내용들 대부분의 HTML 태그들이 <body>와 </body> 태그 사이에서 사용됨 HTML CSS 자바스크립트 무작정 따라하기

여는 태그와 닫는 태그 대소문자 구별이 없다 들여쓰기가 되지 않는다 글자와 글자 사이에 한칸만 띄어진다. 태그 안에 속성을 정의할 수 있다. Deprecated 태그와 속성들 HTML CSS 자바스크립트 무작정 따라하기

문서 유형 - DOCTYPE 현재 웹 문서가 어떤 HTML 버전에 맞게 작성되었는지를 알려주는 부분 사용하는 표준안에 따라 특정 태그를 사용할 수 없기도 하고, 처음 예상했던 것과 다른 결과가 나타나기 때문이다. HTML 4.01 호환 모드 가장 최근의 CSS 규격을 따르며 자유롭게 요소들을 배치할 수 있다. 프레임은 사용할 수 없다. 따로 지정하지 않을 경우 브라우저에서는 이 형식으로 인식한다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML 4.01 엄격 모드 권장하지 않는(deprecated) 요소들은 전혀 사용할 수 없고 요소를 배치할 때 규칙을 지켜야 한다. HTML 문법에 맞는 가장 이상적인 문서를 만들 수 있습니다.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " XHTML 1.0 호환 모드 프레임셋을 사용할 수 있지만 파이어폭스에서는 프레임을 사용할 수 없음 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " HTML CSS 자바스크립트 무작정 따라하기

Meta 태그 – 문서의 정보 문자셋 지정하기 UTF-8 : 전세계의 모든 문자를 표시할 수 있고 한글 고어들도 표현할 수 있다. EUC-KR : 서버에 따라 인코딩을 EUC-KR로만 지정하는 것도 있으므로 반드시 확인해야 한다. <meta http-equiv="Content-Type" content="text/html; charset=utf-8“> 2) 키워드와 요약 정보 제공 검색 엔진에서 웹 문서를 자동 등록할 때 사용할 키워드와 문서 요약 정보 지정 예) <meta http-equiv="Keyword" content="html, css, javascript, 자바스크립트“> <meta http-equiv="descripton" content="HTML에서부터 자바스크립트까지 웹 디자인을 위한 기초 문법 살펴보기“> 3) 웹 문서 제작 프로그램과 제작자 지정하기 현재 문서를 어떤 편집기로 만들었는지, 누가 만들었는지 나타낸다. 예) <meta http-equiv="Generator" content="notepad"> <meta http-equiv="Author" content="Kyunghee Ko"> 4) 일정 시간 후 자동으로 페이지 연결하기 직접 링크를 클릭하지 않아도 한 페이지에서 다른 페이지로 자동 연결되게 content 값은 다음 페이지로 연결될 때까지의 대기 시간이고 URL은 자동 연결될 페이지입니다. 예) <meta http-equiv="Refresh" content="5;url= HTML CSS 자바스크립트 무작정 따라하기

<title> - 문서의 제목 제목 없는 문서 <head> </head> <body> <h1>건강과 허브 차</h1> <div id="banner"> <img src="images/tea4.png"> ~~ 생략 ~~ </body> 제목이 있는 문서 <head> <title>건강과 허브 차 </title> </head> <body> <h1>건강과 허브 차</h1> <div id="banner"> <img src="images/tea4.png"> ~~ 생략 ~~ </body> HTML CSS 자바스크립트 무작정 따라하기

<body>의 기본 태그들 1) <Hn> 태그 자주 사용하는 제목 스타일을 미리 태그 형태로 만들어 둔 것 기본형식 <hn> 제목 </hn> <body> <h3> 허브의 효능 </h3> <img src="tea3.jpg"> <h5>레몬그라스(Lemongrass)</h5> <p>레몬그라스는 억새를 닮은 포아과의 다년초로 ~ 중간 생략 ~ 빈혈에도 효과가 있으며 냉차로 마시면 더욱 향기롭다.</p> <h5>페파민트(Peppermint)</h5> <p>페파민트는 여러나라 약전에도 올라 있는 귀중한 약초이며 ~ 중간 생략 ~ 여름에는 냉차로 마시면 더욱더 상쾌하고 청량감이 더해진다.</p> <h5>로즈마리(Rosemary)</h5> <p>머리를 맑게하고 기억력과 집중력을 향상시켜 ~ 중간 생략 ~ 스트레스 해소에 좋다.</p> 예 HTML CSS 자바스크립트 무작정 따라하기

<body>의 기본 태그들 2) <hr> 태그 문서의 가로 폭에 맞게 회색의 가로줄 삽입 스타일시트를 사용해서 가로줄의 색상이나 크기 등을 바꿀 수 있다. 기본형식 <hr> <h5>레몬그라스(Lemongrass)</h5> <p>레몬그라스는 ~(중략)~ 마시면 더욱 향기롭다.</p> <hr> <h5>페파민트(Peppermint)</h5> <p>페파민트는 ~(중략)~ 청량감이 더해진다.</p> <h5>로즈마리(Rosemary)</h5> <p>머리를 맑게 하고 ~(중략)~ 스트레스 해소에 좋다.</p> 예 HTML CSS 자바스크립트 무작정 따라하기

<body>의 기본 태그들 3) 주석(comment) 웹 문서 소스에는 적혀 있지만 웹 브라우저 화면에는 표시되지 않는 내용 소스 내용을 쉽게 이해할 수 있도록 붙여 놓은 설명글 기본형식  <h3> 허브의 효능 </h3> <div id="vbar">  <img src="images/v_tea.jpg"> </div> <h5>레몬그라스(Lemongrass)</h5> ~ (중략) ~ 예 HTML CSS 자바스크립트 무작정 따라하기

글자색 - color Color : 웹 문서에서 단락이나 제목 등의 글자색을 바꾸는 속성 사용 가능 값 색상 | inherit 기본값 브라우저에 따라 다름 적용 대상 모든 요소 상속 여부 상속됨 백분율 사용할 수 없음 예 p {color:red} 또는 p {color:#ffff00} 또는 p {color: rgb(255,0,0)} 색상 표시 방법 ① 색상 이름 사용하기 : red처럼 알고 있는 색상 이름을 사용한다. ② 16진수로 표시하기 : ffff00처럼 6자리의 16진수로 표시한다. 6자리는 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양을 표시한다. 각 색상마다 하나도 섞이지 않았음을 표시하는 00에서부터 해당 색이 가득 섞였음을 표시하는 ff까지이다. ③ rgb 값으로 표현하기 : color:rgb(255,0,0)처럼 세 자리의 숫자로 표시한다. 이 숫자 역시 앞의 숫자부터 빨강, 초록, 파랑의 양의 표시한다. 하나도 섞이지 않았을 때는 0으로, 가득 섞였을 때는 255로 표시한다. HTML CSS 자바스크립트 무작정 따라하기

문서 배경색 - background-color
여러가지 웹 요소(문서, 표, 레이어 등)의 배경색을 지정하는 속성 배경색을 지정하지 않으면 요소의 배경색은 투명하게 비치게 된다. 예) 문서의 배경색을 파란색으로 했을 때 표의 배경색을 따로 지정하지 않으면 표의 배경색은 투명한 것으로 간주되어 문서의 배경색이 그대로 비치게 된다. 사용 가능 값 색상 | transparent 기본값 transparent(투명) 적용 대상 모든 요소 상속 여부 상속할 수 없음 백분율 사용할 수 없음 HTML CSS 자바스크립트 무작정 따라하기

예 <head> <title>허브의 효능 </title> <style type="text/css"> td,th { font-size:12px} body { background-color:: #f1fbc1} .mybg { background-color:#a5ffb6; font-weight:bold;}　 </style> </head> <body> <h1> 허브의 종류 </h1> <table border="1"> <tr> <th>사진</th> <th>이름</th> <th>설명</th> </tr> <td><img src="images/chamomile.jpg"></td> <td class="mybg">캐모마일(Chamomile)</td>　 <td>목욕제로 쓰면 심신의 긴장을 풀어주며…</td> 중략 HTML CSS 자바스크립트 무작정 따라하기

배경 이미지 - background 웹 문서 전체 뿐만 아니라 표나 레이어 등 문서 요소들에 배경 이미지를 넣을 때 사용하는 속성 배경 이미지 경로를 표시하거나 반복 여부, 위치 등을 지정하기 위해 다음과 같이 좀더 자세한 배경 이미지 속성을 사용한다. background-image : 배경 이미지 파일 경로 background-repeat : 배경 이미지 반복 여부 background-attachment : 배경 이미지 고정 여부 background-position : 배경 이미지 위치 1) background-image : 배경 이미지 지정 사용 가능 값 이미지 파일 경로 | none 기본값 (없음) 적용 대상 모든 요소 상속 여부 상속할 수 없음 백분율 사용할 수 없음 기본형식 background-image: url("파일 경로"); <style type="text/css">  body {background-image: url("bg1.jpg"); }  table {background-image: url("table_bg.jpg") } </style> 예 HTML CSS 자바스크립트 무작정 따라하기

2) background-repeat : 배경 이미지 반복 사용 가능 값 repeat | repeat-x | repeat-y | no-repeat 기본값 repeat 적용 대상 모든 요소 상속 여부 상속할 수 없음 백분율 사용할 수 없음 기본형식 background-repeat: 속성값; <style type="text/css"> body { background-image : url("bg1.jpg"); background-repeat : repeat-x; } </style> 예 3) background-attachment : 배경 이미지 고정 사용 가능 값 scroll | fixed 기본값 scroll 적용 대상 모든 요소 상속 여부 상속할 수 없음 백분율 사용할 수 없음 기본형식 background-attachment : 속성값 <style type="text/css"> body { background-image : url("bg1.jpg"); background-repeat : repeat-x; background-attachment : fixed; } </style> 예 HTML CSS 자바스크립트 무작정 따라하기

5) background-position : 배경 이미지 위치 사용 가능 값 백분율 백분율 | 길이 길이 | [top | left | center | right] 기본값 0% 0% 적용 대상 블록 단위 요소 상속 여부 상속할 수 없음 백분율 요소의 크기를 기준으로 사용 가능함 기본형식 background-position : 속성값; <style type="text/css"> body { background-image : url("bg1.jpg"); background-position : right bottom; } </style> 예 사용 가능 값 형태 ① 백분율 백분율 : 배경 이미지의 왼쪽 모서리가 해당 요소의 왼쪽 모서리에 맞춰 표시된다. 예) background-position:20% 60% ② 길이 길이 : 배경 이미지의 위치를 직접 길이로 지정한다. 예) background-position:30px 20px ③ 키워드 : 가로 배치는 left와 center, top 중에서 선택할 수 있고 세로 배치는 top과 bottom, center 중에서 선택한다. 예) background-position: right bottom HTML CSS 자바스크립트 무작정 따라하기

HTML CSS 자바스크립트 무작정 따라하기

Similar presentations

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

HTML CSS 자바스크립트 무작정 따라하기

Similar presentations

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

Similar presentations

About project

지원