1/12 HTML

soyoung·2024년 1월 15일
html

일단 냅다 연습문제 풀기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>05_연습문제</title>
        <style>
            .tb1 thead{
                background-color: aqua;
            }
            .tb1 tbody td{
                background-color: orange;
            }
            .tb1 tbody th{
                background-color:orangered;
            }
            .tb1 tfoot th{
                background-color: orangered;
            }
            .tb1 tfoot td{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <table class = 'tb1' border = '1'>
            <thead>
                <tr>
                    <th colspan = '5'>하수정 컬렉션</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan = '5'>제품리스트</th>
                    <th>코드</th>
                    <th>분류</th>
                    <th>가격</th>
                    <th>구매가능개수</th>
                </tr>
                <tr>
                    <td>01-468</td>
                    <td>가을</td>
                    <td>200,000원</td>
                    <td>1068</td>
                </tr>
                <tr>
                    <td>01-468</td>
                    <td>가을</td>
                    <td>200,000원</td>
                    <td>1068</td>
                </tr>
                <tr>
                    <td>01-468</td>
                    <td>가을</td>
                    <td>200,000원</td>
                    <td>1068</td>
                </tr>
                <tr>
                    <td>01-468</td>
                    <td>가을</td>
                    <td>200,000원</td>
                    <td>1068</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan = '3'>총합</th>
                    <td>1,420,000원</td>
                    <td>8468</td>
                </tr>
            </tfoot>
        </table>        
    </body>
</html>

<출력 결과>

05_연습문제
하수정 컬렉션
제품리스트 코드 분류 가격 구매가능개수
01-468 가을 200,000원 1068
01-468 가을 200,000원 1068
01-468 가을 200,000원 1068
01-468 가을 200,000원 1068
총합 1,420,000원 8468

영역 관련 태그

집에서 뼈대를 세우는 것과 같은 느낌

block(div) / inline(span) 차이점 1 : 줄바꿈(개행)

div태그

block 형식
-공간을 수직 분할한다.
-크기를 지정하는 width, height 속성을 사용할 수 있다.

ex) <p></p>태그/<pre></pre>태그(문단 나누기), h1~h6(제목영역 나누기)
    <hr>(수평선을 넣어서 화면 나누기), <dv></dv>(영역 나누기)

span태그

inline 형식 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에 뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙는다.

<span>span 태그</span>
      
inline 형식 태그는 한 줄 내에서 일정한 칸을 차지하기 때문에 
뒤에 오는 내용은 줄이 바뀌지 않고 옆에 붙는다.

block(div) / inline(span) 차이점 2 : 줄 바꿈(개행)

  • block : 사각형 박스 형태로 영역을 지정
  • inline : 내부에 작성된 내용(Content)단위로 영역을 지정

block(div) / inline(span) 차이점 3 : 크기 지정(width/height)

  • block : 크기 지정 가능
  • inline : 크기 지정 불가능

이미지 관련 태그

iframe 태그

웹 문서 내부에 다른 웹문서를 추가하는 태그
iframe 태그 == inline 형식이지만 크기 지정 가능

img태그

-웹 문서에 사진, 그림과 같은 이미지를 삽입하는 용도의 태그
[속성]
1)src : 삽입할 이미지의 경로를 지정하는 속성(파일 경로/웹주소)
2)width / height : 이미지의 크기를 지정하는 속성
3)alt : 이미지를 설명하는 속성 ->이미지가 출력되지 않는 경우 화면에 직접 표시해줌

src 속성

<img src = "../images/cats/cat1.jpg">
  • 상대경로 : 현재 위치를 기준으로 경로를 지정하는 것
    .. : 상위 폴더
    / : 아래, 안쪽, 안에
    ./ : 동일레벨
  • 웹 이미지 경로(웹 상 절대경로)를 이용해 이미지 출력
    <img src = "https://images.unsplash.com/photo-1704739300067-0cfbf8eb8bd3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8fA%3D%3D"

