html 태그 총정리 - 이미지, 하이퍼링크, 문자 및 문서 등
HTML이란, Hyper Text Markup Language의 약자로 웹 페이지를 제작하는 부분에서 사용되는 언어입니다. HTML은 주로 태그를 사용해 웹 페이지를 제작하게 되죠. 그렇기 때문에 태그의 기본적인 개념을 이해해야 제작하는 부분에서 어려움 없이 쉽게 제작하실 수 있습니다. 그래서 오늘 포스팅에서는 HTML 태그에 대해서 알아보도록 하겠습니다.
이미지 태그
- 이미지 삽입(src) : <img src="이미지 파일명.jpg"> 웹문서와 이미지가 같은 경로에 존재하는 경우 파일명만 입력해야 하며, 경로가 다른 경우 경로까지 추가로 입력해야 합니다.
- 이미지 정렬(align) : <img src="이미지 파일명.jpg" align="left"> Align 속성에 left(좌측), right(우측), middle(중앙), baseline(기준선), top(상단), bottom(하단), texttop(문자 상단), absmiddle(문자 중간), absbottom(문자 하단)을 입력하여 이미지의 위치를 정렬시킬 수 있습니다.
- 이미지 테두리 표시(border) : <img src="이미지 파일명.jpg" border="10"> 이미지 삽입 태그 뒷 부분에 border로 이미지 테두리 두께를 설정할 수 있습니다.
- 이미지 여백 조절(hspace, vspace) : <img src="이미지 파일명.jpg" hspace="10" vspace="10"> 이미지 파일명 뒷부분에 hspace(수평), vspace(수직)을 입력하여 여백을 조절할 수 있습니다.
- 마우스 오버 시 문자 표시(alt) : <img src="이미지 파일명.jpg" alt="문자"> 이미지에 마우스를 올려놓았을때 문자가 표시되도록 하고 싶다면 alt 속성 안에 원하는 문구를 넣어주면 됩니다.
문자 태그
- 굵은 문자 표시(b) : <b> 문자 앞에 b 태그를 넣을 시 해당 문자가 굵게 변합니다.
- 글씨체 변경(font-face) : <font size="5" face="돋음"> 글씨체 부분에 자신이 원하는 폰트를 넣으면 됩니다.(ex. 굴림, 바탕, 돋음, 궁서 등)
- 글자색 변경(color) : <font size="5" color="black"> font 태그 안에 color 속성을 추가하여 원하는 색으로 변경이 가능합니다. 이때 주의해야 할 점은 컬러명을 반드시 영어로 입력해야 합니다.
- 폰트 사이즈 조절(font size) : <font size="1~7"> 문자 크기를 1부터 7까지 지정하여 크기를 조절할 수 있습니다.
- 공백 추가( ) : 문자 사이에 공백을 추가하고 싶은 경우 를 넣으면 공백이 생기게 됩니다.
문서 태그
- 문서 여백 지정(topmargin, leftmargin) : <body topmargin="0" leftmargin="0"> 여백 없는 페이지 생성
- 배경 이미지 설정(background) : <body background="파일명.jpg"> 이미지 파일과 웹 문서는 같은 경로에 존재해야 합니다. 그렇지 못한 경우 경로까지 지정해야 제대로 적용이 됩니다.
- 배경색 설정(bgcolor) : <body bgcolor="색상"> 지정한 색상으로 배경색을 설정합니다.
- 줄 변경(br, p)
- 일반적인 워드 문서의 경우 엔터키를 누르면 줄변경이 가능하고.
- HTML 문서의 경우 <br> 태그를 이용해 줄 변경을 해야 합니다.
- 그리고 기존보다 한 칸을 더 띄워서 줄 변경을 원하는 경우 <p> 태그를 이용하면 됩니다.
하이퍼링크 태그
- 하이퍼링크 추가(a href) : <a href="하이퍼링크 주소"> a href 속성에 자신이 원하는 링크 주소를 입력 후 마우스로 클릭하게 되면 그 해당 주소로 이동하게 됩니다.
- 이미지에 하이퍼링크 추가 : <a href="하이퍼링크 주소"><img src="디날드 블로그.jpg"> 하이퍼링크 태그 뒷부분에 이미지 태그를 넣은 후 해당 이미지를 클릭할 시 지정해놓은 링크로 이동됩니다.
- 이미지에 마우스 오버 시 설명 문구(title) : <a href="하이퍼링크 주소" title="설명문구"><img src="디날드 블로그.jpg"> 하이퍼링크 태그 속성란에 title 속성을 이용해 해당 이미지에 대한 설명을 넣을 수 있습니다.
- 하이퍼링크 색상 설정(link, vlink, alink) : <body link="red" vlink="blue" alink="yellow"> 일반 link(하이퍼링크 색상), vlink(열었던 링크 색상), alink(현재 열고 있는 링크 색상)을 넣어 링크에 자신이 원하는 색상을 설정할 수 있습니다.
- 새창으로 열기(target_blank) : <a href="새창 링크 주소" target="_blank"><img src="디날드 블로그.jpg"> target 속성에 _blank를 넣어 웹 페이지를 새창으로 열 수 있습니다.
해당 페이지 내 특정 지정 이동(#, name) : 이 태그의 경우 원페이스 스크롤 형식의 웹 페이지를 제작할 때 많이 쓰이는 태그입니다.
<a href="#b"> B 지점으로 이동
<a name="b"> B
마무리...
본 포스팅에서 설명해준 태그들만 알아도 웹 페이지를 제작하는데 큰 어려움은 없을 거라고 생각합니다. 하지만 더 자세한 내용들을 배우고 싶은 경우에는 책을 사거나, 유튜브를 보면서 독학해보시길 바랍니다. 여기서 포스팅 마치도록 하겠습니다. 끝까지 봐주셔서 감사합니다!
함께 보면 좋은 글
[IT/IT 인터넷] - 윈도우 비트 확인 방법 2가지
'IT > IT 인터넷' 카테고리의 다른 글
| 윈도우10 단축키 완벽정리 (0) | 2020.07.24 |
|---|---|
| 윈도우10 그래픽카드 확인 방법 (0) | 2020.07.18 |
| 어도비 애프터이펙트(Adobe After Effects) 단축키 정리 (0) | 2020.07.15 |
| 무료 PPT 템플릿 사이트 소개 (0) | 2020.07.13 |
| 카카오톡 오픈채팅방 검색 하는 방법 (0) | 2020.07.12 |
댓글