강사님이 피보나치(?)모양처럼 비슷하게 만들어보라고 하셨다.

위와같은 그림으로 만들어야 하는데

사용한 코드는 아래와 같다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse;
    }
    td{
        border:1px solid black;
        text-align: center;
    }
</style>
<body>
    <table>
        <tr>
            <td width="100px" height="50px" colspan="3">A</td>
        </tr>
        <tr>
            <td width="50px" height='50px' rowspan="2">B</td>
            <td width='25px' height='25px'>C</td>
            <td width='25px' height='25px'>D</td>
        </tr>
        <tr>
            <td height='25px'>E</td>
            <td height='25px'>F</td>
        </tr>
    </table>
</body>
</html>

table에서 

첫번째 tr에 A,A,A

두번째 tr에서 B,C,D

세번째 tr에서 B,E,F를 놓는 방식으로 하고

 

전체 높이와 너비를 100px로 맞추는 식으로 해서 위와같은 모양을 만들게 되었다.

 

다음으로 위 그림과같은 표를 만들어 보았는데 코드는 다음과같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse;
    }
    td{
        border:1px solid black;
        text-align: center;
    }
</style>
<body>
    <table>
        <tr>
            <td width='25px' height='25px'>1</td><td width='25px'>2</td><td colspan="2" rowspan="2">5</td>
        </tr>
        <tr>
            <td width='25px' height='25px'>3</td><td width='25px'>4</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">B</td> <td width='25px' height='25px'>C</td>  <td width='25px'>D</td>
        </tr>
        <tr>
            <td height='25px'>E</td><td>F</td>
        </tr>
    </table>
</body>
</html>

이번에는  표를

1,2,5,5

3,4,5,5

B,B,C,D

B,B,E,F

로 놓고 겹치는 부분들을 cospan, rowspan을 사용하여 합쳐서 위와같은 표를 만들게 되었다.

'국비지원학원 > HTML' 카테고리의 다른 글

공부한 HTML의 Tag 정리  (0) 2021.10.26
HTML  (0) 2021.10.26 
<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에서는 몇몇 단어나 스페이스바 특수문자는 태그로 인식해버리기 때문에 내용 중간에 삽입하고 싶다면

&lt; = <  여는꺾쇠를 출력할때 사용
&gt; = > 닫는꺾쇠를 출력할때 사용

&nbsp; (공백, 스페이스바한칸)
&amp; & 앰퍼샌드, &문자를 출력하고싶을때 사용

&quot; = " 큰따옴표 하나

위에있는 단어를 사용해야 한다.

 

약어

<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

HTML에서 추천하는 기본 구조

<html>
<head>
	<meta>
    <title>
</head>
<body>
	<header></header>
    <nav></nav>
    <main>
    <article></article>
    <aside></aside>
    </main>
    <footer></footer>
</body>
</html>

을 기본 구조로 갖는다.

'국비지원학원 > HTML' 카테고리의 다른 글

<table>태그 응용  (0) 2021.10.26
공부한 HTML의 Tag 정리  (0) 2021.10.26

+ Recent posts

티스토리툴바