2016. 1. 18. 10:42ㆍlanguage/html
모든 강좌는 실무 기준으로 작성되며 이론 및 내부 구조 등이 궁금하신 분들은 직접 검색하시고 공부하시기 바랍니다.
Html 을 사용할 수 있도록 필요한 최소한을 설명합니다.
먼저 Html 이란 Hyper Text Markup Language 의 약자이며
홈페이지를 만드는데 있어서 기본적인 프로그램 언어라고 생각하시면 됩니다.
1. Html 의 구조
Html 은 <로 시작해서 > 로 끝나는 태그라는 것을 가지고 작성합니다.
하나의 시작 태그는 <html>과 같은 구조이며 이 태그가 끝나는 시점을 알리는 부분은 </ 로 시작해서 >로 끝나는 태그로 작성합니다.
그럼 하나의 태그 모양은 <html> </html> 과같은 모양이 되고 이 태그 사이에 다른 태그 및 텍스트를 작성하여 홈페이지를 만든다고 생각하시면 되겠습니다.
위 그림과 같이 기본 Html 태그 구조는 html, head, title, body 의 구조를 가집니다.
html 영역은 눈에 보이는 한 페이지를 가르키는 영역이라고 생각하고, head는 말 그대로 머리라고 생각하면 됩니다.
사람도 공부를 해서 머리에 집어넣듯이 html도 머리에 각종 설정하는 정보를 집어넣어 똑똑하게 만든다고 생각하세요.
title은 인터넷 익스플러로를 실행하면 탭들이 보일텐데 그 탭의 제목을 나타냅니다.
body는 실제 홈페이지의 내용을 작성하는 영역이며
모든 태그는 시작태그와 종료태그가 존재하며 그 위치나 순서 또한 위의 구조를 따라야 합니다.
이제 위 코드를 작성하는 방법을 알려드리겠습니다.
가장 연습하기 좋고 심플한 방법은 연습장(notepad) 입니다.
오타 없이 타이핑 하는 연습이 필요하고 오타가 났을 경우 찾기 어렵지만 꼭 찾아야 하기 때문에
심플하지만 어려운 연습장 사용을 권고합니다.
위 그림과 같이 연습장에 작성하고 저장하실 때 연습.html로 저장하세요.
확장자를 꼭 html로 저장해야 합니다.
그럼 다음 저장한 html 파일을 실행시키면 다음과 같은 화면이 브라우저에 나오게 됩니다.
2. Body 태그의 속성
모든 태그들은 공통적인 속성이 존재하며 때때로 특정 태그는 자신만의 속성을 가지기도 합니다.
속성이라 하면 화면이 보여지는 배경, 글자색, 여백 등을 조절할 수 있습니다.
지금은 body 태그의 속성을 연습해봅니다.
기본적인 구조는 처음 설명한 모양과 같고 body 부분만 고치면 되겠습니다.
body에 설정되는 속성은 body 태그 안에 작성되는 태그 및 텍스트에 영향을 미칩니다.
위에 작성된 body 태그의 속성 대해 설명합니다.
bgcolor : 배경색상을 설정합니다.
text : 글자 색상을 설정합니다.
- 색상을 설정하는 방법 -
1. 색의 이름을 영어로 기술한다.
2. #RRGGRR의 형식으로 기술한다. (16진수 표기법)
3. rgb(R,G,B) 형식으로 기술한다. (10진수 표기법, % 사용 가능)
background : 배경이미지를 설정한다.
ex) background = "경로명/이미지파일명.확장자"
- 경로명 표시 방법 -
1. 현재폴더 : .
2. 상위폴더 : ..
3. 최상위펄더 : /
4. 하위폴더 : 폴더명
ex) ../그림파일명.확장자 - 상위 폴더
/그림파일명.확장자 - 최상위 폴더
link - 방문 내역이 없는 링크 걸린 글자의 색 지정
vlink - 방문 내역이 있는 링크 걸린 글자의 색 지정
alink - 링크걸린 글자를 클릭하는 순간의 색 지정
- 링크 설정 방법 -
형식 : <a href="문서명 또는 URL주소">글자나 그림</a> - <a></a> 태그
bgproperties="fixed" - 배경이미지는 스크롤되지 않는다.
topmargin - 상하의 여백을설정한다.
leftmargin - 좌우의 여백을 설정한다.
실행시키면 다음과 같이 나오게 됩니다.
bgcolor 을 yellow로 설정했지만 background 때문에 보이지 않습니다.
두개를 동시에 설정하면 배경색보다는 배경이 위에 올라와 보이게 됩니다.
궁금하신 분은 직접 해보시길 바랍니다.
'language > html' 카테고리의 다른 글
| [HTML 기초 강좌] 9. Table 태그 (0) | 2016.01.18 |
|---|---|
| [HTML 기초 강좌] 8. iframe과 target (8) | 2016.01.18 |
| [HTML 기초 강좌] 7. 링크연결 (2) | 2016.01.18 |
| [HTML 기초 강좌] 6. img 태그 (8) | 2016.01.18 |
| [HTML 기초 강좌] 5. 목록을 나타내는 ul 태그, ol 태그, dl 태그, li 태그 (10) | 2016.01.18 |
| [HTML 기초 강좌] 4. hr 태그 ( 구분선, 수평선 ) (8) | 2016.01.18 |
| [HTML 기초 강좌] 3.문자 형태 태그와 문장 형식 태그 (0) | 2016.01.18 |
| [HTML 기초 강좌] 2. Header 태그와 Font 태그 연습 (4) | 2016.01.18 |
| PRE / XMP / 그대로 표현 / 띄어쓰기 / 태그 설명 / 태그 무시 / 띄어쓰기 적용 (2) | 2016.01.05 |
| 라디오 버튼 옆 텍스트 클릭 시 해당 라디오 버튼 체크 input radio button text click radio button checked (4) | 2016.01.05 |