HTML

이미지 태그 와 테이블, 폼태그

순두부 호랑이 2022. 9. 21. 09:10
728x90
SMALL

1. 이미지태그

 

<img>: 웹 페이지에 이미지를 보여주는 태그

 

속성 설명
src 이미지의 경로 지정(파일 경로나 URL)
alt 이미지에 대한 설명(경로가 잘못되었을 경우)
border 이미지 주위의 테두리
height 이미지의 높이
width 이미지의 너비
hspace 좌우 여백
vspace 상하 여백

 

2.경로

- 절대경로: 어떤 페이지나 파일이 가진 고유한 경로 * 외부 웹페이지로 연결할 때 사용

ex) <img src="https://yuhyewon.tistory.com/image/logo.png">   이미지의 고유한 주소, 절대 바뀌지 않는 값

- 상대경로: 특정 위치를 기준으로 파일을 찾는 경로 * 내부 자료를 연결할 때 사용

                   1) 현재를 기준으로  <img src="./img/banana.png">

                                                                     생략가능

                   2) 상위를 기준으로  <img src="../img/banana.png">

                   3) 루트를 기준으로 <img src="/ing/banana.png"> -> 최상단 루트가는 방법

 

3. 이미지 코드 예제

 

<ex05 이미지.html>

<!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>
    <!-- http://www.palnews.co.kr/news/photo/201801/92969_25283_5321.jpg -->

    <!-- img태그 (필수 속성: src ) -->
    <!-- (1) 절대 경로: 어떤 파일이 가진 본인만의 고유한 경로 -->

<img src="http://www.palnews.co.kr/news/photo/201801/92969_25283_5321.jpg" width="300px">

<!-- (2)상대 경로: 특정 위치를 기준으로 파일을 찾는 경로 => 내부 자료 
        1) 현재를 기준으로 : ./
        2) 상위를 기준으로 :../
-->
<!-- <img src="./img/img.webp"
  width="300px" -->

<!-- 두번째 사진을 다시 불러와보자! -->
<img src="../img/img.webp"
  width="300px">
</body>
</html>

4. 앵커 태그

 

<a href="irl"> 텍스트</a>

속성 설명
href hypertext referenece로 연결할 주소 지정
name 문서 내 특정 위치 이동
target 링크된 내용이 열릴 대상
_blank: 링크 클릭 시 새 창 설정
_self: 현재와 동일한 브라우저 창 설정

 

5. a태그

 

a태그: hyper text의 기능 현재 문서에서 다른 문서로 즉시 이동 가능

            필수 속성: href(어디로 이동할껀지)

            선택 속성: target(현재 창 or 새탭, 새창)

<ex06a태그.html>

<!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>

    <!-- a태그 : hyper text의 기능 현재 문서에서 다른 문서로 즉시 이동 가능
        **필수 속성:href(어디로 이동?)
        ** 선택 속성: target(현재 창 or 새탭, 새창)
    -->
    <a href="https://www.naver.com/" target="_blank">
        네이버로 이동
    </a>

    <br>
    <!-- 
        (1) 로고 이미지를 띄워준다
        (2) 로고 이미지를 클릭 시, https://smhrd.or.kr/ 로 이동
        (3)
     -->
     <a href="https://smhrd.or.kr/" target="_blank">
        <img src="./img/logo.png" width="300px">
     </a>
     
     

</body>
</html>

6. 테이블 태그

<table>

이름 주소
홍길동 광주

코딩이 아니라 일반적으로 표를 만드는 상황을 기억할 것

 

<table>: 테이블을 만들 때 사용하는 태그

속성 설명
align 표의 정렬 방식(left,right,center)을 지정
bgcolor 표의 배경색을 지정
border 표의 테두리 두께를 지정
bordercolor 표의 테두리 색 지정
width 표의 너비를 지정
height 표의 높이를 지정

<tr>태그</tr>: table row의 줄임말, 표 내부에서 1줄을 생성하는 태그

속성 설명
align 행 정렬 방식(left,center,right)지정
bgcolor 행 배경색 지징
height 행 높이 지정

<th>텍스트</th>: 행의 head 역할을 하는 태그

<td>텍스트</td>: table data/칸 안의 데이터를 나타내는 태그

 

th & td 태그 속성

속성 설명
align 셀 정렬방식(left, right)지정
bgcolor 셀 배경색 지정
colspan 셀 병합
rowspan 행 병합
width 셀 너비 지정
height 셀 높이 지정

 

colspan: 표의 가로 병합

rowspan:표의 세로 병합

 

7. 테이블 코드 예제

<ex07테이블>

<!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>
    <!-- 1.테이블을 만들거야! <table> -->
    <table
        border="1px solid black"
    >

    <!-- 참고) 표의 제목 caption -->
    <caption>메뉴판</caption>
        <!-- 2. 1줄 (1열) 생성할거야! table row: <tr> -->
        <tr bgcolor="green">
            <!-- 3.표의 헤더 부분 table header:<th>-->
            <th>메뉴</th>
            <th>가격</th>
        </tr>

        <tr>
            <!-- 4.표의 데이터 부분 
            table date:<td>-->
            <td>아메리카노</td>
            <td>3000</td>
        </tr>

        <tr>
            <td>카페라떼</td>
            <td>4000</td>
        </tr>
        
    </table>
</body>
</html>

<ex08테이블 실습>

<!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>
    <table border="1px solid black" width="200px" align="center">
        <caption>가족팀</caption>
        <tr bgcolor="yellow">
            <th>이름</th>
            <th colspan="2">성별/주소</th>
            <th > 비고</th>
        </tr>

        <tr align="center">
            <td>엄마</td>
            <td>여자</td>
            <td>광주</td>
            <td rowspan="4"></td>
        </tr>

        <tr align="center">
            <td>딸</td>
            <td>여자</td>
            <td>광주</td>
        </tr>

        <tr align="center">
            <td>아빠</td>
            <td>남자</td>
            <td>광주</td>
        </tr>

        <tr align="center">
            <td>오빠</td>
            <td>남자</td>
            <td>광주</td>
        </tr>

    </table>
</body>
</html>

9. 폼태그

 

 

728x90
LIST