03.HTML 완전기초 태그
안녕하세요 리듬입니다.
이번글에서는 저번글에 이어서 태그들 배워볼거에요.
일단 배웠던게 얼마 안되니까 배웠던거부터 다시 봅시다!
기본적인 태그 다시 알아보기!
빨간색 박스 <title>은 페이지 제목이 되구요!
<h1>~<h6>는 헤딩부분 본문 제목을 쓸때 사용합니다.
점점 작아지는데 6번째로 크다는 좀 아닌거같네요.. 밑에 글씨보다 작은데...
그리고 <p>태그는 문단을 구분해서 적을때 사용합니다. 자동 줄바꿈이 돼요!
그리고 <br>태그는 엔터같은거죠!
다음은 글씨형태를 바꿔주는 태그네요.
<hr>태그는 밑에 선 보이시죠? 선을 나타냅니다. <br>태그처럼 끝태그는 필요없습니다!
근데 <b>와 <strong> 그리고 <em>과 <i>는 똑같아보이죠?
겉으론 같아보이는데 의미가 있다고 합니다.
<i>태그와 <b>태그를 사용하면 겉으로 보았을때 굵은 글씨와 이탤릭체로 보이기만 하구요.
<em>태그와 <strong>태그를 사용하면 겉으로 보았을때 굵은 글씨와 이탤릭체로 보이고
또 음성으로 읽어주는 도구들이 있잖아요? 거기서도 강조를 해서 읽어준다고 합니다.
같은 줄로만 알고 있었네요..!
<mark>태그는 텍스트에 마킹효과가 돼구요.
<del>태그는 삭제된 태그 표기시 사용하구요. 썼던 글을 다른 내용으로 바꿀때 사용하죠. 이렇게..
<ins>태그는 삽입된 텍스트에 사용되구요.
<address>태그는 작성자의 주소나 연락처를 나타낼때 사용합니다. 보통 맨밑에 쓰죠!
다음은 주석인데요.
주석은 <!-- 주석내용 --> 이렇게 사용합니다.
주석은 웹페이지에 영향을 주지않습니다! 주석에 설명이 되어있죠?
저런식으로 주석에 설명을 해놓는거에요. 다른사람이 봤을 때 알 수 있겠죠?
작성자 본인이 나중에 못알아볼 수도 있기 때문에 적어놓는게 좋습니다!
나중에 CSS도 배울텐데 <style>안에서는 /* */주석을 사용합니다.
나중에 CSS 배우면서 자연스럽게 쓰게 될거구요!
그리고 태그안에 태그를 사용할 수 있어요.
위에 보시면 <p>태그안에 <b>태그와 <font>태그가 사용된걸 볼 수 있어요.
그런데 <p><b></p></b> 이런식으론 사용할 수 없습니다.
나중에 사용된 태그를 먼저 닫아줘야해요(?)
위에처럼도 가능하구요!
아! 그리고 <font>태그는 글씨의 크기,색,글씨체를 변경할 수 있어요.
<font> 태그 안에 size,color,face 이렇게 있잖아요? 얘네들을 속성이라고 합니다.
그 옆에 15나 "blue"같이 값을 주는데 그 값들을 속성값이라고 하구요!
태그마다 속성이 있는게 있고 없는게 있어요.
하나의 태그가 여러개의 속성을 가질 수도 있습니다. 위처럼요!
<body>태그에서 사용할 수 있는 속성이에요.
bgcolor 속성은 배경색을 넣어줍니다. 저 잘라놓은 부분만 오렌지색이 된게 아니구요! 다 바뀐거에요.
그리고 위아래 다른건 속성값인데 저렇게 blue나 red black white 이런식으로 써도 되고
밑에처럼 색상코드로 속성값을 줄 수도 있습니다.
위에는 <body>태그의 background 속성인데요. 배경에 사진을 넣을 수 있습니다.
보시면 속성값에 "image/imagesample.jpg" 이렇게 되어있는데요. 이건 이미지가 있는 경로에요.
상대경로라고 하는데요!
위에 보시면 html폴더안에 image폴더와 작성한 test.html파일이 있습니다.
그리고 image폴더안에 imagesample.jpg가 있구요.
"image/imagesample.jpg"라는건 작성한 html파일 기준에서 이미지가 어디있는지
경로를 나타내는거에요. 만약 test.html이 html폴더밖에 있으면
경로는 "html/image/imagesample.jpg"가 됩니다.
반대로 이미지가 밖에 있으면 어떻게 할까요?
html파일이 test폴더안에 있고 이미지가 폴더 밖에 있죠?
html파일 기준에서 보면 이미지는 상위폴더에 있는거에요.
그래서 경로를 "../imagesample.jpg" 라고 해줍니다. ..이 상위폴더를 뜻해요.
폴더에 빨간박스처럼 화살표가 위를 가리키는게 있잖아요! 저걸 누르면 상위폴더로 가듯이
.. 표시가 상위폴더를 말합니다. ..이 있으면 저걸 누른거라고 생각하시면 됩니다.
상위폴더로 갔는데 또 상위폴더가 있으면 "../../image.gif" 이렇게 사용합니다.
절대경로는 "file:///C:\/Users/pc1/Desktop/html/images/bgimg/imagesample.jpg"
처럼 최상위부터 경로를 설정해주거나
"http://도메인/image/imgsample.jpg"> 이런식으로 그 사이트에 있는 폴더의
이미지 경로를 설정할때 사용하는데요.
보통 상대경로를 많이 사용합니다.
그리고 align 속성이 있는데요.
[출처] 상대경로와 절대경로란? (디자인 플러스) |작성자 아이팡
이 속성은 정렬할 수 있게 해주는데요. 위처럼 꼭 <p>태그나 <h1>태그에서만 쓸 수 있는게 아니에요.
나중에 더 배우게 되면 아마 자연스레 생각이 날거에요.
이번 글은 여기서 마치구요!
작성을 하다보니 뭐부터 어디부터 어떤것부터 작성을 해야하는지.. :(
너무 조잡하게 쓰고있는 느낌..? 정리가 잘 안되는 느낌이 많네요..
글 하나 작성할때 2~3가지씩만 정해놓고 해야할 거 같습니다!
다음글에서 뵙겠습니다~
:)
'HTML&CSS' 카테고리의 다른 글
| 02.HTML 에디터 설치와 완전기초 feat.서브라임텍스트3 (0) | 2017.07.27 |
|---|---|
| 01.HTML 초보 완전기초 (0) | 2017.07.26 |
