2022-02-15 HTML

GGAE99·2022년 2월 15일
html
0

진도

목록 보기
23/43

오늘은 HTML에 대한 공부를했다.
많은 공부를 하지는 않았고, jdbc프로그램 만드느라 많이 못했다.. 수업 진도도 느렸고 그렇다.
오늘은 태그들에 관해서만 공부했다.
많이 정리 안하고 몇가지만 정리할 것이다.

head / body

head는 제목을 설정해주고
body는 내용이되는 것들을 넣는 곳이다.

<!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>
<body>
    
</body>
</html>
느낌표만 치면 나오는 html의 기본형

기본적인 태그의 사용 방식

<태그> 텍스트 <태그>

이 형식을 기본으로 한다.

주석 <(!-- --)>

어우 어지럽네 진짜. <>만 사용해야함

적다보니까 다 그런다. 모든 태그를 <> 대신에 ()를 사용해서 작성하겠다.

글자 관련 태그

글자 크기

<h1~6> ~ </h1~6>
위의 태그는 글자의 크기를 정해주는 태그이다.
1이 가장크고 6이 가장 작다.
(small)도 있다.
작아졌다. 땃쥐다.

줄바꿈

(hr) <- 이거 괄호() 대신에 <> 이거 넣어줘야함 여기서 쓰면 원래 기능을 여기서함...

요 기능
br도 줄바꿈 기능 여기서 잘 하네 어지럽네 (br)도 이렇게 <>로 바꿔주자

문단 나누기

(p) ~ (/p) / (pre) ~ (/pre)
(p)는 문단 영역을 나누는 태그지만 한개의 공백만 허용하고, 줄바꿈도 별도 태그를 사용해야한다.
(pre)는 그냥 넣은 텍스트를 그대로 출력해준다.

글자 굵기

(b) ~ (/b) / (strong) ~ (/strong)
둘 다 같은듯? 글자를 굵게 만들어줌 뭐지 얜 변한게 없는데 얘도 맞는데
둘 다 같은듯? 글자를 굵게 만들어줌 strong 아닌가? 얘가 더 굵은데?

<b>둘 다 같은듯? 글자를 굵게 만들어줌</b> 뭐지 얜 변한게 없는데 얘도 맞는데
<strong>둘 다 같은듯? 글자를 굵게 만들어줌</strong> strong 아닌가? 얘가 더 굵은데?

글자 기울이기

(em) ~ (/em) / (i) ~ (/i) / (cite) ~ (/cite)
다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다. em
다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다. i
다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다. cite

<em>다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다.</em> em
<i>다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다.</i> i
<cite>다 똑같은데 cite는 사이트 주소 표현해줄때 주로 사용한다고 한다.</cite> cite

형광펜 효과

(mark) ~ (mark)
형광펜 효과 

<mark> 형광펜 효과 </mark>

인용 구절

(blockquote) ~ (/blockquote) / (q) ~ (/q)

인용 문구를 나타내는 태그1
인용 문구를 나타내는 태그2
여기서 blockquote를 저렇게 받아들이는데 원래는 좀 띄워져있는거로 나타나진다.
q는 보는 것 처럼 ""나온다. 
<blockquote>인용 문구를 나타내는 태그1</blockquote>
<q>인용 문구를 나타내는 태그2</q>
<br>
여기서 blockquote를 저렇게 받아들이는데 원래는 좀 띄워져있는거로 나타나진다.
<br>
q는 보는 것 처럼 ""나온다.

밑줄

(u) ~ (/u)
밑줄

<u>밑줄</u>

첨자

sup / sub
처음부터 이렇게 쓸걸
위 첨자 기본 글씨랑 같이
아래 첨자 기본글씨랑 같이

<sup> 위 첨자 </sup> 기본 글씨랑 같이
<sub> 아래 첨자 </sub> 기본글씨랑 같이

목록 관련 태그

순서가 없는 태그

ul : 목록 구성 / li : 목록 내용

  • HTML5
  • CSS3
  • javascript
  • jQuery
  • 목록중첩
    • 목록 중첩도 이렇게 가능
    • mybatist
    • spring
<ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>javascript</li>
        <li>jQuery</li>
        <li>
            <ul>
                <li>목록 중첩도 이렇게 가능</li>
                <li>mybatist</li>
                <li>spring</li>
            </ul>
        </li>
    </ul>

순서가 있는 태그

ol : 순서가 있는 목록 구성 / li : 목록 내용

  1. HTML5
  2. CSS3
  3. javascript
  4. jQuery
<ol type = "1">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>javascript</li>
        <li>jQuery</li>
    </ol>

이렇게 만들어주는데 위의 ol type이 의미를 알아보자.

ol type = "X"
X에 들어가는 타입에 따라 목록을 구성하는 번호가 달라진다.
위의 목록은 "1"을 사용했기 때문에 1부터 시작하는 숫자형 목록으로 나온 것 이다.

