티스토리 뷰
html태그 공부를 다시 해보기로 마음먹고는 한참을 또 손놓고 있었네요.
싸이월드 미니홈피에 질려갈 때쯤 사람들 사이에서
소소한 개인홈피 만드는 게 유행이 된적이 있었어요.
그때 태그라는 걸 알게 돼서 열심히 공부했던 기억이 납니다.
나모웹에디터 아시지요? 지금도 이 프로그램을 사용하는지 잘 모르겠는데요,
그때는 이 프로그램을 이용해서 홈페이지를 만들고 했었거든요.
전 그때 한창 태그 공부에 빠져 있을 때라 나모를 사용하지 않고 메모장에
열심히 태그를 하나하나 적어서 홈페이지를 만들었던 기억이 나요.
물론, 전문적인 홈페이지는 전혀 아니고요~ ㅋ ㅋ ㅋ ㅋ
화면 분할하고, 테이블 간단하게 짜고 게시판은 제로보드에서 마음에 드는 걸로
가져다가 달고~~~홈페이지에 음악도 여러 곡 차례로 나오게 설정하고~
아마 그때 음악 파일은 asf였던 것 같아요.
로그인 페이지도 제로보드에서 가져다가 달아놓고 회원이 하나, 둘
늘어날 때마다 설레었던 기억도 납니다.^^
생각해보니 그때가 15년 전쯤 되네요.
태그 얘기하다가 추억담에 서론이 길어졌는데요, 15년이 지난 지금 전 태그를
모두 모두, 아주 깨끗하게 잊어버린 상태입니다.
티스토리를 시작하게 되면서 태그를 어느 정도는 알아야겠기에 다시 공부를 시작했어요.
함께 공부하는 입장에서 고려하여 봐주신다면 정말 감사하겠다는 말씀드리면서~
html 글자 모양, font 태그, 글자 속성 포스팅 시작하겠습니다.^^
1. html 제목 표시하기
<hn> 태그는 제목 역할을 하는 태그인데요, <hn> 태그에서 h는 header를 의미합니다.
<h1>이 가장 큰 제목을, <h6>이 가장 작은 제목을 나타내는데요,
숫자가 작을 수록 우선순위가 높고 글자의 크기가 커집니다.
<hn> 태그가 적용된 텍스트는 일반 텍스트보다 진하게 표시되고,
앞뒤에 빈 줄이 생깁니다.
<h1> ~ </h1>
<h2> ~ </h2>
<h3> ~ </h3>
<h4> ~ </h4>
<h5> ~ </h5>
<h6> ~ </h6>
아래는 <hn>태그를 이용한 예제인데요, </body>바로 위에 있는
텍스트는 <hn>태그를 적용하지 않은 기본 형식이니 폰트 크기를 비교해보세요~
<html> <head> <title>★☆★☆hn 태그★☆★☆</title> </head> <body> <h1>라이언이 제일 귀여워</h1> <h2>라이언이 제일 귀여워</h2> <h3>라이언이 제일 귀여워</h3> <h4>라이언이 제일 귀여워</h4> <h5>라이언이 제일 귀여워</h5> <h6>라이언이 제일 귀여워</h6> 라이언이 제일 귀여워 </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
2. html font 태그
font 태그는 글자의 크기, 색상, 글꼴을 지정하는 데 사용합니다.
<font size="글자크기" color="글자색상" face="글꼴"> ~ </font>
◈ size=“글자크기”
◈ color="글자색"
글자 색상을 지정하는 것으로, 색상 이름과 색상 값(색상코드) 모두 이용할 수 있습니다.
색상 이름은 red, green과 같은 값이고, 색상 값(색상코드)은 ff9cff 와 같은 값입니다.
색상 코드는 아래 링크를 클릭하시면 보실 수 있습니다.
2018/04/15 - [기억하고 싶은 정보/이런저런 자료] - 블로그, 카페, 포토샵 할 때 등등 사용할 수 있는 색상코드
◈ face="글꼴"
글꼴을 지정하는 것으로, 해당 문서를 보고 있는 이의 컴퓨터에도 해당 글꼴이 있어야 볼 수 있으므로
기본 글꼴을 사용하는 것이 좋습니다.
윈도우에 설치되어 있는 한글 기본 글꼴은 굴림체, 바탕체, 궁서체, 돋움체 등입니다.
아래는 <font> 태그를 이용한 문서입니다.
<html> <head> <title>★☆★☆font 태그★☆★☆</title> </head> <body> <center> <font size="+2" color="green" face="궁서체">안녕하세요~!!</font><br> <font size="6" color="purple" face="굴림체">방문해 주셔서 감사합니다.</font><br> <font size="-1" color="ff9cff" face="돋움체">항상 행복하시길 바라요♡</font><br> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
3. html 글자 속성 태그
글자 속성을 나타내는 태그 중 <b>태그, <i>태그가 주로 많이 사용되는데요,
이 외에도 속성을 나타내는 많은 태그가 있답니다.
◈ <b> <strong> : 굵은글씨, 강조
<b>태그와 <strong>태그는 동일하게 글자가 굵어지는 효과를 줍니다.
눈으로 보면 <b>태그와 <strong>태그는 똑같아 보이지만 컴퓨터는 단순히 텍스트를 굵게 표시한 <b>태그와,
텍스트를 강조하는 의미로 사용된 <strong>태그를 구별한다고 합니다.
아래는 <b>태그와 <strong>태그를 이용한 문서입니다.
첫째 줄에 있는 글자는 아무것도 적용하지 않은 상태이니 비교해보세요.
<html> <head> <title>★☆★☆<b>태그와 <strong>태그★☆★☆</title> </head> <body> <center> <font size="5" color="hotpink" face="굴림체">안녕하세요!!</font><br><br> <font size="5" color="hotpink" face="굴림체"><b>안녕하세요!!</b></font><br><br> <font size="5" color="hotpink" face="굴림체"><strong>안녕하세요!!</strong></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <i> <em> : 이탤릭체
<i>태그와 <em>태그는 동일하게 글자를 기울어지게 만들어 줍니다.
<i>태그는 italic(이탤릭체)에서 온 태그이며, <em>태그는 강조를 뜻하는
emphasize에서 온 태그입니다.
<i>태그는 단순히 이택릭체로 표시해주는 태그이고, <em>태그는 의미론적으로
흐름을 강조하고 싶은 부분을 지정할때 사용하는 태그입니다.
<i>태그와 <em>태그 역시 웹문서로 보면 똑같이 기울어진 것으로 보이지만
컴퓨터는 <i>태그와 <em>태그를 다르게 인식한다고 하니 참고부탁드립니다.
아래는 <i>태그와 <em>태그를 이용한 문서입니다.
첫째 줄에 있는 글자는 아무것도 적용하지 않은 상태이니 비교해보세요.
<html> <head> <title>★☆★☆<i>태그와 <em>태그★☆★☆</title> </head> <body> <center> <font size="5" color="blue" face="굴림체">안녕하세요!!</font><br><br> <font size="5" color="blue" face="굴림체"><i>안녕하세요!!</i></font><br><br> <font size="5" color="blue" face="굴림체"><em>안녕하세요!!</em></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <u> <ins> : 밑줄, 추가
<u>태그와 <ins>태그는 동일하게 글자에 밑줄을 그어주는데 엄밀하게 구분하면
<u>태그는 단순히 밑줄을 긋고 싶을 때 사용하고, <ins>태그는 새로 추가된 내용을
의미할 때 사용합니다.
이 역시 웹문서로 열어서 보면 똑같아 보이지만 컴퓨터는 다르게 인식합니다.
아래는 <u>태그와 <ins>태그를 이용한 문서입니다.
첫째 줄에 있는 글자는 아무것도 적용하지 않은 상태이니 비교해보세요.
<html> <head> <title>★☆★☆<u>태그와 <ins>태그★☆★☆</title> </head> <body> <center> <font size="5" color="green" face="굴림체">안녕하세요!!</font><br><br> <font size="5" color="green" face="굴림체"><u>안녕하세요!!</u></font><br><br> <font size="5" color="green" face="굴림체"><ins>안녕하세요!!</ins></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <s> <del> : 가운데 줄 긋기, 취소
<s>태그와 <del>태그는 동일하게 글자 가운데에 선을 긋는 효과를 나타내지만
<s>태그는 단순히 텍스트 가운데 줄을 긋고 싶을 때 사용하고, <del>태그는 텍스트를
삭제한다는 의미로 사용합니다.
아래는 <s>태그와 <del>태그를 이용한 문서입니다.
첫째 줄에 있는 글자는 아무것도 적용하지 않은 상태이니 비교해보세요.
<html> <head> <title>★☆★☆<s>태그와 <del>태그★☆★☆</title> </head> <body> <center> <font size="5" color="darkviolet" face="굴림체">안녕하세요!!</font><br><br> <font size="5" color="darkviolet" face="굴림체"><s>안녕하세요!!</s></font><br><br> <font size="5" color="darkviolet" face="굴림체"><del>안녕하세요!!</del></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <big>태그와 <small>태그
<big>태그는 글자를 한 단계 크게 표시할 때 사용하고,
<small>태그는 글자를 한 단계 작게 표시할 때 사용합니다.
아래는 <big>태그와 <small>태그를 이용한 문서입니다.
<html> <head> <title>★☆★☆<big>태그와 <small>태그★☆★☆</title> </head> <body> <center> <font size="5" color="red" face="굴림체">안녕하세요!!<br><br> <big>안녕하세요!!</big><br><br> <small>안녕하세요!!</small></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <mark> 태그
중요한 글에 형광펜을 그어서 표시를 해놓지요?
mark 태그는 일명 형광펜 태그입니다.
형광펜으로 텍스트를 강조하는 태그랍니다.
아래는 <mark>태그를 이용한 문서입니다.
<html> <head> <title>★☆★☆<mark> 태그★☆★☆</title> </head> <body> <center> <font size="5" color="black" face="굴림체"><mark>안녕하세요!!</mark></font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
◈ <sup>태그와 <sub>태그
<sup>는 위 첨자이고, <sub>는 아래첨자입니다.
아래는 <sup>태그와 <sub>태그를 이용한 문서입니다.
<html> <head> <title>★☆★☆<sup>태그와 <sub>태그★☆★☆</title> </head> <body> <center> <font size="5" color="black" face="굴림체"> <sup>윗첨자</sup>안녕하세요!!<sub>아래첨자</sub> </font> </center> </body> </html> |
위 문서를 웹에서 열면 아래와 같습니다.
※ 여러 태그를 중복 적용할 때는 나중에 연 태그부터 먼저 닫습니다.
4. html 특수 문자
특수 문자를 나타내는 기호도 있는데요, 사용할 때 주의해야 할 점은
반드시 소문자로 입력해야 한다는 것입니다.
'기억하고 싶은 정보 > HTML 공부하기' 카테고리의 다른 글
| html 문서 모양 줄바꾸기, 문단바꾸기, 수평선 그리기 (0) | 2018.01.15 |
|---|---|
| html 문서 설정 (배경색 설정하기 / 배경을 이미지로 설정하기 / 문서 기본글자색 설정하기) (0) | 2018.01.05 |
| HTML 이란? / HTML의 구성요소 / HTML의 기본구조 (0) | 2018.01.03 |