23.06.03 / HTML / 이미지, 테이블, 입력양식

img

<img src="" alt="">

src : 경로

alt : 이미지에 설명 추가

 

src에 적는 경로

1. 절대경로 : 파일이 가진 고유한 경로

ex)이미지 주소복사

 

2. 상대경로 : 특정 위치 기준

* ./  : 현재폴더

* ../ : 상위폴더

* /   : 루트폴더

ex)

    <img src="./IMG/univ.jpg" alt="">
    <img src="../HTML/IMG/univ.jpg" alt="">
    <img src="/IMG/univ.jpg" alt="">

 

*실습)

네이버 이미지클릭시 네이버로이동

<a href="https://www.naver.com/" target="_blank"> <img src="./IMG/NAVER.jpg" alt="네이버링크"> </a>

 

---------------------------------------

테이블 태그

 

*실습)

    <h3> 테이블태그로 좋은국밥 메뉴판 만들기 </h3>

    <!-- 테이블태그 : table 생성 -->
    <!-- border : 테이블 테두리 -->
    <table border="1">

        <!-- caption : 표의 제목 -->
        <caption> 좋은 국밥 </caption>

        <!-- 7행 3열 테이블 -->

        <!-- thead : Header Content를 모아놓은 태그 -->
        <thead>
            <!-- tr (table row) 행 -->
            <tr>
                <!-- th : 행의 제목 -->
                <th>메뉴</th>
                <th>가격</th>
                <th>비고</th>
            </tr>
        </thead>

        <!-- tbody : Body Content를 모아놓은 태그 -->
        <tbody>
            <tr>
                <!-- td (table data) 열 -->
                <td>좋은 국밥</td>
                <td>8,000원</td>
                <!-- rowspan : 행 병합 -->
                <td rowspan="3">식사</td>
            </tr>

            <tr>
                <td>머리국밥</td>
                <td>7,000원</td>
            </tr>

            <tr>
                <td>고기국밥</td>
                <td>7,000원</td>
            </tr>

            <tr>
                <td>소주</td>
                <td>4,000원</td>
                <td rowspan="2">주류</td>
            </tr>

            <tr>
                <td>맥주</td>
                <td>4,000원</td>
            </tr>

            <tr>
                <td>막걸리</td>
                <!-- colspan : 열 병합 -->
                <td colspan="2">판매중지</td>
            </tr>

        </tbody>

    </table>

 

 

입력양식 태그

form태그

    <!-- form태그 : 사용자로부터 데이터를 입력받에서 전송할 때 사용 -->
    <form action=""> <!-- action : 데이터를 전송할 위치, form태그 필수속성 -->
        ID를 입력하세요 : <input type="text" name="id" placeholder="ID입력"> <br>
        이름을 입력하세요 : <input type="text" name="name" value="최수환"> <br>
        <!-- name : 입력받은값 구분하기위해 ***필수*** name 지정 안하면 값 구분 못함-->
        <!-- placeholder : 미리보기 기능 -->
        <!-- value : 기본값 지정 -->
        비밀번호 입력 : <input type="password" name="pw">
        <!-- password : 입력 값 안보이게 -->

        <hr>

        이메일선택
        <select name="email">
            <!-- uo,ol/li 처럼 select와 option은 한몸 -->
            <option value="google"> 구글 </option>
            <!-- value : 전송될때 value 값으로 전송됨 -->
            <option value="naver"> 네이버 </option>
            <option value="daum"> 다음 </option>
        </select>

        <hr>

        체크박스(여러개 선택) : 좋아하는 음식 고르기 <br>
        치킨 <input type="checkbox" name="food" value="chicken">
        <!-- name 통일, value로 값 구분 -->
        피자 <input type="checkbox" name="food" value="pizza">
        햄버거 <input type="checkbox" name="food" value="burger">

        <hr>

        라디오버튼(1개만 선택) : 성별 고르기 <br>
        여자 <input type="radio" name="gender" value="feemale">
        남자 <input type="radio" name="gender" value="male">

        <hr>

        파일 선택 : <input type="file" name="file">

        <hr>

        색깔 선택 : <input type="color" name="color">

        <hr>

        날짜 선택 : <input type="date" name="birthday"> <br>
        날짜 + 시간 : <input type="datetime-local" name="meeting">

        <hr>

        게시글 작성 : <br>
        <textarea name="board" cols="30" rows="10" style="resize: none;"></textarea>

        <hr>

        초기화 버튼 <input type="reset" value="초기화 버튼">
        <!-- reset : input 요소의 모든 값을 추기화 -->

        <hr>

        전송 버튼 <input type="submit" value="로그인">
        <!-- submit : input 요소의 모든 값을 -->

    </form>