ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML강의(visual studio code), 기초태그_210329(월)
      HTML&CSS 2021. 7. 21. 23:00

      HTML

      파일 이름: index.html

      문서안에 처음에 무조건 있는 파일 이름.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <!DOCTYPE html>
      <html lang="en"> // html 열린 태그
      <head> //머리말 부분, meta 정보들 작성
        <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> //몸통 부분
         하나둘셋 html5 시작합니다.
      </body> //몸통 닫기
      </html> //html 닫힌 태그
      		 cs

      ● <hn> 제목 </hn>

      :heading. 제목을 나타내는 태그

      h1 > h2 > h3 > h4 > h5 > h6

      ​

      ● <p> 내용 </p>

      :paragraph. 텍스트 단락을 만드는 태그

      ​

      ● <br>

      :line break. 문단 내 줄바꿈

      ​

      ● <hr>

      :horizontal rule. 가로줄 삽입

      ​

      ● <blockquote> 인용문 </blockquote>

      :blockquote. 다른 텍스트보다 약간 들여 씀, 화면 낭독기에서도 구분하여 읽음

      ​

      ● <strong> 굵게 강조할 텍스트 </strong>

      :strong. 글씨를 굵게 강조, 화면 낭독기에서 강조하여 읽음

      ​

      ● <b> 굵게 표시할 텍스트 </b>

      :bold. 글씨만 굵게 강조.

      ​

      ● <em> 이탤릭체로 강조할 텍스트 </em>

      :emphasis. 흐름체, 문장 중에서 특별히 강조하는 부분

      ​

      ● <i> 이탤릭체로 표시할 텍스트 </i>

      :italic. 흐름체

       

      ● <ol><li> Ordered List & LIst. 순서 있는 목록을 만듬 </li></ol>

      1
      2
      3
      4
        <ol type="" start="">
          <li>항목1</li>
          <li>항목2</li>
        </ol>
      		 cs

      ● <ul><li> Unordered List & LIst. 순서 없는 목록을 만듬 </li></ul>

      1
      2
      3
      4
        <ul>
          <li>항목1</li>
          <li>항목2</li>
        </ul>
      		 cs

       

      ● dl: Description List 묘사시작

      dt: Description Term 묘사할 이름

      dd: Description Definition 묘사내용

      사전에서 단어명과 설명이 있는 모습. dl로 시작-dt라는 이름을-dd가 설명

      1
      2
      3
      4
      5
        <dl>
          <dt> 이름 </dt>
          <dd> 값 </dd>
          <dd> 값 </dd>
        </dl>
      		 cs
       

      ● table: 표의 시작

      caption: 표 제목

      tr: Table Row 행

      th: Table Heading 행열의 머릿말(두껍게 강조)

      td: Table Data 행 안에 셀

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
        <table>
          <caption> 표 제목 </caption>
          <tr>
            <th>1행 1열</th>
            <td>1행 2열</td>
          </tr>
          <tr>
            <th>2행 1열</th>
            <td>2행 2열</td>
          </tr>
        </table>
      		 cs

      thead: table head 제목

      tbody: table body 본문

      tfoot: table foot 요약

      :표의 구조를 나눠 놓는 것.

       

      rowspan: 행들을 합침

      colspan: 열들을 합침

      colgroup: col태그 1이상

      col: 열들의 스타일 속성을 넣어주기 위한 태그

      ☆속성

      style="background(배경색), width(넓이) 등등"

      span=열 합쳐서 함께 스타일 줌

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      <!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">
        <meta name="keywords" content="html5시작">
       
        <title>HTML5&CSS3</title>
      </head>
      <body>
        <h1>제목글씨1</h1>
        <h3>제목글씨3</h3>
        <h6>제목글씨6</h6>
        <p>Lorem ipsum, <mark>color</mark>dolor sit amet consectetur<br> adipisicing elit. </p>
        <p>Lorem ipsum<span style="color: blue;">박스블록 인라인블록</span> dolor sit amet consectetur adipisicing elit.</p>
         하나둘셋 html5 시작합니다.
        <!-- 순서없는 목록 -->
        <ul>
          <li>
               <ul>
                 <li>치와와</li>
                 <li>불독</li>
               </ul>
          </li>
          <li>강아지</li>
          <li>고양이</li>
          <li>강아지</li>
          <li>강아지</li>
          <li>강아지</li>
        </ul>
       <!-- 순서있는 목록 -->
      <ol type="a" start="2">
        <li>아이유</li>
        <li>강호동</li>
        <li>유재석</li>
      </ol>
       
      <dl>
          <dt>올레코스1</dt>
          <dd>코스:</dd>
          <dd>거리:</dd>
      </dl>
       
      <p>Lorem ipsum dolor sit amet <i>adipisicing</i> <em>elit.</em> 
      <hr>
         Lorem ipsum <b>dolor</b> sit amet <strong>consectetur</strong> adipisicing elit. 
      </p>
       
        </body>
      </html>
       
      		 cs

      shape: 모양

      rect: 사각형

      ​

      coords: 자표값

      ​

      area href = a href 와 거의 같다.

      ​

      ​<form>태그

      method

      - get : 사용자의 입력 데이터를 url에 표시하며(사용자들이 다 봐버린다.), 데이터 크기에 제한이있고 쿼리 형식이다.

      - post : 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있다.

      ​

      <input type = ...>: 형식 지정

      1.text: 보이는 텍스트

      2:password: 안보이는 텍스트

      3.range: 게이지바

      4.number: 숫자

      5.radio: 하나만 선택가능선택가능(해당하는 name을 똑같이 지어야한다.)

      6.checkbox: 복수선택 가능(해당하는 name을 다르게 지어야한다.)

      7.date: 년월일

      8.time: 시간

      9.submit: 페이지 확인 및 전송

      ​

      name: 같은 이름끼리 그룹

      value: 그 값의 속성, 넘어가는 값 , 숫자일 경우 처음 선택 지정.(2면 사이트 들어갈 때 2로 초기화되어 있음)

      step: value 값의 변화 폭

      readonly: value값으로만 지정 가능

      required: 이 값은 꼭 입력해야함

      ​

      size: 텍스트에서 몇 글자까지 보이게 할지 결정

      maxlength: 문자 최대길이

      minlength: 문자 최소길이

      ​

      max,min: 숫자 최대길이, 숫자 최소길이

      ​

      autofocus: 처음에 커서 깜박거리기

      placeholder: 쓰는 공간에 투명한 안내문

       

      <fieldset>: 네모영역

      <legend>: fieldset에 이름

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      <!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 src="images/kids.jpg" alt="" usemap="#fav">
        <map name="fav">
          <area shape="rect" coords="10,10,160,200" 
          href="https://www.daum.net/" target="_blank">
          <area shape="rect" coords="220,10,380,200" 
          href="https://blog.naver.com/gpdlrkal" target="_blank">
       
        </map>
       
        <form action="#" method="POST">
          <fieldset>
            <legend>개인정보</legend>
            <ul>
              <li>
                <label for="user_name">이름</label>
                <input type="text" id="user_name">
              </li>
              <li>
                <label for="user_addr">주소</label>
                <input type="text" id="user_addr">
              </li>
            </ul>
            
          </fieldset>
          <fieldset>
            <legend>로그인정보</legend>
            <ul>
              <li>
                <label for="user_id">아이디</label>
                <input type="text" id="user_id" maxlength="12">
              </li>
              <li>
                <label for="user_pass">패스워드</label>
                <input type="password" id="user_pass">
              </li>
              <li>
                <label for="order_cnt">주문개수</label>
                <input type="number" id="order_cnt">
              </li>
              <li>
                <label for="order_cnt2">주문개수</label>
                <input type="range" id="order_cnt2" min="1" max="5" value="2">
              </li>
            </ul>
            
            
          </fieldset>
       
          <fieldset>
            <legend>신청과목</legend>
            <p>이 달에 신청할 과목을 선택하세요.(1과목선택)</p>
            <label><input type="radio" name="subject" value="C">C</label>
            <label><input type="radio" name="subject" value="Java">Java</label>
            <label><input type="radio" name="subject" value="C++">C++</label>
          </fieldset>
       
          <fieldset>
            <legend>신청과목</legend>
            <p>이 달에 신청할 과목을 선택하세요.(2과목이상 선택)</p>
            <label><input type="checkbox" name="subject1" value="C">C</label>
            <label><input type="checkbox" name="subject2" value="Java">Java</label>
            <label><input type="checkbox" name="subject3" value="C++">C++</label>
          </fieldset>
       
          <fieldset>
            <legend>날짜</legend>
            <label><input type="date" id="sDate"></label>
            <label><input type="time"></label>
            <br/>
            <br/>
            <label><input type="date" id="eDate"></label>
            <label><input type="time"></label>
       
          </fieldset>
          
          <input type="submit" value="확인">
       
        </form>
        
      </body>
      </html>
      		 cs

       

      <select>: 선택 박스 만들기

      <optgroup>: 그룹화

      <option>: 선택 옵션들

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
          <fieldset>
            <legend>학과</legend>
            <select id="major">
              <optgroup label="공과대학">
                <option value="1">건축공학과</option>
                <option value="2">컴퓨터공학과</option>
                <option value="3">영문학과</option>
                <option value="4">재료공학과</option>
              </optgroup>
              <optgroup label="인문대학">
                <option value="a">법학과</option>
                <option value="b">불어과</option>
              </optgroup>
            </select>
          
          </fieldset>
      ​
      		 cs

      <textarea>: 문단으로 작성할 때.

      rows: 행줄

      cols: 열줄

      <datalist>: input으로 만든 상자안에 들어갈 정보들을 설정(유저에게 보이지는 않음)

      <input

      list>: 연결

      ​

      <progress>: 진행 속도 반복 (로딩같은)

      <meter>: 진행 게이지바

       

      시맨틱태그

      1.header

      -nav

      ​

      2.section

      -aside

      -article

      ​

      3.footer

      -address

      'HTML&CSS' 카테고리의 다른 글

      HTML에 대한 이해_210406(화)  (0) 2021.07.21
      css태그정리:transition등_210402(금)  (0) 2021.07.21
      css태그정리:transform등_210401(목)  (0) 2021.07.21
      css태그정리:포지셔닝_210331(수)  (0) 2021.07.21
      css태그정리_210330(화)  (0) 2021.07.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바