ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 0724.HTML
      HTML 2023. 7. 24. 18:34

       

       

      HTML
      hyper text markup language


      - 브라우저는 html 문서만 인식
      - 서버에서 브라우저가 요청한 페이지 전송 시 반드시 html로 만들어야 함

      더보기

      HTTP(Hyper Text Transfer Protocol)
        protocol : 절차, 메시지규격


      클라이언트 - 서버 간의 전송은 http를 따르기로 규약 "통신기능"
      - 요청/응답
      - 따로 보안시스템이 없어서 암호화로 보호 -> http"s"

        무연결성 무상태성

      더보기

      요청 URI(주소, Uniform Resource Identifier)
                   1가지형태   정보           식별자
        URL ( L:location) www.naver.com/fdfdf/dfdfdf/ 여기서 / / 가 위치를 나타냄

       클라이언트의 요청은 주소로 한다. 서버컴에는 클라이언트가 요청한 페이지(문서)가 미리 생성
       클라이언트 요청 시 서버는 미리 만들어 둔 문서를 찾아서 http호로 만들어 클라이언트에게 응답


       서버 내의 서비스를 찾아가기 위한 위치 정보로 너무 복잡하면 안 되며 단순하게 하기 위하여 RESTful API 사용

       웹프로그램은 주소(URI)가 중요함
       클라이언트와 서버의 요청을 판별할 때도 사용함




      * 우클릭 박스 : Context Menu

      * VS code에서 live server로 열면 IP 주소값 배정.
      페이지 소스 보면 script가 추가 됨.

       

       

       

      더보기


      <br> 줄바꿈, <image> 같은 data가 없는 경우
      close tag 생략 <tag명/>

      ⭐space, tab, enter 는 공백 1개로 인정
      -> 연속적인 공백도 공백 1개로 간주한다.

      즉, 줄바꿈을 일으키지 않으면서 공백을 넣고 싶을 때 &nbsp;를 사용합니다.
      -> &nbsp; 이걸로 한 칸식 공백을 더 둘 수 있음.

      &lt;h1&gt;    이건 <h1>으로 보이게 할 수 있음
      &:구분

      ❤️<!--주석처리 단축키-->
      범위 드래그하고 
      Ctrl+/ 하면 주석처리할 수 있음

       

       

      더보기


      *폴더 구분하여 이미지 삽입
      <img src="./images/puppy.jpg" width="200" alt="모르는개" />

      ./ 먼저 쓰고 폴더명 
      / 쓰고 이미지 파일명 (+확장자까지)

      *상대경로(기준이 있다-현재 작업파일 위치 ㅇㄷ)
      /없으면 상대경로. 파일명으로 
      ex> page2.html

      이미지 폴더 구분 시 앞에 "/" 슬래시 붙이고 구분
      경로의 시작(절대경로)
      ex> 프로토콜인 https://

       

       


      줄 바뀌는 태그 : block - h1,
      줄 안 바뀌는 태그 : inline - a href, img,,,

      ㅎㅇ요 <a href="https://www.naver.com" target="_blank">네이버</a>

      target blank : 한 탭으로만 계속 열림
      target _blank : 탭이 계속 열림

      <p> 단락태그 : 닫으면 줄이 바뀌고 줄간격이 존재


      <ul> <ol>  <li>

      ⭐<ul> unordered list 무의미한 순서 목록, 자주 씀!!!
        dot으로 나타남

      <ol> ordered list 의미있음
       숫자로 나타남

      <li> ul, ol의 목록

      <hr /> :단일수평선태그



      <table>
      table 에서 셀의 크기(너비)는 해당 열에서 가장 긴 항목 기준

      <table> 이후에 아래 항목 3가지를 생략하면
       <thead> header
       <tbody> table 본문 : main
       <tfoot> footer
       --> 전부 <tbody>로만 처리



      iframe
      동영상(ex:유튜브..)
      자기가 만든 자료를 추가로 첨부

       

      form 요소 - 사용자입력용

       

      <input>

       

      ...

       

       

      <label>

      <input>

      <br> line breaker : 줄바꿈

       

      <h1>The input element</h1>

    <form action="">
      <label for="fname">First name</label>
      <input type="text" id="fname" name="fname"/><br /><br />
      <label for="lname">Last name</label>
      <input type="text" id="lname" name="lname"/><br /><br />
      <input type="submit" value="확인" />
    </form>
    
    <!--id는 연결, name은 submit후 서버연동 시 각자 무슨 데이터인지 알려줌-->

      입력포커스는 한 개씩만 가질 수 있다.

      제출 버튼 누른 후 구분하기 위해 사이트 주소에 ?가 붙는다.

       

      <input type="checkbox" id="reading" /> <label for="reading">독서</label>