width, height 속성을 이용한 크기 조절(고정/가변)

  • 고정 크기 단위(px) : 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
    <img src = "../images/dogs/dog1.jpg" width = '300px' height = '300px'>
  • 가변 크기 단위(%) : 화면이나 영역 기준으로 사이트 크기에 따라 이미지의 크기가 변경되는 단위
    
    <img src = "../images/cats/cat1.jpg" width = "15%">
    
    → 화면의 15%를 차지하도록 함. 화면 크기가 늘어나거나 줄어들면 이에 맞춰 변화한다.

alt 속성 확인


- <img src = "../images/flowers/flower6.jpg" alt = "꽃6">

.
.
.

하이퍼링크 관련 태그

a(anchor)태그

  • a태그는 현재 HTML 문서와 다른 HTML 문서를 연결해서
    페이지 이동을 할 수 있게 하는 기능을 제공한다.
  • 이 때, a 태그로 감싸진 문자열 == 하이퍼링크

```html
<a href = "02_목록관련태그.html" target = "_blank">02_목록 관련 태그</a>
  • target 속성 : 연결된 문서를 어디에서 열 것인지 지정하는 속성
    기본 값: 같은 탭
    _blank : 새 탭 == 비어있는 탭

목록 클릭 시 해당 이미지로 이동하도록 함

-대상에게 id값을 줌

<a href = “# id이름”> 내용 </a>
<h2>이미지 클릭 시 페이지 이동하기</h2>

        <a href = "https://www.naver.com">
            <img src = "../images\dogs\dog3.jpg" width = "120px">
        </a>
 
        <hr>
        <h2>한 페이지 내에서 이동하기</h2>

        <ul id = "list">
            목록
            <li><a href = "#cat1">고양이1</a></li>
            <li><a href = "#cat2">고양이2</a></li>
            <li><a href = "#cat3">고양이3</a></li>
        </ul>

        <h3 id = "cat1">고양이1</h3>
        <img src = "../images/cats/cat1.jpg">
        <h3 id = "cat2">고양이2</h3>
        <img src = "../images/cats/cat2.jpg">
        <h3 id = "cat3">고양이3</h3>
        <img src = "../images/cats/cat3.jpg">

        <a href = "#list"> 목록으로 이동</a>

입력 관련 태그

input태그, form태그

input 태그

웹 문서에서 사용자가 입력할 수 있는 양식을 제공하는 태그

  • type = "text”

-한 줄 짜리 문자열(텍스트)을 입력할 수 있는 입력 상자
-input 태그의 type 기본값은 text로, 생략이 가능함
-inline 형식(모든 input 태그가 inline)

  • text 관련 input 태그의 공용 속성

-size : 입력상자의 크기
-maxlength : 입력 받는 텍스트의 최대 길이
-placeholder : 입력상자에 작성될 내용을 미리 설명

  • type = "password”

-비밀번호 입력 상자(단순히 입력되는 텍스트를 가려주는 역할)

→get에서는 사용할 정보의 내용이 노출되어 보내지기 때문에 보안에 취약하고 post가 더 보안에 뛰어나다.

  • type = 'url’

주소 입력 시 사용하는 입력상자

<input type = :"url" value="https://">

value : 모든 input 태그의 type에서 사용 가능한 속성
input 태그에 들어갈 초기값을 지정해줌
작성된 value 값을 지울 수 있음

  • type = 'tel’

전화번호 입력 시 사용하는 입력상자

<input type = "tel" value = '010-' placeholder="'-'기호 포함">

숫자 관련 input 태그

숫자 관련 태그 공용 속성

-min : 최소값
-max : 최대값
-step : 증가/감소 시 단계를 지정함

  • type = "number”

숫자만 입력할 수 있는 입력상자(br)
브라우저에 따라 스핀박스 표시가 되기도 함.

<input type ="number" step = '10' min ='0' max = '100'>
  • type="range”

슬라이드 바를 이용해서 숫자를 지정해줌(단독사용x, JS와 함께 사용)

<input type ="range" min = '0' max = '50' step = '10'>

날짜, 시간 관련된 input 태그

<input type = "date"><br>
<input type = "month"><br>
<input type = "week"><br>
<input type = "time"><br>
<input type = "datetime-local"><br>

radio와 checkbox

여러 관련된 값을 묶어서 선택하는 경우에 사용하는 input type

묶음으로 다루려는 input 태그들은 반드시 같은 name속성 값을 가져야 한다.

  • name 속성

1) radio, checkbox 뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를 때 사용(==그룹 이름이 됨)
2)서버 쪽에 제출되는 input 태그 값의 이름 저장(form태그와 같이 사용함)

<label>A팀</label> <input type = "radio" name = "team">
<label>B팀</label> <input type = "radio" name = "team">
<label>C팀</label> <input type = "radio" name = "team">
  • id 속성 : 식별자(하나의 HTML 문서에서 중복 사용 금지)
팀 선택 <br>
<label for="a-team">A팀</label> <input type = "radio" name = "team" id = "a-team">
<label for="b-team">B팀</label> <input type = "radio" name = "team" id = "b-team">
<label for="c-team">C팀</label> <input type = "radio" name = "team" id = "c-team">

form 태그

프론트 단의 정보를 백단으로 넘겨주기 위해 필요한 태그

-div와 같은 영역(block) 형식

-내부에 작성된 input 태그의 값을 서버로 전달하는 역할

  • [속성]
    1)action : 내부에 작성된 값을 전달할 서버 또는 페이지 주소를 작성함
    2)name : form 태그의 이름을 지정하여 form 태그 구분 시 사용함(JS에서 같이 사용함)
    3)method(방식) : 서버로 데이터를 전달하는 방식을 지정함
    4)target : action에 지정된 주소를 현재 탭/새 탭 중에서 정해줌

  • method의 종류 get과 post

get은 select, post는 create이라고 생각하면 된다.

get을 사용하여 백단으로 정보를 보낼 때 url뒤에 콘텐츠를 담아 보내지만 post는 http 메세지의 body에 담아 보내게 됨.

		<form>
          아이디 : <input type="text" name = "id" value = "user01">
          비밀번호 : <input type = "password" name = "pw">

          <button>제출</button>
    </form>

정보 입력 후 제출 시 해당 페이지의 url의 내용은 아래와 같다.

http://127.0.0.1:5500/1HTML5/09입력관련태그.html?id=user01&pw=12345

  • 페이지 주소 뒤의 id=user01&pw=12345
    →사용자가 작성한 입력값이 서버로 넘어갔다는 의미

주소?id=user01&pw=12345
? : 제출된 값의 시작을 나타내는 부분
id, pw : input 태그의 name 속성 값
user01, 12345 : 사용자가 입력한 값

form 태그의 기본 값은 get 요청이다.

button태그의 속성

  • type="submit" 속성
    서버로 값을 제출할 때 쓰는 속성(submit 속성이 기본값임)
  • type="button"은 클릭해도 아무 기능 없음 →JS를 이용해 버튼에 원하는 기능을 추가할 수 있음
  • type="reset" : 버튼이 포함된 form태그 내부 input 값을 모두 초기화함
<form>
	<input>
	<button type="reset">초기화</button>
</form>

textarea / select / option 태그

  • textarea 태그 : 여러 줄을 입력하기 위한 입력상자
<textarea rows="5" cols="70" style="resize:none;" placeholder="최대 100자 가넝한"></textarea>

-style="resize:none;" 는 사이즈 조정 불가능하도록 설정

  • select태그 : 드롭다운을 만들어줌
<form>
	<select>
		<option value="1">선택1</option>
		<option selected>선택2</option>
		<option>선택3</option>
	</select>
</form>

-메뉴들은 option태그로 선언

-기본 선택 옵션은 option태그에서 selected 속성을 넣으면 설정됨

-select 제출 시 option 태그에 value가 있으면 : value 속성 안에 작성된 값이 서버로 넘어감
option 태그에 value가 없으면 : 사이에 작성된 내용이 제출된다.

→selected와 같은 기능으로 radio와 checkbox에 사용되는 checked 속성이 있다.

profile
soyoung
이전 포스트

1/11 vscode 세팅과 HTML

다음 포스트

1/15 깃허브 시작하기/CSS 선택자

0개의 댓글