HTML 기본 태그를 배우다 !
<html>
<head>
<title>문서제목</title>
<style>
body{
height:
5000px;
}
</style>
</head>
<body>
</body>
</html>html 문서는 제일 먼저 html 문서임을 선언하고, 크게 head와 body로 나뉜다. head 밑에 꼭 title과 style을 넣어준다. style에 body의 height를 지정함으로써 페이지의 길이가 길어져 스크롤이 생긴다 !
그리고 이제 저 <바디>와 </바디> 사이에 오는 것들이 우리 눈에 보이게 될 컨텐츠들이다.
오늘은 기본글자태그, 리스트 태그, 서식 태그, 이미지 태그를 배웠다.
정리를 해보자면,
<h1>제목태그1</h1> <!--제일 큰 제목-->
<h2>제목태그2</h2>
<h3>제목태그3</h3>
<h4>제목태그4</h4>
<h5>제목태그5</h5>
<h6>제목태그6</h6> <!--제일 작은 제목-->heading 태그는 이렇게 6가지로 나뉘는데, 이렇게 하면 서버에는 이렇게 나타나게된다.
제목태그1
제목태그2
제목태그3
제목태그4
제목태그5
제목태그6
<body bgcolor="" background="배경이미지경로" text="">
서버 배경의 색깔, 배경의 사진의 경로, 텍스트의 색깔
<br>
줄바꿈 태그 -이 친구는 독립된 태그라 </br>이 필요없다
<p></p>
paragraph를 나타내는 태그
공백 1칸. 원하는 칸 수 만큼 복붙해주면 된다
<font size="" color="" face="">
폰트의 크기, 색깔, 글씨체 설정
<span style="color:"></span>
또한 폰트 설정 태그 (요즘은 span을 더 많이 쓴다)
<b></b>
글자 bold체
<i></i>
글자 italic체
서식 태그
<strong>bold체</strong>
<em>italic체</em>
<mark>highlight</mark>
<del>삭제된것처럼 strike text</del>
<ins>underline</ins>
sup와 sub 태그는 첨자를 나타낼 수 있다
X<sup>2</sup>+Y<sup>3</sup>=Z
물을 나타내는 화학식은 H<sub>2</sub>O위의 서식 태그를 코드로 쳐서 서버로 나타내면,
bold체
italic체
highlight
삭제된것처럼 strike text
underline
sup와 sub 태그는 첨자를 나타낼 수 있다
X2+Y3=Z
물을 나타내는 화학식은 H2O
이렇게 보인다 !!
번호가 없는 목록=Bullet points]
참고로 ul은 unordered list의 줄임말
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
- 첫번째
- 두번째
- 세번째
아! bullet의 모양도 다양하게 설정할 수 있다.
<ul>
<li type="disc">첫번째</li>
<li type="circle">두번째</li>
<li type="square">세번째</li>
</ul>이렇게 하면,
- 첫번째
- 두번째
- 세번째
Bullet의 모양이 바뀌였지?
반면, 번호가 있는 목록 ! ordered list의 줄임말을 사용한다.
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
- 첫번째
- 두번째
- 세번째
짜잔, 이렇게 번호가 생긴다 :)
그런데 !! 우리가 1,2,3,4 말고도 A,B,C,D 혹은 로마자로 번호를 매기고 싶을 때도 있지않은가?
<ol type="A">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>이렇게 type="" 태그를 추가해주면 되는데,
계산용 숫자: 1, 2, 3, 4, ...
영문 소문자: a, b, c, d, ...
영문 대문자: A, B, C, D, ...
소문자 로마자: i, ii, iii, iv, ...
대문자 로마자: I, II, III, IV, ...
- 첫번째
- 두번째
- 세번째
- 첫번째
- 두번째
- 세번째
- 첫번째
- 두번째
- 세번째
- 첫번째
- 두번째
- 세번째
이렇게 자유자제로 가능하다는것 !!
이미지 태그
<img src="이미지경로" vspace="" hspace="" alt="">
vspace 는 세로여백을,
hspace 는 가로여백을 나타낸다.
<img src="이미지경로" align="" alt="">
align 은 정렬의 태그로,
left, right 혹은 top, bottom의 움직임이 있다.
하지만, 이미지는 left,right로 밖에 못 움직인다.
<img src="이미지경로" width="" height="">
width,height로 이미지의 가로세로 크기를 설정할 수 있다.오늘은 이 정도를 배웠다 !
이렇게 블로그로 정리하면서 복습 효과가 있어서 넘나 좋구만 :)
사실 html은 생활코딩으로 혼자 한번 싹 공부한 적이 있어서 너무 낯설진 않았다 !
이게 바로 예습의 중요성 ????!! CSS도 한번 혼자 훑고 가야겠다는 다짐을 하게 됐다 !!
또한, 영어 잘하는게 엄청난 도움이 되는걸??? 을 느꼈다 !!
태그를 무식하게 다 외우려고 하지 않아도 각 태그의 역할을 알게되면 그 영어가 보이고, 무슨 단어의 줄임말인지 감이 와서 자연스레 익혀진다 !! 그 태그도, 그 태그의 역할도 >_< 최고!
