<strong>...</strong>
문자의 굵기를 굵게(강조)
<img src="이미지의 주소 or 이미지의 경로">
이미지 삽입
이미지 크기 조정
width='50px' 너비
height='50px' 높이
length='50px' 길이
depth='50px' 깊이
위의 4개중 한개를 골라서 사용
<p>.......</p>
하나의 문단 개념으로
<p>와 </p>태그로 내용을 감싸면, 내용의 위아 아래쪽에 일정한 크기의 공백이 생긴다.
<pre>.....</pre>
pre는 'preformatted' 약자로, <pre></pre> 태그 내에 있는
엔터와 스페이스가 그대로 웹 브라우저에 적용되어 보여지게 된다.
<br>
html은 <p>태그나 <pre>태그를 사용하지 않으면 스페이스바 또는 엔터를 인식하지 못한다.
그럴때 <br> 태그를 사용하면 엔터를 한번 친것으로 간주한다.
<a href="imalright.tistory.com">내 블로그로 이동</a>
<a>코드 내에 href를 사용하면
하이퍼링크를 만들 수 있는데 위에있는 코드처럼 주소를 적지 않고
같은경로내에있는 html 또는 html의 경로를 적어준다면 하이퍼링크를 클릭시 html파일이 열리게 된다.
<h1>...</h1>, <h2>...</h2>, <h3>...</h3>, ...
헤드라인 태그라고한다. 주로 제목으로 넣을때 사용하는 태그이다.
숫자가 커질수록 글자 크기가 작아진다.
<ul>
<li>...</li>
<li>...</li>
</ul>
Unordered List
순서가 없는 리스트를 생성한다.
위의 코드처럼 <li>...</li>사이에 내용을 적어서 사용한다.
순서가 없기에
●...
●...
이런식으로 내용이 나오게 된다.
<ol>
<li>...</li>
<li>...</li>
</ol>
Ordered List
순서가 있는 리스트를 생성한다.
앞에서 말했던 Unordered List와 비슷하지만
순서가 있기 때문에
1.....
2.....
이런식으로 내용이 나온다.
<em>....</em>
글자를 살짝 기울여준다. 위 태그도 주로 글자를 강조할때 사용한다.
<i lang="uk-latn">...</i>
<i>태그
안에있는 내용의 글꼴을 라틴어로 바꿔준다 lang="..."안에 다른나라의 언어를 넣는다면
그쪽의 글꼴로 바꾸어준다.
<em> = <i>비슷하고
<strong> = <b>
tooltip*
절대경로 - Root폴더로부터의 경로 F:\\NCSClass\\HTML\\hi.html
상대경로 - 현재 html파일이 있는 곳으로부터의 경로 hi\\hello.html
같은페이지 내 이동
<a href="#이름">....</a>
을 사용하면 동일페이지의 id가 있는 위치로 이동하게됨
다른페이지의 원하는 위치로 이동
<a href="hi\\first.html#hello">hello로 이동</a>
를 사용하면 hi directory에있는 Flower.html로 이동한뒤 hello라는 id가 있는곳으로 이동하게 된다.
html에서는 몇몇 단어나 스페이스바 특수문자는 태그로 인식해버리기 때문에 내용 중간에 삽입하고 싶다면
< = < 여는꺾쇠를 출력할때 사용
> = > 닫는꺾쇠를 출력할때 사용
(공백, 스페이스바한칸)
& & 앰퍼샌드, &문자를 출력하고싶을때 사용
" = " 큰따옴표 하나
위에있는 단어를 사용해야 한다.
약어
<abbr title="Hypertext Markup Language">HTML</abbr>
HTML에 .....으로 및줄을 치고 마우스를 가져다대면 설명이 나오게 한다.
<sup>...</sup> 위첨자
<sub>...</sub> 아래첨자
첨자를 넣고 싶을 때 사용한다.
표를 만들 때에는
<table>...</table>
태그를 사용하는데 위에있는 이 table 태그에는
행과 열을 다 일일히 넣어주어야 한다.
<tr> - 행
<td> - 열
<!--표 행:3, 열:4-->
<table border=1>
<caption>Tabel 3행 4열</caption>
<thead>
<tr><th>이름</th><th>성별</th><th>생일</th><th>지역</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
</table>
행이 3개고 열이 4개인 표를 만들때 사용한 예제이다
table 에서 caption, thead, tbody, tfoot까지 있지만 잘 사용하지는 않는다
caption = 표의 제목
thead = 표의 맨위에 이름설정
tbody = 표의 몸통
style 태그를 따로 css파일로 만들어서 넣어줄 수 있다.
css파일을 내가현재 사용하는 html파일에서 사용하려면
<head>...</head> 사이에
<link rel='stylesheet' type='text/css' href='style.css'>
를 써준다면 style.css파일을 불러와서 사용할 수 있다.
위 방법을 사용한다면 코드를 깔끔하게 작성할 수 있다.
<style>...</style>
style태그는 head에 넣어도 되고 body에 넣어도되고 html 태그 밖에 넣어도 동작한다.
그리고 위 태그를 사용하는 예제로는
<style>
table{
border-collapse: collapse;
}
td{
border:1px solid blue;
width: 60px;
}
th{
border:1px solid blue;
width: 100px;
background-color: black;
color: yellow;
}
</style>
위처럼 <th>, <td>에 고정된 값을 넣어줄때도 사용하고
<style>
.brd3{
background-color: aqua;
color: black;
border-collapse: collapse;
width: 50px;
height: 30px;
}
</style>
이때처럼 class를 만들어 줄 때에도 사용한다.
css(style) 적용법으로는
1. inline style - tag안에 적용
2. <style>...</style>안에 적용
3. css파일에 적용 하는 방법들이 있는데
우선순위로는
1 > 2 > 3 순으로
1번이 가장 우선으로 적용되고 2번 그후 3번이 적용된다.
HTML의 text정렬
alignment
왼쪽 / 중간 / 오른쪽
left / center / right
vertical alignment
위 중간 아래
top / middle / bottom
사용법으로는
<style>
td{
text-align: center;
}
th{
vertical-align: middle;
}
</style>
처럼 text-align을 사용하면 좌우중 중간으로 적용되고
vertical-align을 사용한다면 위아래중 중간으로 적용되게 된다.
text-align에서 left는 default값이므로 궂이 설정할필요 없다.
<table>을 사용할때 셀을 병합하는 방법으로는
열과 열이 병합 (가로셀끼리 병합) -> colspan
행과 행이 병합 (세로셀끼리 병합) -> rowspan
대신 사용하려면 같은 값을 사용할 때 만 사용에 용이하고
위에서 아래로 병합하거나 왼쪽에서 오른쪽으로 병합을 할 때 뒤에있던
<td> or <th>는 지워줘야한다. 그렇지않으면 오류가 날수도 있다.
'국비지원학원 > HTML' 카테고리의 다른 글
<table>태그 응용 (0) | 2021.10.26 |
---|---|
HTML (0) | 2021.10.26 |