티스토리 뷰
아래의 글은 내가 생전 처음으로 코딩과 웹개발을 접했을 때 썼던 글이다.. 지금 생각해보면 절대로 예시 코드를 아래처럼 넣지 않을거지만, 옛날의 초심과 감성을 느끼기 위해서 기록용으로 남겨둔다..
HTML 이란?
- HTML(Hyper Text Markup Language)로 웹 페이지를 위한 마크업 언어이다. 여기서 HyperText는 웹 페이지를 이동할 수 있도록 만들어진 문장을 뜻한다. HTML은 제목, 단락, 목록 등과 같은 웹 페이지 본문의 구조적 틀 구성을 만들수 있는 언어이다. HTML은 CSS와 JavaScript와 같이 쓰인다. HTML이 웹 페이지 콘텐츠를 구성하는 것이라면 CSS는 외관 및 배치를 다룰수 있게 해준다. JavaScript는 외관의 기능을 처리하도록 행동 방식을 정의해주는 역할을 한다.
중요 태그
HTML의 기본 틀을 살펴보자. HTML의 언어는 반드시 <> 모양인 태그 안에 각자 이름을 넣어줘야한다. 처음 <>를 쓰면 뒤는 무조건 </>같은 닫는 태그를 써줘야한다.
1. <HTML>
- HTML 문서를 나타낸다.
2. <HEAD>
- HTML 문서의 시작과 끝을 표시
- <HEAD> 태그는 HTML문서에 대한 정보를 표시하는 데 사용
- CSS, JavaScript를 작성하는 부분이다.
3. <TITLE>
- HTML 문서의 제목을 표시하는 역할
4. <BODY>
- 본문의 내용을 적는 부분이다.
5. <META>
- HTM 문서 자체에 대한 설명을 제공하기 위해 사용됨
- 일반적인 태그와 달리 닫는 태그가 없다.
- 형태
<META http-equiv="메타 태그 항목이름" content="항목 내용">
<META name="메타 태그 항목이름" content="항목 내용">
- 검색 엔진들이 HTML 문서에 포함된 검색 키워드를 이용하여 검색하므로, 검색엔진에 의해 잘 검색되도록 하기 위해 사용한다.
- 즉, 구글이나 네이버에 키워드 검색을 할때 meta 태그와 키워드가 일치하는 것을 찾아서 화면에 검색 내용을 띄워준다.
- 검색 엔진 나타나지 않는 방법(검색 불가능하게하는 방법)
<META name="메타 태그 항목이름" content="noindex,nofollow">
- 사용법
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<title>연습</title>
<META name="Author" content="jerry">
<META name="Author-Date" content="2018 Aprill 04">
<META name="Email" content="jerryjerryjerry.tistory.com">
<META name="Status" content="Draft">
<META name="Revison" content="1.0">
<META name="Description" content="META 태그 활용법">
</head>
<body>
메타 태그를 이용하여 제작자 정보를 표시할 수 있습니다.
</body>
</html>
|
cs |
기본 태그
1. <P> </P> : 열고 닫는 태그가 쌍으로 사용되며 이 태그로 둘러싸인 내용은 하나의 문단이 된다.
2. <BR> : HTML 문서는 엔터 키 입력도 하나의 빈칸으로 표시해 버린다. 따라서 HTML 문서에서 줄 바꿈을 하려면 <BR> 태그를 사용해야 한다.
3. <PRE> : 엔터 키나 탭 키등 사용자가 입력한 그 모습 그대로 출력한다.
4. <HR> : 글자의 구분을 나타낸다. 속성으로 Color, Size, Width를 지정할 수 있다.
5.   : 여러 개의 빈칸이나 엔터키 등 모든 공백 문자를 단 하나의 빈칸으로 인식한다. 여러개의 공백을 인식하고자 할때 사용한다.
6. <H> : 본문 제목 표시 태그이며 <h1>~<h6> 등 6가지 종류가 있다. 6가지 종류에 따라 텍스트 크기가 달라진다.
7. <FONT> : 글자 모양을 지정할 수 있다. 글꼴 지정, 크기 지정, 글꼴 색 지정, 글꼴 설명텍스트 지정을 할 수 있다.
8. <MARQUEE> : 웹 페이지에서 눈에 띄게 하고 싶거나 강조하고 싶은 부분을 움직이는 텍스트로 표시한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html>
<head>
<title>meta 태그 활용법 총 정리</title>
</head>
<body>
<h2 align="center">안녕하세요</h2>
<p>
<MARQUEE behavior="scroll">텍스트가 움직인답니다.</MARQUEE>
</p>
</body>
</html>
|
cs |
9. <OL> : 숫자를 이용해 목록을 만들때 사용
10. <UL> : 순서가 없는 목록을 만들때 사용
11. <DL> : 용어를 정리할때 사용
12. <MENU> : 오른쪽으로 점차 들여쓰기가 되는 형태의 목록을 나열할때 매우 유용
기본 속성
1. 하이퍼링크 속성
- alink : 마우스로 클릭한 링크의 색상 지정, 해당 하이퍼링크를 클릭했을때의 표시상태
- link : 방문하지 않은 하이퍼링크의 색상 지정, 하이퍼링크가 설정된 표시
- vlink : 이미 방문한 하이퍼링크의 색상 지정, 해당 하이퍼링크를 클릭하여 다른 html 문서나 웹사이트를 한번 방문한 적이 있었던 하이퍼링크의 표시
2. 문서 여백 조정
- bottommargin : 문서의 아래쪽 여백 지정
- leftmargin : 문서의 왼쪽 여백 지정
- rightmargin : 오른쪽 여백 지정
- topmargin : 위쪽 여백 지정
3. 정렬(align)
- center : 가운데 정렬
- justify : 양쪽 맞춤으로 정렬
- left : 왼쪽 정렬
- right : 오른쪽 정렬
4. 글자모양(FONT)
- Face : 글꼴 지정
- Size : 크기 지정
- Color : 글꼴 색 지정
- title : 글꼴 설명텍스트 지정
5. 하이퍼링크(A)
- name : 하이퍼 링크에 이름 지정
- href : 하이퍼링크를 클릭했을때 이동할 페이지의 URL 지정
- target : 하이퍼링크 클릭시 href 특성에 지정된 url이 보여질 위치를 지정
- title : 하이퍼 링크에 대한 설명 표시
1. 예제 1
다양한 태그를 이용하여 글자 모양을 변형해보자
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>태그 활용법 총 정리</title>
<meta http-equiv="refresh" content ="5">
</head>
<body>
<h2 align="center">다양한 글자 관련 물리 태그들</h2>
<p><B>B 태그는 글자를 굵게 표현합니다.</B></p>
<p><I>I 태그는 글자를 기울여서 포현합니다.</I></p>
<p><STRIKE> STRIKE 태그는 글자에 취소선을 표시합니다.</STRIKE></p>
<p><U>U 태그는 글자에 밑줄을 표시합니다.</U></p>
<p>Sup 태그는 글자를 <SUP>위첨자</SUP>로 표시합니다.</p>
<p>Sub 태그는 글자를 <SUB>아래첨자</SUB>로 표시합니다.</p>
<p><TT>TT 태그는 글자를 타자체로 표현합니다.</TT></p>
<p>BIG 태그는 글자를 주변의 글자보다 <BIG>크게</BIG>로 표시합니다.</p>
<p>SMALL 태그는 글자를 주변의 글자보다 <SMALL>작게</SMALL>로 표시합니다.</p>
</body> </html>
|
cs |
2. 예제 2
<OL> 태그로 순서있는 목록을 나열하시오
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<title>OL 태그로 순서있는 목록을 나열하기</title>
<meta http-equiv="refresh" content ="5">
</head>
<body>
<OL type="I"> <LI><HEAD>태그에서 사용하는 태그가 아닌것은?</LI>
<OL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</OL><br>
<LI><FONT>태그의 특성이 아닌것은?</LI>
<OL type="A" start="5">
<LI>size</LI>
<LI>fontname</LI>
<LI>face</LI>
<LI>color</LI>
</OL><br>
<LI>다음 중 HTML 편집기가 아닌것은?</LI>
<OL type="square">
<LI>메모장</LI>
<LI>드림위버</LI>
<LI>나모 웹에디터</LI>
<LI>그림판</LI>
</OL>
</OL>
</body> </html>
|
cs |
3. 예제 3
<UL> 태그로 순서없는 목록을 나열하시오
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<title>OL 태그로 순서없는 목록을 나열하기</title>
<meta http-equiv="refresh" content ="5">
</head>
<body>
<UL>
<LI><HEAD>태그에서 사용하는 태그가 아닌것은?</LI>
<UL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</uL><br>
<LI><FONT>태그의 특성이 아닌것은?</LI>
<UL type="1">
<LI>size</LI>
<LI>fontname</LI>
<LI>face</LI>
<LI>color</LI>
</UL><br>
<LI>다음 중 HTML 편집기가 아닌것은?</LI>
<UL type="circle" start="5">
<LI>메모장</LI>
<LI>드림위버</LI>
<LI>나모 웹에디터</LI>
<LI>그림판</LI>
</UL>
</UL>
</body>
</html>
|
cs |
4. 예제 4
글자에 링크를 연결하여 원하는 위치로 이동시키시오
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>링크를 걸어봅시다</title>
<meta http-equiv="refresh" content ="5">
</head>
<body vlink="blue">
<h3>링크 걸어주면 안잡아 먹지~</h3>
<a href="http://jerryjerryjerry.tistory.com">jerry 이동!</a>
</body> </html>
|
cs |
'Web > HTML & CSS' 카테고리의 다른 글
| [HTML] 이미지, 테이블, 라디오 버튼, 체크박스 (0) | 2018.04.04 |
|---|---|
| [HTML]회원가입창 만들기 (0) | 2018.04.04 |