습관제작소

22-06-09 Smart HTML/CSS 본문

SMHRD or ITSchool/HTML and CSS

22-06-09 Smart HTML/CSS

KUDO 2022. 6. 9. 17:43

22-06-09 Smart HTML/CSS

- img 태그

<!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>
    <!-- 이미지를 불러오기 위해서 <img> -->
    <!-- 현재 기준으로 파일을  불러드릴때-->
    <img src="zico.png" alt="대충 지코였던 
    것">
      <!--현재 기준으로 폴더를 들어간 후, 파일을 불러드릴 때  -->
      <img src="img/zico.png" >

      <!-- 현재 기준으로 작성중인 html파일이 폴더를 나가야하는 경우 -->
      <!-- ../ = 폴더를 한번 나가겠다. -->
      <img src="../img/zico.png">

      <!-- 현재 기준으로 작성중인 html파일이 루트 폴더(최상위폴더)로 나가야하는 경우 -->
      <img src="/img/zico.png">

        <!-- CDN : 네트워크를 통해서 경로를 받아올 때 -->
        <img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fimg.theqoo.net%2Fimg%2FcgIwn.jpg&type=sc960_832">
</body>
</html>

- A 태그

<!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태그 -->
    <!-- 네이버로 이동글자를 클릭했을때 네이버 페이지로 이동시켜줘! -->
    <!-- a태그의 핵심 "href" = "이동할 url" -->
    <a href = "https://www.naver.com/"> 
    <img src="https://i.pinimg.com/originals/fb/71/04/fb71048e03a5ada757f70d61b583d0bf.png">
    </a>
</body>
</html>

- table 태그

<!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>
        <tr> : 표의 행을 만들때 사용(가로)
        <th> : 행을 컬럼으로 쪼개저서 제작 (머리글로써 두껍게 써짐)
        <td> : 행을 데이터(칸)으로 쪼개서 제작    
    -->
    <!-- 
    <table border="선두께 선의 종류 색상"> align="글 위치 정렬" width = "가로 길이"-->
    <table border="1px solid blue" align = "center" width="300px">
        <tr bgcolor = "yellow">
            <th>나이</th>
            <th>이름</th>
        </tr>
        <tr>
            <td>17</td>
            <td>정형</td>
        </tr>
        <tr>
            <td>40</td>
            <td>박수현</td>
        </tr>
    </table>
</body>
</html>

- form 태그

<!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>
    <!--<form accept="보낼 서버"> -->
    <form accept="test">
        <!-- 일반 글자를 입력하는 창 -->
        <span>이름 : </span> 
        <!-- 

            <input 타입="text" 저장공간="" 최대글자수="5">   -->
        <input type="text" value="" maxlength="5">
        <br>
        <span>비밀번호 : </span>
        <input type="password" value="" maxlength="5">
        <br>

        <!-- 체크박스 복수개를 선택할 때 name = 구릅화, value = 데이터 구분을 위한 저장공간-->
        <span>축구</span><input type="checkbox" name ="hobby" value = "축구">
        <span>농구</span><input type="checkbox" name ="hobby" value = "농구">
        <span>탁구</span><input type="checkbox" name ="hobby" value = "탁구">
        <br>
        <br>

        <!-- 라이오버튼 단수개(무조건)1개 선택-->
        <span>남자</span><input type="radio" name = "gender">
        <span>여자</span><input type="radio" name = "gender">
        <br>
        <br>
        <!-- 그 외  -->
        <span>색상선택</span><input type="color">
        <br>
        <br>
        <span>길이 크기 조정</span><input type="range">
        <br>
        <br>
        <span>날짜</span><input type="date">
        <br>
        <br>
        <span>파일 선택</span><input type="file">
        <br>
        <br>
        <!-- form태그의 데이터들을 서버에게 전달하는 버튼 -->
        <input type = "submit">

    </form>
</body>
</html>

'SMHRD or ITSchool > HTML and CSS' 카테고리의 다른 글

22-06-15 Smart HTML/CSS  (0) 2022.06.15
22-06-14 Smart HTML/CSS  (0) 2022.06.14
22-06-16 Smart HTML/CSS  (0) 2022.06.11
22-06-10 Smart HTML/CSS  (0) 2022.06.11
22-06-08 Smart HTML/CSS  (0) 2022.06.08
'SMHRD or ITSchool/HTML and CSS' Related Articles more
Comments