HTML CSS 자바스크립트 무작정 따라하기
Chapter 02. 웹 문서 기본 구조와 배경 다루기
HTML CSS 자바스크립트 무작정 따라하기 학습목표 HTML 문서의 기본 구조를 이해할 수 있다. <head> 태그에 들어갈 <DOCTYPE>과 <title>, <meta> 태그에 대해 이해할 수 있다. <body> 태그의 기본 태그를 알 수 있다. 웹 요소의 색상을 바꾸는 방법을 이해할 수 있다. 배경 이미지를 다양하게 활용하는 방법을 이해할 수 있다. HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 웹 문서의 시작과 끝을 표시 <html> <head> <title> 초콜릿의 종류</title> </head> <body> <h1>카카오 함유량에 따른 초콜릿의 분류</h1> 블랙 초콜릿<br> 밀크 초콜릿<br> 화이트 초콜릿<br> </body> </html> 웹 문서 제작자나 사용된 언어, 문서의 제목 등 웹 문서의 기본 정보들 실제 웹 브라우저 창에 나타날 내용들 대부분의 HTML 태그들이 <body>와 </body> 태그 사이에서 사용됨 HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 여는 태그와 닫는 태그 대소문자 구별이 없다 들여쓰기가 되지 않는다 글자와 글자 사이에 한칸만 띄어진다. 태그 안에 속성을 정의할 수 있다. Deprecated 태그와 속성들 HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 문서 유형 - DOCTYPE 현재 웹 문서가 어떤 HTML 버전에 맞게 작성되었는지를 알려주는 부분 사용하는 표준안에 따라 특정 태그를 사용할 수 없기도 하고, 처음 예상했던 것과 다른 결과가 나타나기 때문이다. HTML 4.01 호환 모드 가장 최근의 CSS 규격을 따르며 자유롭게 요소들을 배치할 수 있다. 프레임은 사용할 수 없다. 따로 지정하지 않을 경우 브라우저에서는 이 형식으로 인식한다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd"> HTML 4.01 엄격 모드 권장하지 않는(deprecated) 요소들은 전혀 사용할 수 없고 요소를 배치할 때 규칙을 지켜야 한다. HTML 문법에 맞는 가장 이상적인 문서를 만들 수 있습니다.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 호환 모드 프레임셋을 사용할 수 있지만 파이어폭스에서는 프레임을 사용할 수 없음 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML CSS 자바스크립트 무작정 따라하기
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=http://www.webguru.kr> HTML CSS 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 <body>의 기본 태그들 2) <hr> 태그 문서의 가로 폭에 맞게 회색의 가로줄 삽입 스타일시트를 사용해서 가로줄의 색상이나 크기 등을 바꿀 수 있다. 기본형식 <hr> <h5>레몬그라스(Lemongrass)</h5> <p>레몬그라스는 ~(중략)~ 마시면 더욱 향기롭다.</p> <hr> <h5>페파민트(Peppermint)</h5> <p>페파민트는 ~(중략)~ 청량감이 더해진다.</p> <h5>로즈마리(Rosemary)</h5> <p>머리를 맑게 하고 ~(중략)~ 스트레스 해소에 좋다.</p> 예 HTML CSS 자바스크립트 무작정 따라하기
HTML CSS 자바스크립트 무작정 따라하기 <body>의 기본 태그들 3) 주석(comment) 웹 문서 소스에는 적혀 있지만 웹 브라우저 화면에는 표시되지 않는 내용 소스 내용을 쉽게 이해할 수 있도록 붙여 놓은 설명글 기본형식 <!-- 주석 내용 --> <h3> 허브의 효능 </h3> <div id="vbar"> <!-- 화면 오른족에 배치할 이미지 --> <img src="images/v_tea.jpg"> </div> <h5>레몬그라스(Lemongrass)</h5> ~ (중략) ~ 예 HTML CSS 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기
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 자바스크립트 무작정 따라하기