소문자형 a

  1. HTML5
  2. CSS3
<ol type="a">
        <li>HTML5</li>
        <li>CSS3</li>
    </ol>

대문자형 A

  1. HTML5
  2. CSS3
<ol type="A">
        <li>HTML5</li>
        <li>CSS3</li>
    </ol>

로마 숫자 대문자형 I

  1. HTML5
  2. CSS3
<ol type="I">
        <li>HTML5</li>
        <li>CSS3</li>
    </ol>

로마 숫자 소문자형 i

  1. HTML5
  2. CSS3
<ol type="i">
        <li>HTML5</li>
        <li>CSS3</li>
    </ol>

시작값을 설정하는 것도 가능

숫자형 5부터 시작해서 1까지 내려가는 reversed형

  1. HTML5
  2. CSS3
  3. javascript
  4. jQuery
<ol type = "1" start="5" reversed>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>javascript</li>
        <li>jQuery</li>
</ol>

설명 목록

설명 목록 태그는 dl ~ /dl 이고 안의 내용은 dt ~ dt // dd ~ dd 이다.
백문이불이일견 직접 보자.
설명 목록 태그

<dl>
    <dt>목록의 제목을 작성하는 곳</dt>
    <dd>제목에 해당하는 내용을 작성하는 공간1</dd>
    <dd>제목에 해당하는 내용을 작성하는 공간2</dd>
    <dt>목옥의 제목을 작성하는 곳</dt>
    <dd>제목에 해당하는 내양용을 작성하기가 </dd>
</dl>

이건 또 왜 안돼

목록의 제목을 작성하는 곳 제목에 해당하는 내용을 작성하는 공간1 제목에 해당하는 내용을 작성하는 공간2 목옥의 제목을 작성하는 곳 제목에 해당하는 내양용을 작성하기가 되네

테이블 태그

테이블을 만들어주는 태그다.

내용1 내용2 내용3 내용4 
 <table border = "1">
        <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
            <td>내용4</td>
        </tr>
</table>

border = : 테이블의 외곽선을 넣어주는 코드 / 숫자로 두께 정함
table -> tr -> td -> /td -> /tr -> /table의 순서로 진행된다.
tr : 테이블의 열
td : 테이블의 행
th : 테이블의 행인데 내용을 중앙으로 모아서 정리해준다.

colspan

colspan은 사용할 행을 묶어주는 기능이다.

회원정보
이름1 나이1 주소1
이름2 나이2 주소2
이름3 나이3 주소3
이름4 나이4 주소4

코드

<table border = "1">
        <tr>
            <th colspan="3">회원정보</th>
        </tr>
        <tr>
            <th>이름1</th>
            <th>나이1</th>
            <th>주소1</th>
        </tr>
        <tr>
            <th>이름2</th>
            <th>나이2</th>
            <th>주소2</th>
        </tr>
        <tr>
            <th>이름3</th>
            <th>나이3</th>
            <th>주소3</th>
        </tr>
        <tr>
            <th>이름4</th>
            <th>나이4</th>
            <th>주소4</th>
        </tr>

    </table>

가장 첫번째 tr을 회원정보로 묶었다.
묶을 범위는 colspan = ? 으로 정의할 수 있다.

rowspan

rowspan은 열으로 묶는 것이다.

이름 이름1
이름2
이름3
이름 ahffk 
<table border = "1">
        <tr>
            <th rowspan="3">이름</th>
            <td>이름1</td>
        </tr>
        <tr>            
            <td>이름2</td>
        </tr>
        <tr>
            <td>이름3</td>
        </tr>
        <tr>
            <td>이름</td>
            <td>ahffk</td>
        </tr>
</table>

위와 같이 맨 처음 앞으로 3개의 열을 "이름"으로 묶겠다고 선언한 뒤에 다음 tr은 첫번째 tr이 안써도 "이름"으로 채워진다.

테이블 크기 조정

테이블 크기 조정은
넓이는 width // 높이는 height로 조절 가능하다.

제목1 제목2 제목3
내용1 내용2 내용3
내용4 내용5 내용6 
<table border = "1">
        <tr>
            <th width="40px">제목1</th>
            <th>제목2</th>
            <th>제목3</th>
        </tr>
        <tr>
            <th>내용1</th>
            <th width="100px" height="100px">내용2</th>
            <th>내용3</th>
        </tr>
        <tr>
            <th width = "30px">내용4</th>
            <th>내용5</th>
            <th height="50px">내용6</th>
        </tr>
    </table>

같은 행과 열의 크기를 비교해서 가장 큰 것으로 조정된다.
여기까지!

profile
GGAE99
이전 포스트

2022-02-11 JDBC-3

다음 포스트

2022-02-16 HTML2 / 태그

0개의 댓글