HTML - 기초 (1)

hanyoko·2023년 6월 13일
html
0

HTML

목록 보기
1/3
post-thumbnail

HTML

! tab을 입력하면 html의 형식이 자동으로 작성된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  • <!DOCTYPE html>
    DTD 선언
    html4 -> Xhtml -> html5 으로 변화했다
    어떤 버전의 html으로 작성되었는지를 알려주는 것
    내가 작성한 html의 형식을 알려주고 그 버전으로 해석할 수 있도록
  • <meta charset="urf-8">
    파일을 저장할 때 인코딩 코드를 맞춰야 한글이 깨지지 않고 정상적으로 작동한다.
    만약 다른 인코딩 코드로 저장하면 한글이 깨져서 글자를 인식할 수 없다.
    meta는 요소가 없어서 태그 닫기를 안 한다
  • head는 제목을 알려주는 역할
  • 화면을 나타내는 것은 body 태그를 이용해서 작성
  • <title></title> 사이에 원하는 제목을 붙으면 사이트 창에 제목이 생김
  • <html>로 태그들을 감싸주어야함
<a href="https://naver.com">네이버 바로가기</a>  //형식으로 작성하고 열면 네이버 바로가기 링크가 만들어진다.
<a href="http://google.com" target="_blank">구글 바로가기(새창)</a>
  • <> : 태그
  • href : 속성
  • target="_blank" : 빈칸과 함께 target을 넣으면 새창으로 열리는 바로가기 만들 수 있다.
  • 태그 안에 태그를 넣을 때는 들여쓰기 해야한다.
<head>
	<title>재미있는 html</title>
</head>
<body>
	<a href="https://naver.com">네이버 바로가기</a>
	<a href="http://google.com">구글 바로가기</a>
	<a href="http://google.com" target="_blank">구글 바로가기(새창)</a>
</body>

HTML 기본 태그

< !DOCTYPE html >
    <html>
        <head>
            <meta charset="utf-8" />
            <title> 주요태그</title>
        </head>
        <body>
            <h1>첫번째 제목</h1>
            <h2>두번째 제목</h2>
            <h3>세번째 제목</h3>
            <h4>네번째 제목</h4>
            <h5>다섯번째 제목</h5>
            <h6>여섯번째 제목</h6>
            안녕하세요
            오늘은 금요일
            야호
            /////
            안녕하세요<br />
            오늘은 금요일<br />
            야호
            <p>안녕하세요</p>
            <p>오늘은 금요일</p>
            <p>야호</p>
            <img src="./images/banner2.jpg" alt="립스틱을 바르고 있는 젊은 여자" title="곧 쉬는시간 야호" />
            <img src="./images/bestproduct1.png" alt="사진" title="사진" />
        </body>
    </html>

h1 첫번째 제목

h2 두번째 제목

h3 세번째 제목

h4 네번째 제목

h5 다섯번째 제목
h6 여섯번째 제목
  • h1~6로 글자 크기를 나타낼 수 있다
    (주로 1~4를 사용)
  • 줄바꿈을 하고 싶을 때는 <br/>을 붙여주면 줄바꿈이 된다.

  • 태그는 문장
  • 사이트에 사진을 추가할 때
    <img src="./폴더명/파일명" /> 태그를 이용해서 사진을 삽입할 수 있다.
  • ./ 현재 내 위치(html파일)에 있는 파일을 말할 때
  • if, 한단계 밖에 있는 폴더에 있을 때는 ../
  • alt="" title="" />
  • alt="립스틱을 바르고 있는 젊은 여자" title="곧 쉬는시간 야호" />
  • 사진에 마우스를 올리면 사진의 정보가 뜨게 만드는 속성.

★이미지를 삽입할 때 src는 필수 속성★

목록들을 나열하기

< !DOCTYPE html >
    <html>
        <head>
            <meta charset="utf-8">
                <title>목록태그</title>
        </head>
        <body>
            <h1>다양한 목록태그</h1>
            <h2>비순서형 목록 ul</h2>
            <h3>카레재료들</h3>
            <ul>
                <li>돼지고기 500g</li>
                <li>카레가루</li>
                <li>감자 1개</li>
                <li>양파 1개</li>
                <li>버섯</li>
            </ul>
            <h2>순서형 목록 ol</h2>
            <h3>카레 만들기</h3>
            <ol>
                <li>야채를 자른다</li>
                <li>후라이팬에 야채들을 볶는다</li>
                <li>카레가루를 물에 풀어 끓인다</li>
                <li>고기와 야채를 넣는다</li>
            </ol>
            <dl>
              <dt>html이란?</dt>
              <dd>하이버 텍스트 마크업 랭귀지의 약자이다.
  웹페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서이다.</dd>
          	</dl>
        </body>
    </html>

