7l log

0527 HTML 본문

2022

0527 HTML

HAPAGO 2022. 5. 27. 17:23

Hyper Text Mark up Languge ->  웹에서 자유롭게 오갈수 있는 웹 문서를 만드는 언어

 

<!DCOTYPE html> 
<html lang="ko"> 
<head>
<title>웹 문서 만들기</title> 
</head>
<body>
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>

메모장에 .html로 저장하여 열면, 웹브라우저에서 열림( 형태: 모든파일)

 

반드시 시작태그와 종료태그가 있어야 함 <> </>

화면상에 보여지는 부분은 <body> 안에 있음

<head>안에는 정보 

 

 

 

https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

 

비주얼스튜디오 코드 프로그램 다운받기

비주얼코드에서 주석다는 법: ctrl + /

 

 

 

라이브 서버 설치하기
라이브서버로 열기

<위 페이지 소스보기>

<!DCOTYPE html>
  <html lang="ko">
  <head>
  <title>웹 문서 만들기</title>
  </head>
  <body>
  <h1>웹 개발 기초</h1>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
  <!-- Code injected by live-server -->
  <script type="text/javascript">
  // <![CDATA[ <-- For SVG support
  if ('WebSocket' in window) {
  (function () {
  function refreshCSS() {
  var sheets = [].slice.call(document.getElementsByTagName("link"));
  var head = document.getElementsByTagName("head")[0];
  for (var i = 0; i < sheets.length; ++i) {
  var elem = sheets[i];
  var parent = elem.parentElement || head;
  parent.removeChild(elem);
  var rel = elem.rel;
  if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
  var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
  elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
  }
  parent.appendChild(elem);
  }
  }
  var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
  var address = protocol + window.location.host + window.location.pathname + '/ws';
  var socket = new WebSocket(address);
  socket.onmessage = function (msg) {
  if (msg.data == 'reload') window.location.reload();
  else if (msg.data == 'refreshcss') refreshCSS();
  };
  if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
  console.log('Live reload enabled.');
  sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
  }
  })();
  }
  else {
  console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  }
  // ]]>
  </script></body>
  </html>

 

시맨틱 태그: 이름만 봐도 의미를 알 수 있는 html태그

<p> 태그로 묶인 부분은 하나의 덩어리 </p>

<em>강조- 이탤릭체  </em> 

<strong>  볼드체 </strong>        

<br>태그는 닫는태그 없고 한 줄 뛸때 사용

<hr태그> 가로 줄, 분위기 전환 </hr> 

<ol> 순서가 있는 목록(orderde list) </ol>

<li> 순서대로 정렬됨 </li>

 

<ul> 순서가 없는 리스느 (unordered list) </ul>

 

표를 만드는 태그

<table> 표 전체 </table>

<caption>표 제목</caption>

<tr> 행 </tr>

<th>제목 셀</th>

 

이미지 넣기 방법 <img src="images/ tangerines.jpg"(경로확인) alt="레드향"(대체택스트)>

 

오디오넣기 방법 <audio src="mdeias/spring.mp3" controls(재생막대 표시됨></audio>

비디오 넣기 방법 <video src= "medias/salad.mp4 controls  width="450"(크기조절)</vedio>

그 외 옵션기능들 controls, autoplay, loop, muted, preload, width, height, poster="파일이름"

 

하이퍼링크 만들기

<a href= "embed.html" target="blank"(새페이지로 열리게) > 하이퍼링크 만들기 </a>

 

 

공부하기 편한 사이트

https://www.w3schools.com/html/default.asp

 

HTML Tutorial

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

 

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN (mozilla.org)

 

<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language | MDN

HTML <h1>–<h6> 요소는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮습니다.

developer.mozilla.org

 

 
 
 
 
<!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 action="test" method="post">

        <label>이름</label>
        <input type="text" name="name" ><br>
        <label>전화번호</label>
        <input type="tel" name="phone" ><br>
        <label>주소</label>
        <input type="text" name="address" ><br>
        <input type="submit" value="회원가입">
    </form>

   
</body>
</html>

 

 

type= "radio" 라디오버튼 (둘 중 하나 선택)

type="checkbox" (중복선택 가능)

 

<!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>
        <fieldset>
          <legend>상품 선택</legend>
          <p><b>주문할 상품을 선택해 주세요.</b></p>
          <ul>
            <li>
              <label><input type="checkbox" value="s_3">선물용 3kg</label>
              <input type="number">개
            </li>
            <li>
              <label><input type="checkbox" value="s_5">선물용 5kg</label>
              <input type="number">개
            </li>
            <li>
              <label><input type="checkbox" value="f_3">가정용 3kg</label>
              <input type="number">개
            </li>
            <li>
              <label><input type="checkbox" value="f_5">가정용 5kg</label>
              <input type="number">개
            </li>
          </ul>  
          <p><b>포장 선택</b></p>
          <ul>
            <li><label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
            <li><label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
          </ul>    
        </fieldset>
        <fieldset>
          <legend>배송 정보</legend>
          <ul>
            <li>
              <label for="user-name">이름 </label>
              <input type="text" id="user-name">
            </li>
            <li>
              <label for="addr">배송 주소</label>
              <input type="text" id="addr">
            </li>
            <li>
              <label for="mail">메일 주소</label>
              <input type="email" id="mail">
            </li>        
            <li>
              <label for="phone">연락처</label>
              <input type="tel" id="phone">
            </li>
          </ul>  
        </fieldset>      
      </form>
</body>
</html>
 
 
 
 
 
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/form2.css">
</head>
<body>
  <h1>레드향 주문하기</h1>
  <form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul id="shipping">
        <li>
          <label for="prod">주문 상품</label>
          <input type="text" id="prod" value="상품용 3KG" readonly>
        </li>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" autofocus required>
        </li>
        <li>
          <label for="addr">배송 주소</label>
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" pattern="[0-9]{3}-[0-9]{3,4}-\d{4}" id="phone" placeholder="하이픈 빼고 입력해 주세요.(01012345678)" required>
        </li>
        <li>
          <label for="d-day">배송 지정</label>
          <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
        </li>        
      </ul>  
    </fieldset>
    <div>
      <input type="submit" value="주문하기">
      <input type="reset" value="취소하기">
    </div>        
  </form>
</body>
</html>

 

* readonly : 지워지지 않게, 읽기전용

*required: 꼭 입력해야 넘어가게 되게 함

 

저작자표시 비영리 변경금지 (새창열림)

'2022' 카테고리의 다른 글

0531  (0) 2022.06.02
0530 CSS  (0) 2022.05.30
[R데이터분석] 날짜와 시간 관련함수(package: lubridate)  (0) 2022.04.24
[R데이터분석] 리스트, 데이터프레임  (0) 2022.04.24
[R데이터분석] 행렬, 배열  (0) 2022.04.24
'2022' Related Articles more
Comments