<input type="checkbox" id="Movie" /> <label for="Movie">영화감상</label>
<input type="checkbox" /> 여행 <br />

      checkbox 가 있을 때 id를 배정하고 label 해 주면 텍스트를 눌러도 체크가 된다.

      여기서 여행은 체크박스를 눌러야만 체크됨.

       

      * toggle : 형태가 두 가지 이상일 경우 클릭할 때마다 바뀌는 것 (ex:checkbox)

       

      라벨을 크게 붙여주면 텍스트를 선택해도 체크박스나 라디오 버튼 선택이 된다.

      라디오 버튼 중복선택 방지

      <!-- 같은 name을 줘야 그룹화 됨-->
      성별 :
      <label><input type="radio" name="gender" /> 남 </label>
      <input type="radio" name="gender" /> 여
       

      초기값 설정하기(수정할 수 있으며 reset 시 다시 나타남)

      <!--value 삽입하여 초기값 손석구로 설정하기-->

<input type="text" value="손석구" /><br />

      Textarea : 여러 줄의 내용 삽입하기

       

      cols 글자수(알파벳 기준)

      rows 줄 수

       

      <tr>
        <td>내용</td>
        <td>
          <textarea cols="30" rows="10"></textarea>
        </td>
      </tr>

       

      더보기

      *주의사항
      <textarea cols="30" rows="10">디폴트값</textarea>

      디폴트값 입력 시 >이렇게< 사이에 꼭 붙여서 써야한다.
      공백 입력 시 값으로 인식한다.

       

      <audio>, <video>

        <body>
    <h3>오디오</h3>
    <audio src="Kalimba.mp3" controls></audio>

    <h3>비디오</h3>
    <video controls="controls" width="400">
      <source src="Wildlife.mp4" type="video/mp4"
    </video>
  </body>

      *윈도우에서는 이미지,오디오,비디오 소스 삽입 경우 파일명의 대소문자 구분을 하지 않는다.

      리눅스는 대소문자에 따라 다르게 인식함

       

      <select> 아래화살표

      <option> 펼쳤을 때 출력되는 내용

      option value는 서버로 전달하는 값

       

      radio처럼 여러 값 중 하나만 선택

       

      <p>The select element defines a drop-down list :</p>

    <form action="">
      Choose a car :

      <select name="cars" id="">
        <option value="volvo">Volvo</option>
        <option value="Benz">Benz</option>
        <option value="toyota">Toyota</option>
        <option value="audi">Audi</option>
      </select>

       

      그러나, 옵션을 주면 다중선택 가능 "multiple"

       <!--Ctrl키를 누른 채로 클릭 시 다중선택이 가능합니다.-->
      <select name="cars" id="cars" size="4" multiple>
        <option value="volvo">Volvo</option>
        <option value="Benz">Benz</option>
        <option value="toyota">Toyota</option>
        <option value="audi">Audi</option>
      </select>

      size는 누르지 않아도 노출되는 개수를 설정한다.

      자주 쓰는 유용한 태그

       

      • placeholder 가이드문자열
      <label for="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="e-mail을 입력하세요"
        />
      • required 필수항목 지정 : 조건 불만족 시 제출되지 않고 안내말풍선이 뜸.

       

       

      https://www.w3schools.com/

       

      W3Schools Online Web Tutorials

      W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

      www.w3schools.com

      연습하기 좋은 사이트

    Designed by Tistory.

    티스토리툴바