안녕하세요~~
이번에는 HTML5 페이지에 들어가는 태그들에 대해서 작성해보겠습니다.
활용할 수 있는 태그들이 정말정말 많습니다...
글이 되게 길어질 거 같기는 한데
한번 같이 봐주세요...!!
0. <br>, <hr>, <h3>, <p>, 특수기호
저번 시간에서 배웠던 태그들입니다!
다시 한번 복습하자면
<br>은 enter로 띄어쓰기, <hr>은 줄 긋기, <h1>...<h6>은 폰트 크기 설정, <p></p>는 단락 설정 입니다.
기억.. 나시죠...? 기억 난다고 해주세요...
1. 툴팁 달기 (title 속성)
다음은 툴팁 달기 입니다.
툴팁이란, 제목에 마우스를 가져다가 올리면 나오는 글씨 입니다.
보다시피 <body>부분에서 <h1>...<h3> 안에 적어 넣으시면 됩니다!
형식은 <h3 title = "~~~~"> 입니다.
이렇게 나옵니다!
마우스 대고 좀 기다려야 뜨네요
왜 안 되냐고 승질내고 있었는데 그냥 내가 성급해서였음 ㅎ
2. <pre>
<pre>는 개발자가 작성한 그대로 출력시키는 태그입니다.
<p> 태그는 enter를 해도 모두 합쳐버리는데 말이죠
결과를 확인하면
이렇게 나옵니다!
3. 텍스트 꾸미기
텍스트의 크기, 굵기, 글씨체 등을 바꾸는 태그를 사용해보도록 하겠습니다.
- <b> : 진하게
- <strong> : 강조
- <em> : 휜 글씨
- <i> : 이탤릭체
- <small> : 작은 글씨체
- <del> : 삭제 (줄 찍 그어짐)
- <ins> : 추가
- <sup> : 윗첨자
- <sub> : 아래첨자
- <mark> : 하이라이팅
4. <div> 와 <span>
<div>와 <span>에 들어가기 전에
블록 태그와 인라인 태그에 대해 간단하게 설명하겠습니다
1. 블록 태그 (block)
- <p>, <h1>...<h6>, <div>, <ul> 등이 있습니다.
- 말 그대로 "블록"입니다.
<p></p>, <div></div> 이런 식으로
항상 새 라인에서 시작하고, 한 라인을 독점해서 사용한다는 특징이 있습니다.
2. 인라인 태그 (in line)
- <strong>, <a>, <img>, <span> 등이 있습니다.
- 블록 속에 삽입된다는 특징이 있습니다.
(인라인 in line 이니까 한 라인을 독점하는 블록 안에 in line)
이제 블록 태그와 인라인 태그 중에
가장 많이 쓰는 <div> 와 <span>으로 예시를 들어드리겠습니다.
<div>는 <p>와 비슷하게 사용할 수 있습니다. 둘 다 단락을 나눠줘요.
<div>는 네모 칸 안에 가둬둘 수 있는데
<div style = "background-color:~~~; padding:20px"> 로 작성하면
네모칸의 배경색과 크기를 설정할 수 있습니다.
짠 이렇게 나옵니다
이 글에서 <span>을 사용해 볼까요
<span>은 강조할 때 주로 사용하는 듯 합니다 .
<span style = "color:~~~"> 으로 색을 설정할 수 도 있습니다.
그럼 이런 식으로 출력됩니다 예힝
5. <base>
아주그냥 끝이 없네여 10개도 더 남았다니
그래도 열심히 써내려가 봅시다~~
먼저 meta데이터 라는 것부터 알아보겠습니다.
1. meta 데이터 : 데이터를 설명하는 데이터 입니다.
예시) 오디오 데이터의 meta 데이터 : 재생 시간, 채널 수 등
사진 데이터의 meta 데이터 : 사진 찍은 장소, 시간 등
2. HTML에서 meta데이터를 담기 위한 태그들은
<base>, <link>, <script>, <style>, <title>, <meta> 등이 있습니다.
3. 이 meta 태그들은 <head> 태그 안에서 작성해야 합니다 .
(<script>태그는 <body> 안에도 작성할 수 있습니다>)
이제 <base> 태그의 예시를 한번 작성해 보겠습니다.
<base> 태그는 (웹 페이지들의) 기본 URL과 (페이지가 출력될) 윈도우를 지정할 때 사용합니다.
mysite.com 이라는 사이트가 있고, 그 사이트의 score라는 곳에 제 성적들을 볼 수 있다고 가정해볼게요
아직 안 배웠지만 하이퍼링크를 작성한 코드인데요,
이 코드에서 "http://www.mysite.com/score" 부분이 계속 반복됩니다.
이 코드를 <base> 태그를 사용하여 간략하게 바꿔보겠습니다.
이렇게 <head></head>에 <base href = "~~~~">를 사용하면
같은 부분을 베이스로 깔아주게 됩니다 .
6. <link>와 <meta>
<link> : 외부 링크 연결
<meta> : 다양한 메타 데이터 표현 (웹 페이지의 저작자, 문자 인코딩 방식, 내용 등)
예시) 저작자 : <meta name = "author" content = "~~~">
예시) 내용 설명 : <meta name = "description" content = "~~~~~~~">
예시) 키워드 : <meta name = "keyword" content = "~~~~~">
+ <meta charset = "utf-8"> : charset 속성으로 웹 페이지레 사용하는 문자 코드 지정.
"UTF-8"이 기본값이므로 생략 가능하지만 다양한 브라우저 환경에서 처리하기 위해 작성함.
7. <img>
<img src = "~~~"> <img alt ="~~~"> <img width ="~~~"> <img height ="~~~"> 로 작성합니다!
src : 이미지 파일의 URL. 필수 속성입니다.
alt : 문자열. 이미지에 문제가 생기면 출력됩니다. 필수 속성입니다.
width : 이미지의 너비. width를 생략하면 원본의 너비가 출력됩니다.
height : 이미지의 높이. height를 생략하면 원본의 높이가 출력됩니다.
이런식으로 코딩을 하는데요
꼭!! .html문서가 있는 공간에 media파일을 만들고, 그 안에 jpg나 png 사진을 넣어야합니다
이렇게용
저 media 파일에 이런식으로 사진을 넣어줘야 잘 적용됩니다~~
출력시켜보겠습니다
쨘
잘 나오네용
아 그릭요거트 너무 맛있어요 저 지금 하루에 2-3번씩은 먹고 있음 사실 그래서 오늘 대용량 사버림 코코넛청크 진심 미친놈
8. <ol>
리스트에 대해서 해볼 겁니다
리스트는 말 그대로 1번 2번 3번... 하는 그 리스트입니다.
크게 3가지의 리스트가 사용됩니다.
1) <ol> : 순서 있는 리스트 (orsered list)
2) <ul>: 순서 없는 리스트 (unirdered list)
3) <dl> : 정의 리스트 (definition list)
그중 <ol>에 대해 먼저 알아보겠습니다!
<ol type = "~~~">
<li>~~~</li>.....<li>~~~</li> 이렇게 작성합니다 (</li>은 생략 가능)
예시를 한번 보여드리겠습니다
저는 A, B, C, D... 로 작성시켜 보겠습니다
<ol type = "A">로 쓰면 됩니다
좋야요 좋아요 잘 나왔네용
9. <ul>
이번에는 <ul>을 해보겠습니다
위에 예시에서 <ol>을 <ul>로만 바꿔보면
d이렇게 A, B, C, D...가 모두 점으로 바뀝니다
순서없는 리스트라는 게 뭔지 아시겠죠
추가로 <ol>과 <ul>을 한번에 사용해보겠습니다. (중첩리스트 라고도 불러요)
<ul> 안에 또 하나의 <ul>과 <ol>하나를 넣어봤습니다!
어떻게 나올지 상상을 한번 해보시구연
결과는!! 두구두구
예에ㅔㅔㅔ 굳굳
10. <dl>, <dt>, <dd>
<dl> : 하나로 묶어주는 역할
<dt> : 용어/제목을 적는 곳 (<strong></strong>을 사용하여 글씨색 진하게 만들기)
<dd> :
</dl></dd></dt>는 써도 되고 생략해도 되는듯? 합니다
(모르고 빼먹었는데 잘 되는 거 보면 괜찮은듯..?? 히히)
결과를 보면~~~
이렇게 설명 부분은 자동으로 띄어쓰기 돼서 나와욥
11. <table>
<table>을 만들 때 사용되는 태그는 기본적으로
1) <table border = "숫자"> </table>
2) <caption> 표의 제목 </caption>
3) <thead> <tr> <th>~~~</th> <th>~~~</th> <th>~~~</th> </tr> <thead>
4) <tfoot> <tr> <th>~~~</th> <th>~~~</th> <th>~~~</th> </tr> <tfoot>
5) <fbody> <tr> <th>~~~</th> <th>~~~</th> <th>~~~</th> </tr> <tbody>
를 사용합니다
예시를 보면서 어떻게 사용되는지 이해 해보겠습니다
+) tr과 th 안 헷갈리게 주의!! 결과가 이상하게 출력돼요 (경험담)
<tr>은 묶음 봉다리 같은 역할 입니다.
<th>는 글씨가 강조됩니다. head. 그래서 <thead>와 <tfoot>에서 사용
<td>는 데이터 입니다. table data. 그래서 <tbody>에서 사용
이렇게 나옵니다!
표에 사진도 넣을 수 있습니다.
한번 넣어보시죠!
저는 최근에 먹은 그릭요거트 사진 3개를 넣었습니다 파항항
마찬가지로 사진은 (html 문서 있는 공간에 media파일 만들고 -> 그 media 파일에 사진 저장) 하시면 됩니다!
+ png 파일이면 ~~~.png, jpg 파일이면 ~~~jpg 로 작성하셔야 합니다
출력할 사진들을 media 파일에 넣으시고~~
헥 사진 짱 크네요
사진 크기 설정하겠습니다;;
width = "~~~" 와 height="~~~"를 넣겠습니다.
alt="~~~"는 귀찮아서... 생략....
다급하게 바꾼 코드
드디어 말짱하게 나오네요 ^^;; 내 그릭요거트
테이블을 사용하면 이렇게 깔끔하게 표로 출력됩니다!
표가 꼭 3x3, 4x4로 나오지는 않죠??
이번에는 행과 열을 병합하는 법을 배워보겠습니다
행은 <td rowspan = 숫자> ~~~ </td>
열음 <td colspan = 숫자> ~~~ </td> 으로 작성합니다
~~~에 넣으면 맨 위로 작성이 되는데요
조금 헷갈리니 예시를 보면서 말씀해 드리겠습니다.
저는 <thead>에 종류와 이름 두 가지 옵션을 넣겠습니다.
그리고 <tbody>를 채워넣었는데여,
종류, 이름 종류, 이름 종류, 이름 종류, 이름 ... 이런식으로 넣은 게 보이시나요??
<tr> <td>종류</td> <td>이름</td> <tr> 이렇게 작성하였습니다. (tr은 묶음, td는 데이터 ㅇㅇ)
이렇게 하고 결과를 보면!
짠~~ 이따구로 나옵니다
얼른 가서 표 경계선과 넓이를 설정하겠습니다 ^^;;
나머지는 똑같이 하고
<table>에 border = "숫자" width = 숫자px 만 더 넣어줍니다.
드디어 좀 멀쩡해졌네요
이제 병합이라는 것을 해보겠습니다
rowspan = "숫자"를 넣어서 합쳐보겠습니다
와! 지져분!
뭐가 문제일까요? 자세히 째려보니 초코초코 바나나바나나 딸기딸기딸기라 나옵니다
네, 다른 부분은 지워야하는데 깜빡했습니다
2,3개씩 먹고 싶은 제 마음이 반영됐나봅니다
고치러 가겠습니다 함께 가시죠
열심히 지우고... 다시 확인해보면
네 드디어 멀쩡하게 나왔네요 참 쉽죠? (뻔뻔)
이번에는 열 병합을 해보겠습니다~~
열 병합 할 표를 다시 만들어 주시고요~~
중간에 넣음 / 안 넣음끼리 붙어있는 부분을 묶어 보겠습니다!
두구두구
음! 고쳐보러 가시죠
align = center 복붙해서 넣어주기.....
깨끗? 하게 완성~~와~~~~^^
예시부터 글러버린듯 나쁜 그릿요거트 먹어서 혼내주겠어
같은 방식으로 rowspan 과 colspan을 함께 사용하여 표를 만들 수도 있습니다! (귀찮으니 넘어가 버리기)
12. <a>
<a> 는 anchor = 닻에서 따온 태그입니다.
즉, <a>는 하이퍼링크를 만들 떄 사용됩니다. 닻으로 걸어둔 웹페이지나 이미지로 가게 만드는 것이죵
<a>를 사용하는 방법은
1) 같은 웹 사이트의 웹 페이지 하이퍼링크 <a href = "~~~~.html> </a>
2) 다른 웹 사이트의 웹 페이지 하이퍼링크 <a href = "http://www.naver.com"> </a>
3) 이미지 하이퍼링크 <a href = "http://www.naver.com"> <img src = "naver.png" alt="네이버"> </a>
정도가 있습니다
예시를 들어보겠습니다
두근두근
허술하기 짝이 없네요
enter 띄어쓰기와 사진 크기 설정 들어가겠습니다
<br>, <hr>, width="~~~", height="~~~"를 사용하였습니다
고새 까먹어서 위에 찾아본 거는 비밀
사진들을 누르면 둘 다 naver 사이트로 잘 이동합니다!!
_____ "현재 사이트의 다른 페이지로 이동하는 링크"_____에 대해서는 제가 좀 이해를 못해서,... 다시 알아보고 올리기로...!!
위에 코드는
하이퍼링크를 누르면 바로 그 사이트로 이동해버립니다 (현재 페이지가 사라짐)
하이퍼링크를 "새로운 창"으로 띄우는 방법에 대해 알아보겠습니다
"target"을 이용하면 됩니다
예시를 보겠습니다
1) target = "_blank" : 새 창에 하이퍼링크가 열림
2) target = "_self" : 현재 창이 사라지고 그 창에 하이퍼링크가 열림
3) target = "_parent" : 현재 창이 사라지고 그 창에 하이퍼링크가 열림
(현재 창도 하이퍼링크를 통해 열었다면, 현재 창의 부모창에서 열림)
4) target = "_top" : 현재 창이 사라지고 그 창에 하이퍼링크가 열림 ( 최상위( 가장 최고 부모)창에 열림)
13. <iframe>
!
14. target
!
15. <video>
!
16. <audio>
!
툴팁, <pre>, 텍스트 꾸미기, <div>, <span>, <base>, <link>, <meta>, <img>, <ol>, <ul>, <dl>, <dt>, <dd>, <table>, <a>, <iframe>, target, <video>, <audio>
!
'대학교 수업 > HTML5, CSS, JavaScript' 카테고리의 다른 글
| 3.4 HTML 기본문서 만들기 - <div>, <span> (0) | 2024.04.12 |
|---|---|
| 3.3 HTML 기본문서 만들기 - 텍스트 꾸미기 (0) | 2024.04.12 |
| 3.2 HTML 기본문서 만들기 -<pre> (0) | 2024.04.12 |
| 3. 1 HTML 기본문서 만들기 - 툴팁 달기 (title 속성) (0) | 2024.04.12 |
| 2. 웹 페이지와HTML 개발과정 (0) | 2024.04.03 |