나열형 목록 ul

카레 만들기에 필요한 재료

  • 돼지고기 500g
  • 카레가루
  • 감자 1개
  • 양파 1개
  • 버섯

순서형 목록 ol

카레 만들기

  1. 야채를 자른다
  2. 후라이팬에 야채들을 볶는다
  3. 카레가루를 물에 풀어 끓인다
  4. 고기와 야채를 넣는다
html이란? 하이버 텍스트 마크업 랭귀지의 약자이다. 웹페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서이다.

테이블 태그

  • 웹페이지에서 테이블 형태의 정보를 나타낼 때 사용
테이블 태그 <table> </table>
행 <tr></tr> : table를 작성하고 이후에 작성하여 행을 생성한다.
셀 <td></td> : → 방향으로 작성된다. 이미 작성된 칸이 있으면, 뛰어 넘는다.
제목셀 <th></th> : → 방향으로 작성된다.
테이블 제목 <caption></caption>
행 합치기 ↓ <rowspan>
열 합치기 → <colspan>
<table border="1" cellspacing="0">
    테이블 선 굵기  행 간의 간격 조절하는 속성
< !DOCTYPE >
    <html>
        <head>
            <title>테이블 태그</title>
            <meta charset="utf-8">
        </head>
        <body>
            <h1>테이블 태그</h1>
            <table border="1" cellspacing="0" width="800">
                <caption>테이블 태그입니다.</caption>
                <tr>
                    <th>1행 1열</th>
                    <th>1행 2열</th>
                    <th colspan="2">1행 3열</th>
                </tr>
                <tr>
                    <td rowspan="2">2행 1열</td>
                    <td>2행 2열</td>
                    <td>2행 3열</td>
                    <td>2행 4열</td>
                </tr>
                <tr>
                    <td>3행 2열</td>
                    <td>3행 3열</td>
                    <td>3행 4열</td>
                </tr>
            </table>
        </body>
    </html>

테이블 태그 ex

테이블 태그입니다.
1행 1열 1행 2열 1행 3열
2행 1열 2행 2열 2행 3열 2행 4열
3행 2열 3행 3열 3행 4열
  • 두개의 열을 합치기 할 때는 첫 열에 colspan="2"를 추가한 뒤 다음 열의 코드는 삭제
  • 두개의 행을 합치기 할 때는 첫 행에 rowspan="2"를 추가한 뒤 다음 행의 코드는 삭제
  • <br/>을 이용해서 한칸 밑으로 내릴 수 있음

표의 구조적인 표현 thaed, tbody, tfoot

< !DOCTYPE html >
    <html lang="ko">
        <head>
            <meta charset="uft-8" />
            <title>테이블의 구조적 표현</title>
        </head>
        <body>
            <h1>표의 구조적인 표현 thaed, tbody, tfoot</h1>
            <table border="1" cellspacing="0">
                <caption>과목별 추천도서</caption>
                <thead>
                    <tr>
                        <th>과목</th>
                        <th>책제목</th>
                        <th>저자</th>
                        <th>출판사</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td>합계</td>
                        <td colspan="3">3권</td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>웹 프로그래밍</td>
                        <td>html5 웹프로그래밍 입문</td>
                        <td>박희민</td>
                        <td>그린</td>
                    </tr>
                    <tr>
                        <td>웹 프로그래밍</td>
                        <td>css 스타일의 모든 것</td>
                        <td>박희민</td>
                        <td>그린</td>
                    </tr>
                    <tr>
                        <td>웹 프로그래밍</td>
                        <td>바닐라 자바스크립트</td>
                        <td>박희민</td>
                        <td>그린</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>합계</td>
                        <td colspan="3">3권</td>
                    </tr>
                </tfoot>
            </table>
        </body>
    </html>

<tfoot></tfoot>태그는 위쪽에 작성하더라도 자동적으로 아래에 입력된다.

표의 구조적인 표현 thaed, tbody, tfoot

과목별 추천도서
과목 책제목 저자 출판사
합계 3권
웹 프로그래밍 html5 웹프로그래밍 입문 박희민 그린
웹 프로그래밍 css 스타일의 모든 것 박희민 그린
웹 프로그래밍 바닐라 자바스크립트 박희민 그린
합계 3권
profile
hanyoko
다음 포스트

HTML - 기초 (2)

0개의 댓글