beloved_eob.log https://velog.io/ 공부 중. !!! ! Sat, 02 Dec 2023 15:37:56 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed beloved_eob.log https://velog.velcdn.com/images/beloved_eob/profile/d0d571e9-4605-4a05-897f-f97844674521/image.png https://velog.io/ Copyright (C) 2019. beloved_eob.log. All rights reserved. <![CDATA[JS : 자바스크립트 소스 작성과 연결]]> https://velog.io/@beloved_eob/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%86%8C%EC%8A%A4-%EC%9E%91%EC%84%B1%EA%B3%BC-%EC%8B%A4%ED%96%89 https://velog.io/@beloved_eob/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%86%8C%EC%8A%A4-%EC%9E%91%EC%84%B1%EA%B3%BC-%EC%8B%A4%ED%96%89 Sat, 02 Dec 2023 15:37:56 GMT ⚫ 자바스크립트 소스를 작성하는 두 가지 방법

  • 외부 스크립트 파일 연결 html문서와 자바스크립트 소스를 분리하여 작업하기 위해 연결하는 방법

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자바스크립트 소스 작성하는 두 가지 방법</title>
</head>
<body>
  <-- src = "js파일 경로" -->
  <script src="script.js"></script>
</body>
</html>

  • 내부 스크립트 연결

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자바스크립트 소스 작성하는 두 가지 방법</title>
</head>
<body>

  <h1 id="a"> 자바스크립트 공부 </h1>

  <-- 자바스크립트 내부 연결 -->
  <script>
      var a = document.querySelector('#a');
      a.onclick = function() {
          a.style.color = "red";
      }

  </script>
</body>
</html>
]]> <![CDATA[JS : 자바스크립의 특징]]> https://velog.io/@beloved_eob/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%EC%9D%98-%ED%8A%B9%EC%A7%95 https://velog.io/@beloved_eob/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%EC%9D%98-%ED%8A%B9%EC%A7%95 Sat, 02 Dec 2023 15:09:55 GMT ⚫ 프로그래밍이란?

프로그램을 만드는 과정 사람이 원하는 대로 컴퓨터가 작동할 수 있도록 컴퓨터 언어로 명령어를 나열하는 행위

⚫ 웹 프로그래밍이란?

웹에 관련된 프로그램을 만드는 행위 웹 브라우저와 관련된 프로그램을 작성하는 것

웹 프로그래밍에서 가장 많이 쓰이는 프로그래밍 언어가 자바스크립트

⚫ 자바스크립트의 특징

모든 웹 브라우저에서 작동 웹 브라우저에서 실행 결과를 바로 확인할 수 있다. 다양한 용도의 프로그램을 만들 수 있다. 다양한 공개 API를 사용할 수 있다. 다양한 라이브러리와 프레임워크를 사용할 수 있다.

◾ 프레임워크란? 프레임워크에서 기본으로 제공하는 소스를 수정하거나 추가하는 방법으로 웹 프로그램을 만들 수 있게 미리 준비한 일종의 틀

]]> <![CDATA[HTML : 시맨틱 태그]]> https://velog.io/@beloved_eob/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8 https://velog.io/@beloved_eob/HTML-%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8 Wed, 25 Oct 2023 14:21:02 GMT 웹 페이지를 설계하는 시맨틱 태그

시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.



🟣 hearder 태그

  • 웹 페이지에서 헤더 영억을 구분
  • 최상단이나 좌측에 위치
  • 로고, 검색, 메뉴와 같은 요소들을 포함함
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
      최상단이나 좌측에 위치
      로고, 검색, 메뉴와 같은 요소들을 포함
  </header>
</body>
</html>

🟣 nav 태그

  • 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분
  • 보통 헤더 영역에서의 메뉴나 목차와 같은 요소가 많음
  • 굳이 내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없음
  • 주요 탐색 링크 영역만 포함해도 됨
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            메뉴 또는 목차 같은 요소에 많이 사용
        </nav>
    </header>
</body>
</html>

🟣 section 태그

  • 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분

  • 보통 내용의 제목을 나타내는 hn 태그 중 하나를 포함

  • section 요소안에 header 나 footer를 넣을 수 있음

  • body에 들어 갈 수 있는 모든 요소를 넣음

  • class나 id 속성을 사용해 특정한 정보도 넣을 수 있음

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
      <nav>

      </nav>
  </header>
  <section>
      논리적인 내용의 영역을 구분
  </section>
</body>
</html>

🟣 article 태그

  • 웹 페이지에서 독립적인, 별개인 영역을 구분

  • 제일 좋은 영역은 네이버에서 기준으로 보면 로그인창이다.

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
      <nav>

      </nav>
  </header>
  <section>

  </section>
  <article>
      로그인 영역은 메인 페이지에서도 사용하지만, 
      다른 페이지에서도 많이 사용하기 때문이다.
  </article>
</body>
</html>

🟣 aside 태그

  • 주력 내용이나 독립적인 내용으로 보기 어려워서 section 태그로 영역을 구분할 수 없을 때 사용

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
      <nav>

      </nav>
  </header>
  <section>

  </section>
  <article>

  </article>
  <aside>
      aside !!!!!!!
  </aside>
</body>
</html>

  • 웹 페이지에서 푸터 영역을 구분

  • 푸터 영역은 보통 웹 페이지의 최하단에 있음

  • 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함

  • 항상 끝에 쓸 필요는 없음

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
      <nav>

      </nav>
  </header>
  <section>

  </section>
  <article>

  </article>
  <aside>

  </aside>
  <footer>
      최하단에 위치하고 있지만
      꼭 굳이 최하단에 쓸 필요는 없다
  </footer>
</body>
</html>

🟣 main 태그

  • 웹 페이지의 주요 내용을 지정할 때 사용
  • 문서 내에서 한 번만 사용해야 함. 중요한 규칙 !!!!
  • <header>, <nav> , <article> , <aside> , <footer> 태그의 하위에 포함할 수 없음
]]> <![CDATA[MySQL : 데이터베이스, DB, DBMS, SQL]]> https://velog.io/@beloved_eob/SQL-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-DB-DBMS-SQL https://velog.io/@beloved_eob/SQL-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-DB-DBMS-SQL Mon, 23 Oct 2023 08:24:19 GMT 🔴 데이터베이스

컴퓨터 안에 기록되어 있는 숫자를 의미. 이러한 데이터의 집합을 데이터베이스 라고 함 넓은 의미로는 컴퓨터 안에 기록된 모든 것 데이터베이스 내의 데이터는 영구적으로 보존되어야 함

🔴 DB 와 DBMS

  • DB 데이터베이스의 약자 저장장치 내에 정리되어 저장된 데이터의 집합

  • DBMS 저장된 데이터의 집합을 효율적으로 관리하는 소프트웨어. 즉, 데이터베이스 관리 시스템 또는 DBMS 라고도 함. 사용 목적은 생산성 향상과 기능성, 신뢰성 확보에 있음.

🔴 SQL

DBMS를 이용하면 간접적으로 데이터베이스를 참조할 수 있고, 혹은 데이터를 추가하거나 삭제, 갱신할 수도 있는데 이 같은 DBMS와의 대화에 필요한 것이 SQL

- SQL 명령의 종류

  • DML 데이터베이스에 새롭게 데이터를 추가, 삭제, 내용 갱신 등 데이터를 조각할 때 사용 INSERT , SELECT , DELETE , UPDATA

  • DDL 데이터를 정의하는 명령어. 데이터베이스 객체(Object) 라는 데이터 그릇을 이용해 데이터를 관리. 이 같은 객체를 만들거나 삭제하는 명령어 CREATE , ALTER , DROP , TRUNCATE

  • DCL 데이터를 제어하는 명령어 GRANT , REVOKE

]]> <![CDATA[HTML : 입력 양식 (2) <form, input, label, fieldset, legend 등>]]> https://velog.io/@beloved_eob/HTML-%EC%9E%85%EB%A0%A5-%EC%96%91%EC%8B%9D-2 https://velog.io/@beloved_eob/HTML-%EC%9E%85%EB%A0%A5-%EC%96%91%EC%8B%9D-2 Sun, 22 Oct 2023 14:48:03 GMT 🟣 form 태그

폼 양식을 의미하는 태그 HTML의 폼을 구성하는 태그는 모두 from태그 안에 작성함

  • from 태그의 문법

    <form action = "서버 URL" method = "GET 또는 POST"> </from>

  • action 속성 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 넣는다.

  • method 속성 입력받은 값을 서버에 전송할 때 송신 방식을 넣는다.

    GET : 보안이 요구되지 않은 정보. 사용자의 입력 데이터를 URL에 표시. 데이터 크기에 제한이 있고 쿼리 형식. 주소 줄 ? 뒤에 데이터가 붙여져서 전달되는 방식.
    POST : 보안이 요구되는 정보. 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있음. HTTP REquest 헤더 안에 데이터가 숨겨져서 전송되는 방식.

  • input 태그를 사용해서 아이디와 비밀번호를 입력하는 공간을 만들어 작성을 하고 sumbit 버튼을 누르면 action 속성에 입력된 input.html 로 전송되게 임시로 작성하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> form 태그 사용하기 </title>
</head>
<body>
    <form action="input.html" method="get">
        <!-- GET 메소드를 이용하여 입력양식을 만든다 -->
        아이디 : <input type="text"  name="id">
        <!-- 사용자가 아이디를 입력할 수 있는 공간을 만드는 태그 -->
        비밀번호 : <input type="password">
        <!-- 사용자가 비밀번호를 입력할 수 있는 공간을 만드는 태그 -->
        <input type="submit" value="로그인">
        <!-- 제출 버튼을 만드는 태그 -->
    </form>
</body>
</html>
  • 그러면 출력된 웹 페이지엔 처음에 아이디와 비밀번호를 입력하는 태그가 출력이 된다.
  • 로그인 버튼을 누르게 되면 action 속성에 입력된 input.html 에 로그인 성공 ! 이라는 텍스트가 나오게 코드를 작성해두었다.
    <!-- input.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 확인을 위한 임시 서버 URL</title>
</head>
<body>
  로그인 성공 !
</body>
</html>
    🔽 로그인 버튼을 누르면 나오는 웹 페이지 🔽

🟣 input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때 사용

  • input 태그의 문법
    <input type = "종류" name = "이름" value = "초기값">
  • type 속성 입력된 값에 따라 상호작용 요소의 종류를 결정

🔽 input 태그로 생성할 수 있는 입력 요소와 type 속성값 🔽

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> input 태그의 type </title>
</head>
<body>
    <input type="text"> <br>
    <input type="password"> <br>
    <input type="tel"> <br>
    <input type="number"> <br>
    <input type="url"> <br>
    <input type="search"> <br>
    <input type="email"> <br>
    <input type="checkbox"> <br>
    <input type="radio"> <br>
    <input type="file"> <br>
    <input type="button"> <br>
    <input type="image" src="images/images2/lovedog.jpg" width="100px" height="100px"> <br>
    <input type="hidden"> <br>
    <input type="date"> <br>
    <input type="datetime-local"> <br>
    <input type="month"> <br>
    <input type="week"> <br>
    <input type="time"> <br>
    <input type="range"> <br>
</body>
</html>

🔽 type 속성값을 적용 후 출력 🔽

  • name 속성 입력 요소의 이름을 작성 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정됨 서버에서는 지정된 이름으로 입력 요소를 식별할 수 있음

  • value 속성 입력 요소의 초기값을 작성 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초기값을 설정해야하는 경우가 있는데 이럴 때 사용하는 속성임.

🟣 label 태그

form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용 label 태그만 클릭해도 연결된 양식에 입력할 수 있도록 하거나, 체크 또는 체크를 해제할 수 있음.

  • label 태그의 암묵적인 방법으로 코드 작성
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> label 태그 </title>
</head>
<body>
  <label> 아이디 입력 
      <input type="text">
  </label>    
</body>
</html>

🔽 위 코드를 실행해보면 이렇게 아이디 입력란이 나오는데 아이디 입력을 누르면 입력할 수 있도록 한다 🔽

  • label 태그의 명시적인 방법으로 코드 작성
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> label 태그 </title>
</head>
<body> <!-- label for의 속성값과 input id속성값이 같아야한다 -->
  <label for = "useid"> 아이디 입력 </label>
      <input type="text" id = "useid">    
</body>
</html>

🟣 fieldset 와 legend 태그

form 태그 안에 사용된 상호작용 요소도 fieldset태그를 사용해 그룹 지을 수 있음 fieldset태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생김 그룹 지은 요소들은 legend태그로 이름을 붙일 수 있음

  • fieldset 와 legend 태그를 사용한 코드 작성
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="#" method="get">
      <fieldset>
          <legend> 그룹 이름 </legend>
          <label> 아이디
              <input type = "text">
          </label>
          <label> 비밀번호
              <input type = "password">
          </label>
      </fieldset>
  </form>
</body>
</html>

🔽 fieldset 와 legend 태그를 사용해 출력 🔽


🟣 select, option, optgroup 태그

select 태그는 콤보박스를 생성 콩보박스에 항목 하나를 추가할 땐 option 태그 사용 항목들을 묶고 싶을 때는 optgroup 태그를 사용

  • select, option, optgroup 태그를 사용한 코드 작성
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> select 태그 사용하기 </title>
</head>
<body>
  <select>
  <optgroup label="지역 이름">
      <option value="울산"> 울산 </option>
      <option value="부산"> 부산 </option>
      <option value="대구"> 대구 </option>
      <option value="경주"> 경주 </option>
      <option value="포항"> 포항 </option>
  </optgroup>
  <optgroup label="구 이름">
      <option value="북구"> 북구 </option>
      <option value="남구"> 남구 </option>
      <option value="동구"> 동구 </option>
      <option value="없음"> 없음 </option>        
  </optgroup>
  </select>
</body>
</html>
  • option 태그는 서버에 전송할 값을 value 속성으로 지정할 수 있음 속성을 생략하면 option 태그의 콘텐츠로 적은 텍스트가 값으로 전송됨 optgroup 태그로 항목을 그룹 지을 때 반드시 label속성으로 그룹명을 지정해야 함

🔽 select, option, optgroup 태그를 사용해 출력 🔽


  • size 속성 콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성 속성값으로 숫자를 적으면 됨. 생략할 경우 기본으로 1개 항목이 표시 됨.
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> select 태그 사용하기 </title>
</head>
<body>
  <select size="3">
  <optgroup label="지역 이름">
      <option value="울산"> 울산 </option>
      <option value="부산"> 부산 </option>
      <option value="대구"> 대구 </option>
      <option value="경주"> 경주 </option>
      <option value="포항"> 포항 </option>
  </optgroup>
  </select>
</body>
</html>

🔽 select 태그에 size 속성을 사용해 출력 🔽


  • multiple 속성 select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택 가능하지만, multiple 속성을 사용하면 여러 항목을 동시에 선택 할 수 있음 (콤보박스에서 항목 하나를 선택한 상태로 Ctrl을 누르고 다른 항목을 클릭하면 됨)
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> select 태그 사용하기 </title>
</head>
<body>
  <select multiple>
  <optgroup label="지역 이름">
      <option value="울산"> 울산 </option>
      <option value="부산"> 부산 </option>
      <option value="대구"> 대구 </option>
      <option value="경주"> 경주 </option>
      <option value="포항"> 포항 </option>
  </optgroup>
  </select>
</body>
</html>

🔽 select 태그에 multiple 속성을 사용해 출력 🔽


  • selected 속성 콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> select 태그 사용하기 </title>
</head>
<body>
    <select>
        <option value="울산"> 울산 </option>
        <option value="부산"> 부산 </option>
        <option value="대구" selected> 대구 </option> <!-- 대구에 selected 속성을 사용 -->
        <option value="경주"> 경주 </option>
        <option value="포항"> 포항 </option>
    </select>
</body>
</html>

🔽 option 태그에 selected 속성을 사용해 출력 🔽


🟣 button 태그

input 태그에서 type 속성값을 sumbit, reset, button 으로 지정해 생성할 수 있지만, 별도의 button 태그로 생성할 수 있음

  • button 태그의 문법
    <button type = "종류"> 버튼 이름 </button>
    type의 속성값은 폼을 서버에 전송할 목적이면 sumbit 상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset 단순한 버튼이면 button
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> button 태그 사용하기 </title>
</head>
<body>
    <button type = "submit">
        <img src = "images/images2/lovedog2.jpg" width="100px" height="100px">
        버튼 누르기
    </button>
</body>
</html>

🔽 button 태그 사용 출력 🔽

  • input 태그의 button과 button 태그의 다른 점 button 태그는 input 태그로 생성할 수 있는 버튼 요소의 역할을 대신하기 위해 만들어진 태그 input 태그보다 나중에 등장했다. button 태그도 input 태그로 생성하는 버튼 요소처럼 type 속성이 있어서 최신 HTML에서는 버튼 요소를 생성할 때 더 이상 input 태그를 사용할 필요가 없다. button 태그는 시작 태그와 종료 태그가 있어서 콘텐츠를 작성할 수 있다. 또한, 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소 꾸미기가 더 수월하다.

🟣 폼 관련 태그에서 사용할 수 있는 추가 속성

  • disabled 속성 상호작용 요소를 비활성화 함. form태그로 서버에 값을 전송 안됨. input , textarea , select , button 태그에 사용 가능 비활성화 되면 입력 요소는 텍스트를 입력하지 못하고, 목록 상자는 항목을 선택할 수 없고, 버튼은 클릭할 수 없음
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> disabled 속성 </title>
</head>
<body>
  <input type = "text" disabled>
  <textarea disabled></textarea>
  <select disabled>
      <option value="강아지"> 강아지 </option>
      <option value="고양이"> 고양이 </option>
  </select>
  <button disabled> 버튼 비활성화 </button>
</body>
</html>
    🔽 disabled 속성 사용해서 출력하기 🔽

  • readonly 속성 상호작용 요소를 읽기 전용으로 변경. form 태그로 서버에 값을 전송됨. 입력 요소에 텍스트를 입력하지는 못하지만, 요소를 선택하거나 드래그해서 내용을 복사할 순 있음 textarea , input 태그에서 사용 가능 input 태그에서는 type 속성값이 텍스트를 입력하는 요소의 속성값일 때만 사용 가능
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> readonly 속성 </title>
</head>
<body>
  <textarea readonly></textarea>
  <input type = "text" readonly>
</body>
</html>
    🔽 readonly 속성 사용해서 출력하기 🔽

  • maxlength 속성 입력할 수 있는 글자 수를 제한함 속성값으로는 숫자를 입력. 텍스트 입력이 가능한 요소의 태그와 type만 사용 가능.
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> maxlength 속성 </title>
</head>
<body>
  <textarea maxlength = "10"></textarea>
  <input type = "tel" maxlength="5">
</body>
</html>
    🔽 maxlength 속성 사용해서 출력하기 🔽
- 위에 출력된 텍스트 입력 요소에 입력을 해보면 textarea는 10글자 이상 입력이 안되고, input type의 tel속성은 5글자 이상 입력이 안되는걸 알 수 있음.

  • checked 속성 요소를 선택된 상태로 표시 선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용 가능
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> checked 속성 </title>
</head>
<body>
    <fieldset>
     <legend> 먹고 싶은 메뉴 </legend>
        <label> <input type="checkbox" name="chicken" checked> 치킨 </label>
        <label> <input type="checkbox" name="pizza"> 피자 </label>
        <label> <input type="checkbox" name="meat"> 고기 </label>     
    </fieldset>
</body>
</html>

🔽 checked 속성 사용해서 출력하기 🔽


  • placeholder 속성 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도

    <input type="text" placeholder="힌트를 적는 곳">

  • placeholder 속성을 사용한 코드 작성

    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> placeholder 속성 </title>
</head>
<body>
  <fieldset>
   <legend> 먹고 싶은 메뉴 </legend>
      <label> <input type="checkbox" name="chicken" checked> 치킨 </label>
      <label> <input type="checkbox" name="pizza"> 피자 </label>
      <label> <input type="checkbox" name="meat"> 고기 </label>   <br>
      <label> <input type = "text" placeholder = "다른 메뉴는 작성해주세요"> </label>
  </fieldset>
</body>
</html>

    🔽 checked 속성 사용해서 출력하기 🔽

]]> <![CDATA[HTML : div와 span태그로 그룹 짓기]]> https://velog.io/@beloved_eob/HTML-div%EC%99%80-span%ED%83%9C%EA%B7%B8%EB%A1%9C-%EA%B7%B8%EB%A3%B9-%EC%A7%93%EA%B8%B0 https://velog.io/@beloved_eob/HTML-div%EC%99%80-span%ED%83%9C%EA%B7%B8%EB%A1%9C-%EA%B7%B8%EB%A3%B9-%EC%A7%93%EA%B8%B0 Sun, 22 Oct 2023 09:55:49 GMT

HTML 코드를 작성하다 보면 요소들을 그룹으로 묶어야 하는 경우가 많다. 웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워진다. 이런 그룹 짓기를 HTML 에서는 <div>태그와 <span>태그로 작업한다.

- 관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미로 공간 분할 이라고 한다. 그래서 이 작업을 하는 <div>태그와 <span>태그를 공간 분할 태그 라고도 한다.

🟣 div 태그 (블록 요소)

블록 요소와 인라인 요소를 그룹으로 묶을 때 사용 줄 바꿈이 되는 태그 페이지를 논리적인 구역으로 분리하는 데 사용되는 태그

<div> 태그의 문법은 아래 코드와 같이 사용

<div> </div>
  • 아래 작성된 태그처럼 body 태그안에 영역 구분 없이 텍스트만 작성하면 코드가 복잡해질수록 텍스트를 구분하기 어려워진다. 이 텍스트들을 div태그를 사용해 <p>태그를 영역별로 그룹을 지을 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> div 태그로 그룹 짓기 </title>
</head>
<body>
    <!-- 텍스트만 작성된 코드 -->
    <p> 분식집 </p>
    <p> 분식집을 소개하는 페이지입니다. </p>
    <p> 육회집 </p>
    <p> 육회집을 소개하는 페이지입니다. </p>
</body>
</html>

🔽 <div> 태그로 그룹을 지어 코드 작성 🔽

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> div 태그로 그룹 짓기 </title>
</head>
<body>
    <div class = "snack"> <!-- 분식집 태그를 그룹짓는 div태그 -->
    <p> 분식집 </p>
    <p> 분식집을 소개하는 페이지입니다. </p>
    </div>    
    <div class = "meat"> <!-- 육회집 태그를 그룹짓는 div태그 -->
    <p> 육회집 </p>
    <p> 육회집을 소개하는 페이지입니다. </p>
    </div>
</body>
</html>

실행을 해보면 웹 브라우저에선 글씨만 나오고 어떻게 그룹이 지어졌는지 확인을 제대로 할 수 없지만, 확인을 위해서 웹 브라우저에서 F12 를 누르고 개발자 도구로 요소를 확인을 해보면 아래 그림처럼 div 로 나누어져 있는걸 확인할 수 있다.

🔽 div태그를 좀 더 쉽게 이해하기 위해 만든 이미지 🔽


🟣 span 태그 (인라인 요소)

인라인 요소를 묶을 때 사용 줄 바꿈이 되지 않는 태그 텍스트를 위한 컨테이너로 사용 가능 CSS와 함께 텍스트 일부의 스타일 속성을 설정할 때 사용

  • 아래 작성된 코드처럼 <p>태그 안에 글씨 색을 넣어 강조하고 싶을 때 <span> 태그를 이용해 작성할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> span 태그로 그룹 짓기 </title>
</head>
<body>
    <div class = "snack"> 
    <p> 분식집 </p>
    <p> <span style = "color: brown;"> 분식집 </span>을 소개하는 페이지입니다. </p>
    </div>    
    <div class = "meat"> 
    <p> 육회집 </p>
    <p> <span style = "color: blue;"> 육회집 </span>을 소개하는 페이지입니다. </p>
    </div>
</body>
</html>

🔽 <span> 태그를 사용해서 출력 🔽

🔽 span 태그를 좀 더 쉽게 이해하기 위해 만든 이미지 🔽

]]> <![CDATA[HTML : 입력 양식 (1) <iframe, textarea>]]> https://velog.io/@beloved_eob/HTML-%EC%9E%85%EB%A0%A5-%EC%96%91%EC%8B%9D https://velog.io/@beloved_eob/HTML-%EC%9E%85%EB%A0%A5-%EC%96%91%EC%8B%9D Sun, 22 Oct 2023 08:08:10 GMT 🟣 iframe 태그

웹 페이지 안에서 프레임을 만들고 여기에 다른 웹 페이지를 표시할 때 사용 흔히 광고를 위해서 iframe 사용

🔽 iframe 태그를 사용해 작성한 코드 🔽

🔽 <iframe> 을 이용해서 출력 🔽

이 웹 브라우저를 확인하려면 iframe을 작성한 html 파일에서 실행 시켜야 함

🟣 textarea 태그

사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역 개수의 제한 없이 문자를 입력 가능 입력된 문자는 고정폭 글꼴로 렌더링됨 <textarea> 입력 영역의 크기는 cols 속성과 rows 속성으로 지정 가능

- CSS에서 너비조절하는 속성을 사용하면 쉽게 지정 가능
<!-- textarea 태그를 사용해서 코드 작성 -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> textarea 태그 사용하기 </title>
</head>
<body>
    <textarea cols="50" rows="20"></textarea>
    <!-- cols는 넓이, rows는 높이 -->
</body>
</html>

🔽 <iframe> 을 이용해서 출력 🔽

]]> <![CDATA[HTML : 멀티미디어 추가하기 <audio, video, source>]]> https://velog.io/@beloved_eob/HTML-%EB%A9%80%ED%8B%B0%EB%AF%B8%EB%94%94%EC%96%B4-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 https://velog.io/@beloved_eob/HTML-%EB%A9%80%ED%8B%B0%EB%AF%B8%EB%94%94%EC%96%B4-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0 Sat, 21 Oct 2023 16:48:05 GMT

웹 페이지에서 가장 많이 볼 수 있는 오디오와 비디오를 audio 태그와 video 태그로 작성할 수 있다


🟣 audio 태그

<audio src = "audio 파일 경로" controls> </audio>

<audio> 태그는 src 속성과 함께 사용 src 속성값에는 삽입하려고 하는 오디오 파일의 경로를 작성 오디오 컨트롤 패널이 노출되도록 controls 속성을 설정

* audio 태그에서 지원하는 속성

- 웹 브라우저마다 지원하는 오디오 파일 포맷이 다르기 때문에 코드를 작성하기 전에 지원 여부를 확인해야함
audio 태그 사용해서 코드 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> audio 추가하기 </title>
</head>
<body> 
    <audio src = "Camille de la Cruz - blah blah blah.mp3" controls> </audio>
    <!-- 오디오 파일 출처 : https://artlist.io/ -->
</body>
</html>

🔽 audio 태그 사용해서 출력 🔽


🟣 video 태그

video 태그도 src 속성을 필수로 사용

* video 태그에서 지원하는 속성

video 태그 사용해서 코드 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> video 추가하기 </title>
</head>
<body> 
   <video src = "mydog.mp4" controls width="500px" height="500px"></video>
   <!-- 비디오의 기본 사이즈가 커서 width, height로 사이즈 조절 -->
</body>
</html>

🔽 video 태그 사용해서 출력 🔽


🟣 source 태그

멀티미디어 태그를 사용할 때 필수로 사용해야하는 태그는 아니지만, 되도록이면 함께 사용하면 좋은 태그 왜 좋냐? 멀티미디어 태그는 다양한 포맷을 지원하지만, 웹 브라우저별로 지원하는 포맷과 타입이 다르기 때문에 !

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> source 사용하기 </title>
</head>
<body> 
    <video controls> <!-- video 태그에 source 태그 사용하기 -->
        <source src = "mydog.mp4" type = "video.mp4">
        지원하지 않는 웹 브라우저입니다.
    </video>
    <audio controls>
        <source src = "Camille de la Cruz - blah blah blah.mp3" type = "audio.mp3">
        <!-- audio 태그에 source 태그 사용하기 -->
        지원하지 않는 웹 브라우저입니다.
    </audio>
</body>
</html>

위 코드와 같이 작성했을 때 video 태그의 파일이 현재 웹 브라우저에 해당 파일 포맷을 지원하는지 확인한다 지원하지 않는 형식의 파일이라면 마지막에 작성한 텍스트가 사용자에게 노출된다 웹 접근성을 고려해 <source> 태그로 다양한 포맷의 멀티미디어를 등록해 두는 방식으로 사용하는 것이 좋다

]]> <![CDATA[HTML : 테이블 (표) 만들기 <table, tr, th, td 등>]]> https://velog.io/@beloved_eob/HTML-%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.io/@beloved_eob/HTML-%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0 Sat, 21 Oct 2023 16:03:09 GMT 테이블(표)은 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터

다음 그림처럼 행, 열, 행과 열이 만나는 셀로 구성


🟣 table 태그

표를 생성하는 태그 표 관련 태그는 모두 <table> 태그 안에서 사용

🟣 tr 태그

표에서 행을 생성할 때 사용 <tr> 태그 하나는 행 하나를 생성 행을 여러개 만들고 싶으면 <tr> 태그를 여러 번 사용

🟣 th 와 td 태그

표에서 열을 생성할 때 사용 <th> 태그는 표에서 제목을 나타내는 열을 생성할 때 <td> 태그는 표에서 (데이터를 나타내는) 열을 생성할 때 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 테이블 만들기 </title>
</head>
<body> 
   <table>
        <tr> 
            <td> 열1 </td>
            <td> 열2 </td>
        </tr>
        <tr> 
            <td> 열3 </td>
        </tr>        
   </table>
</body>
</html>

🔽 <tr> 태그와 <td> 태그 사용시 출력 🔽


🟣 표 만들기

다음 그림처럼 표를 만들려면 <table> 태그 안에 <tr> 태그와 <th> , <td> 태그를 다음과 같이 작성하면 된다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 테이블 만들기 </title>
</head>
<body> 
   <table> <!-- 테이블 시작 -->
        <tr> <!-- 행1 -->
            <th>번호</th> <!-- 문서의 제목 -->
            <th>메뉴</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
        <tr> <!-- 행2 -->
            <td>1</td> 
            <td>떡볶이</td> <!-- 열1 -->
            <td>10</td>
            <td>16,000원</td>
        </tr>
        <tr> <!-- 행3 -->
            <td>2</td> 
            <td>짬뽕</td> <!-- 열2 -->
            <td>20</td>
            <td>7,000원</td>
        </tr>
        <tr> <!-- 행4 -->
            <td>3</td>
            <td>육회</td> <!-- 열3 -->
            <td>30</td>
            <td>20,000원</td>
        </tr>
        <tr> <!-- 행5 -->
            <td>4</td>
            <td>마라탕</td> <!-- 열4 -->
            <td>40</td>
            <td>15,000원</td>
        </tr>    
   </table> <!-- 테이블 종료 -->
</body>
</html>

🔽 표 만들기 출력 🔽

- 그림에 있는 표에는 테두리가 있지만 HTML에서 표는 기본으로 테두리가 없게 설정되어 있어서 테두리를 보이게 하려면 CSS를 적용해야한다

🟣 rowspan 과 colspan 속성

<rowspan> 행과 행을 병합 <colspan 열과 열을 병합 병합을 할때 rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적는다

  • 다음 그림처럼 행과 열을 병합하고 싶으면 다음 코드처럼 작성하면 된다
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 테이블 만들기 </title>
</head>
<body> 
 <table>
      <tr>
          <th>번호</th>
          <th>메뉴</th>
          <th>수량</th>
          <th>가격</th>
      </tr>
      <tr>
          <td>1</td>
          <td>떡볶이</td>
          <td>10</td>
          <td>16,000원</td>
      </tr>
      <tr>
          <td>2</td>
          <td>짬뽕</td>
          <td>20</td>
          <td rowspan="2">7,000원</td> <!-- 행 병합하기 -->
          <!-- 4행 4열은 3행 4열과 병합해서 생성 안함 -->
      </tr>
      <tr>
          <td >3</td>
          <td>육회</td>
          <td>30</td>            
      </tr>
      <tr>
          <td>총 금액</td>
          <td colspan="3">23,000원</td> <!-- 열 병합하기 -->
          <!-- 5행 2열부터 열 3개를 병햅해서 나머지 열은 생성 안함 -->
      </tr>    
 </table>
</body>
</html>

🔽 테이블 병합 출력 🔽


🟣 caption 태그

표 제목을 지정하는 태그 <table> 태그 안에 첫 번째로 작성해야 하는 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 테이블 만들기 </title>
</head>
<body> 
   <table>
    <caption> 제목 정하기 </caption> <!-- 제목을 지정하는 태그 -->
        <tr>
            <th>번호</th>
            <th>메뉴</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
   </table>
</body>
</html>

🔽 제목 지정하는 태그 출력 🔽


🟣 col 과 colgroup 태그

열을 그룹화할 때 사용하는 태그 <col> 태그는 하나의 열을 그룹화 <colgroup> 태그는 span 속성과 함께 사용해서 2개 이상의 열을 그룹화 두 태그의 개수와 사용한 열 개수가 일치해야한다

만약 테이블을 만들때 <caption> 를 사용한다면 <caption> 태그 다음에 사용하고 <tr> 태그보다는 먼저 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 테이블 만들기 </title>
</head>
<body> 
   <table>
    <caption> 최애 메뉴 !!!! </caption>
        <!-- 총 4열 -->
        <col style = "width: 90px;"> <!-- 1열 너비 -->
        <colgroup span = "2" style= "width: 150px;"></colgroup> <!-- 2열과 3열 너비 -->
        <col style = "width: 200px;"> <!-- 4열 너비 -->
          <tr>
              <th>번호</th>
              <th>메뉴</th>
              <th>수량</th>
              <th>가격</th>
          </tr>
          <tr>
              <td>1</td>
              <td>떡볶이</td>
              <td>10</td>
              <td>16,000원</td>
          </tr>
          <tr>
              <td>2</td>
              <td>짬뽕</td>
              <td>20</td>
              <td rowspan="2">7,000원</td> 
          </tr>
          <tr>
              <td >3</td>
              <td>육회</td>
              <td>30</td>            
          </tr>
          <tr>
              <td>총 금액</td>
              <td colspan="3">23,000원</td> 
          </tr>    
   </table>
</body>
</html>

🔽 col 과 colgroup 태그로 너비 설정 출력 🔽

]]> <![CDATA[HTML : 링크와 이미지 넣기 <link, a, img>]]> https://velog.io/@beloved_eob/HTML-%EB%A7%81%ED%81%AC%EC%99%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%84%A3%EA%B8%B0 https://velog.io/@beloved_eob/HTML-%EB%A7%81%ED%81%AC%EC%99%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%84%A3%EA%B8%B0 Wed, 18 Oct 2023 14:50:18 GMT 🟣 링크 (link)

문서와 문서 간 연결을 의미 기본으로 <a> 태그를 사용 사진과 같은 이미지 객체 삽입은 <img> 태그를 사용

🟣 a 태그

HTML 에서 내부나 외부 링크를 생성함 다른 문서로 점프할 수 있는 단어나 이미지

<a href = "대상 경로" target = "링크 연결 방식" title = "링크 설명"> </a>

- href 속성

링크의 목적지를 나타냄 링크의 대상 경로 ( URL ) 를 입력할 때 사용

- targer 속성

링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는지 지정 _black 새로운 윈도우에서 새로운 페이지를 여는 _self 현재 윈도우에서 새로운 페이지를 적재 _parent 부모 프레임에서 새로운 페이지를 적재 _top 현재 윈도우에서 새로운 페이지를 적재하고 모든 프레임을 취소

- title 속성

링크를 설명할 수 있는 텍스트를 작성

<a href = "https://velog.io/" target = "_black" title = "좋아요"> 벨로그는 사랑 </a>
- 만약 대상 경로가 명확하지 않을 때
연결해야 하는 대상의 주소가 불분명한 경우 href 속성에 " # " 사용하면 됨
<a href = "#" target = "_black" title = "주소가 아직 없어요"> </a>

🟣 img 태그

HTML 에서 이미지 객체를 삽입하고 싶을 때 사용

<img src = "이미지 경로" alt = "이미지 설명">

- src 속성

삽입하려는 이미지의 경로를 입력하는 속성

  • 경로를 입력할 때 경로 입력에서만 사용할 수 있는 약속된 기호가 있음 ./ 현재 폴더 ../ 상위 폴더

경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 이미지 경로 입력하기 </title>
</head>
<body>    
    <img src="images/lovedog.jpg">
</body>
</html>

- alt 속성

삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣는 속성 이미지가 제대로 로드가 될 경우엔 alt 속성 값은 웹 브라우저에 보이지 않음 하지만 alt 속성은 이미지를 보지 못하는 분들이 봄 시각 장애인분들은 이미지를 볼 수 없기 때문에 alt 속성을 스크린 리더로 들음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 이미지 경로 지정하고 텍스트 넣기 </title>
</head>
<body>    
    <img src="image/lovedog.jpg" alt="강아지는 사랑이에요">
</body>
</html>

🔽 이미지 로드가 안됬을 경우에도 alt 속성이 출력된다 🔽


🟣 이미지 링크

img 태그를 a 태그 안에 사용해서 이미지를 클릭하면 a 링크에 지정한 링크로 이동 가능하게 하는

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 이미지 경로 지정하기 </title>
</head>
<body> 
    <a href="http://www.naver.com" target="_blank" title="새 창에서 열어요">
        <img src="images/lovedog.jpg" alt="강아지는 사랑이에요">
    </a>
</body>
</html>

🔽 이미지를 누르면 웹 브라우저의 새 탭에서 네이버를 열게 했을때 🔽

]]> <![CDATA[ HTML : 리스트 (목록) 만들기 <ul, ol, dl>]]> https://velog.io/@beloved_eob/HTML-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%AA%A9%EB%A1%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.io/@beloved_eob/HTML-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%AA%A9%EB%A1%9D-%EB%A7%8C%EB%93%A4%EA%B8%B0 Wed, 18 Oct 2023 13:44:01 GMT HTML 에서 목록을 생성할 때 사용할 수 있는 태그는 <ul> , <ol> , <dl> 3가지가 있음

🟣 ul 태그

순서가 없는 비순서형 목록 생성 번호가 없는 리스트 <ul> 태그로 시작 리스트 항목은 <li> 로 시작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <ul> <!-- 리스트 시작 -->
        <li> 아이스 아메리카노 </li>    <!-- 리스트 항목 -->
        <li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
        <li> 아이스 히비스커스 </li>    <!-- 리스트 항목 -->
        <li> 초코라떼 </li>
    </ul> <!-- 리스트 종료 -->
</body>
</html>

🔽 <ul> 태그 사용해서 출력 🔽


🟣 ol 태그

순서형 목록을 생성 번호가 있는 리스트 <ol> 태그로 시작 리스트 항목은 <li> 로 시작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <ol> <!-- 리스트 시작 -->
        <li> 아이스 아메리카노 </li>    <!-- 리스트 항목 -->
        <li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
        <li> 아이스 히비스커스 </li>    <!-- 리스트 항목 -->
        <li> 초코라떼 </li>
    </ol> <!-- 리스트 종료 -->
</body>
</html>

🔽 <ol> 태그 사용해서 출력 🔽


🟣 dl 태그

정의형 목록 용어와 용어 설명을 나열한 형태의 목록을 만들 때 <dl> 태그로 시작 <dt> 태그는 항목 <dd> 태그는 항목에 대한 설명

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <dl> <!-- 정의 리스트 시작 -->
        <dt> 아이스 아메리카노 </dt> <!-- 단어 -->
        <dd> 에스프레소에 뜨거운 물을 희석시켜 만든 음료 </dd> <!-- 단어의 설명 -->
        <dt> 말차 크림 프라푸치노 </dt> 
        <dd> 제주 유기농 말차로 만든 크림 프라푸치노 </dd>
        <dt> 아이스 히비스커스 </dt> 
        <dd> 무궁화속 두해살이풀인 로젤 열매를 말린 후 끓여 우려낸 대용차 </dd>
        <dt> 초코라떼 </dt>
        <dd> 핫초코가루로 시원하게 먹기 좋지만 살이 디룩 디룩 </dd>
    </dl> <!-- 정의 리스트 종료 -->
</body>
</html>

🔽 <dl> 태그 사용해서 출력 🔽

]]> <![CDATA[HTML : 텍스트 작성하기 (2) <strong, em, pre, 여러가지 서식과 특수문자>]]> https://velog.io/@beloved_eob/HTML-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-2 https://velog.io/@beloved_eob/HTML-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-2 Wed, 18 Oct 2023 13:21:58 GMT 🟣 strong 태그

텍스트의 의미를 강조하고 싶을 때 사용 중첩으로 사용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> strong 태그 사용하기 </title>
</head>
<body>
    <p> <strong>옮길 운, 목숨 명.</strong> 내 모든 생을 걸고 옮기는 걸음이 바로 운명이니까요. </p>
    <p> 더킹: 영원의 군주 대사 중 </p>
</body>
</html>

🔽 <strong> 태그 사용 출력 🔽


🟣 em 태그

텍스트의 의미를 강조하고 싶을 때 사용 텍스트가 기울어져 보임

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> em 태그 사용하기 </title>
</head>
<body>                                                                <!-- em 태그를 사용한 곳 -->
    <p> <strong>옮길 운, 목숨 명.</strong> 내 모든 생을 걸고 옮기는 걸음이 <em>바로 운명</em>이니까요. </p>
    <p> 더킹: 영원의 군주 대사 중 </p>
</body>
</html>

🔽 <em> 태그 사용 출력 🔽

🟣 pre 태그

스페이스(띄어쓰기)나 탭, 줄 바꿈이 입력한 그대로 화면에 표시할 수 있는 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <!-- pre 태그 사용하기 -->
   <pre> 
    pre 태그는
    입력한 그대로 화면에

    표시할 수 있다 !!!!!!
   </pre> 
</body>
</html>

🔽 <pre> 태그 사용 출력 🔽


🟣 여러가지 텍스트 서식

한글과 같은 워드에는 글자 굵기, 기울기 등 글자를 이탤릭체로 만드는거처럼 HTML 에서도 동일한 기능을 하는 텍스트 서식 태그들

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body> 
   <b> 볼드체로 만드는 태그 </b> <br>
   <i> 이탤릭체로 만드는 태그 </i> <br>
   <p> <strong> 텍스트를 강하게 표시하는 태그 </strong> </p>
   <em> 텍스트를 강조하는 태그 </em> <br>
   <p> <code> 텍스트가 코드임을 표시하는 태그 </code> </p>
</body>
</html>

🔽 텍스트 서식들의 태그 사용 출력 🔽


🟣 특수문자

' < ' 나 ' > ' 같은 문자들을 HTML 에서 태그들을 나타내는 특수한 의미로 사용하고 있기 때문에 ' < ' 나 ' > ' 같은 문자들은 특수한 기호를 사용해서 나타냄

&nbsp; non-breaking space의 약자. 공백 문자 한 개 &lt; < &gt; > &quot; " (큰 따옴표) &amp; & 태그들을 나타내는 '< 태그 >' 처럼 홉화살괄호로 감싸면 안되고 오로지 단어만 넣어야함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <code> 텍스트가&nbsp;코드임을&nbsp;표시하는&nbsp;태그 </code>
    <p> &lt;특수문자 알아보기&gt; </p>
    <p> &quot;큰 따옴표&quot; </p>
    <p> &amp;엔---------드&amp; </p>
</body>
</html>

🔽 특수문자 사용 출력 🔽

]]> <![CDATA[HTML : 텍스트 작성하기 (1) <hn, p, br, blockquote, q, ins, del, sub, sup>]]> https://velog.io/@beloved_eob/HTML-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0 https://velog.io/@beloved_eob/HTML-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0 Tue, 17 Oct 2023 14:08:17 GMT

웹 페이지를 구성하는 요소 중 가장 큰 비중을 차지하는 요소는 텍스트임 우리가 쓰려는 텍스트가 설명일 수도 있고, 제목, 부제목, 말이나 인용일 수도 있음 텍스트를 웹 브라우저가 구분하게 하려면 목적에 맞는 텍스트 태그를 사용해야 함

🟣 hn 태그 (h1 ~ h6)

제목 또는 주제를 나타내는 텍스트를 표현할 때 사용 h1부터 h6까지 6개가 있음 h : heading n : 1 ~ 6 까지 숫자 hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식

검색엔진은 hn 태그를 검색할 때 단계적으로 검색함
h1, h2 ~ h6 태그를 사용하다 중간에 h4 태그가 없으면 h5, h6 태그는 검색하지 않음
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <!-- hn 태그 사용 -->
    <h1> h1으로 표현하는 제목 </h1>
    <h2> h2으로 표현하는 제목  </h2>
    <h3> h3으로 표현하는 제목  </h3>
    <h4> h4로 표현하는 제목  </h4>
    <h5> h5로 표현하는 제목  </h5>
    <h6> h6으로 표현하는 제목  </h6>
</body>
</html>

🔽 <hn> 태그 출력 🔽


🟣 p 태그

본문의 문단을 작성할 때 사용 ( 블록요소 , 강제 줄 바뀜 )

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <h1> h1으로 표현하는 제목 </h1>
    <!-- p 태그 사용 -->
    <p> p 태그는 본문에서 자주 사용하는 태그 </p>
</body>
</html>

🔽 <p> 태그 출력 🔽


🟣 br 태그

문단에서 줄 바꿈할 때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <h1> h1으로 표현하는 제목 </h1>
                <!-- br 태그 없이 -->
    <p> p 태그는 본문에서 자주 
        사용하는 태그 </p>
</body>
</html>

이렇게 코드를 작성해도 줄 바꿈 되어서 출력이 되지 않음 HTML은 모든 명령이나 지시를 태그로 해야 하기 때문

🔽 <br> 태그 없이 출력 🔽


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <h1> h1으로 표현하는 제목 </h1>
                            <!-- br 태그 사용 -->
    <p> p 태그는 본문에서 자주 <br>
        사용하는 태그 </p>
</body>
</html>

🔽 <br> 태그 사용해서 출력 🔽


🟣 blockquote 태그

다른 출저로부터 인용된 블록을 정의할 때 사용 ( 인라인 요소 )

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>
    <!-- <blockquote cite = "출처 URL"> 문단 단위 인용문 </blockquote> -->
    <blockquote cite = "출처 URL">
        <p>  HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는
            의미의 웹 페이지를 위한 지배적인 마크업 언어다. <blockquote>HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여
            CSS의 사용을 권장한다.</blockquote> </p>
    </blockquote>
</body>
</html>

🔽 <blockquote> 출력 🔽


🟣 q 태그

문단 안에 짧은 인용문을 작성할 때 사용 큰 따옴표 (" ") 로 묶임

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <p>  HTML은 하이퍼텍스트 마크업 언어 </p>
    <p> (HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 </p>
    <p> 의미의 웹 페이지를 위한 지배적인 마크업 언어다. </p>
    <p> <q>HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.</q> </p>

</body>
</html>

🔽 <q> 태그 출력 🔽


🟣 ins 태그, del 태그

<ins> 태그는 새로 추가된 텍스트임을 나타냄. 사용한 텍스트에 밑줄이 생김 <del> 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타냄. 사용한 텍스트에 취소선이 생김

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
   <p> S펜 너무 비싸다 <del>60,000원</del>이 넘는다. 반값으로 <ins>30,000원</ins>에 팔았으면 좋겠다. </p>   
</body>
</html>

🔽 <ins> 와 <del> 태그 사용 출력 🔽


🟣 sub 태그, sup 태그

<sub> 태그는 아래 첨자 <sup> 태그는 위 첨자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body> <!--아래 첨자-->        <!--위 첨자-->
   <p> <sub>S펜</sub> 너무 <sup>비싸</sup>다 </p>   
</body>
</html>

🔽 <sub> 와 <sup> 태그 사용 출력 🔽

]]> <![CDATA[HTML 특징 : 블록요소, 인라인요소, 관계, 코드의 가독성]]> https://velog.io/@beloved_eob/HTML%EC%9D%98-%ED%8A%B9%EC%A7%95 https://velog.io/@beloved_eob/HTML%EC%9D%98-%ED%8A%B9%EC%A7%95 Tue, 17 Oct 2023 12:44:34 GMT 🟣 블록 요소

body 태그에서 사용하는 태그 중 웹 브라우저의 공간 유무와 상관없이 줄 바꿈이 되는 태그 대표적인 블록 요소는 <div> , <table> , <h1> ~ <h6> , <p> , <form> , <ul> , <ol> , <li> , <dl> , <dt> , <dd> , <pre> , <blockquote> 등이 있음

<p> 블록요소 </p>
<hn> 블록요소 </hn>

🟣 인라인 요소

공간이 부족할 때만 줄 바꿈이 되는 태그 대표적인 인라인 요소는 <span> , <a> , <br> , <em> , <strong> , <input> , <label> , <img> 이 있음

<a href=“URL”> 인라인 요소 </a>
<span> 인라인 요소 </span>

🟣 부모, 자식, 형제 관계

  • <head> 와 <body> 태그는 <html> 태그의 자식
  • <html> 태그는 <head> 와 <body> 태그의 부모
  • <head> 와 <body> 태그는 부모 태그 (<html>)가 같아 형제

HTML은 태그의 사용 위치에 따라 부모, 자식, 형제 관계를 맺음

🟣 코드의 가독성을 위해

HTML 문서에 태그를 작성할 때는 되도록 줄 바꿈과 들여쓰기를 하는 것이 좋음 문법상 강제적인 규칙은 아니지만, 암묵적으로 지키는 규칙. 즉, 관례라고 생각하면 됨

]]> <![CDATA[HTML의 기본 구조 : html, head, body]]> https://velog.io/@beloved_eob/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 https://velog.io/@beloved_eob/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 Mon, 09 Oct 2023 15:59:41 GMT
👀 쉽게 이해하기 위한 참고용 img 👀

🟣 <!DOCTYPE html>

<!DOCTYPE> 은 브라우저가 올바르게 웹 페이지를 표시할 수 있도록 도움

🟣 <html>

<html> 태그는 HTML 문서의 시작과 끝을 의미 모든 태그는 <html> 시작과 끝 </html> html 안에 작성

🟣 <head>

HTML 문서는 <head> 태그와 <body> 로 구성 <head> 태그는 메타데이터를 담는 컨테이너.

◽ 메타데이터란 HTML문서에 대한 정보. 웹 브라우저에 노출되지 않음
과거에는 주로 EUC-KR을 주로 사용했지만, 최근에는 UTF-8만 사용함
◽ <title> 태그는 문서의 제목
검색 엔진 사이트에서 HTML 문서를 찾을 때는 <title> 태그에 작성된 제목으로 찾기 때문에 문서 제목은 중복이 되면 안됨 
<head> 태그 영역은 
  <mata charset = "UTF-8">
  <title> 문서의 제목 </title>
  <style> CSS </style>
  <script> 자바스크립트 </script> 등의 태그를 사용함
</head>

🟣 <body>

웹 브라우저 안에 표시되는 내용을 작성하는 영역

<html>
<head> 태그 영역은 
  <mata charset = "UTF-8">
  <title> 문서의 제목 </title>
  <style> CSS </style>
  <script> 자바스크립트 </script> 등의 태그를 사용함
</head>
<body>
    <p> 이 영역이 웹 브라우저 안에 표시되는 내용을 작성.
        p 태그 외에도 많은 태그(요소)들이 있다. </p>
</body>
</html>



]]> <![CDATA[HTML 기본 구성 요소 : HTML, 태그, 속성, 주석]]> https://velog.io/@beloved_eob/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8 https://velog.io/@beloved_eob/HTML%EC%9D%98-%EA%B8%B0%EB%B3%B8 Mon, 09 Oct 2023 08:01:43 GMT 🟣 HTML

Hypertext Markup Language의 약자 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어

  • Hypertext : 하이퍼링크를 통해 어떤 문서에 다른문서로 접근가능한 텍스트
  • Markup : (콘텐츠를) 표시
  • Language : (컴퓨터) 언어

🟣 태그

다양한 구성 요소를 정의하는 역할 HTML 문법을 이루는 가장 작은 단위 홉화살괄호(<>) 사이에 태그명을 넣는 형태

<태그명>

🟣 속성

태그에 어떤 의만 기능을 보충하는 역할, 옵션이라고 생각하면 됨 속성은 사용을 해도 되고 안 해도 되고, 여러 개 사용 가능 태그 없이 단독으로 사용 X

<태그명 속성명 = "속성값">

속성을 사용시 속성명은 따옴표없이 작성 속성값은 큰따옴표("속성값") 안에 작성 속성값이 여러 개인 경우 하나의 큰따옴표 안에 쉼표(,)로 구분

<태그명 속성명 = "속성값1, 속성값2, 속성값3, …">

🟣 주석

주석은 웹 브라우저에 따로 표시되지는 않음 코드에 메모나 설명을 남기고 싶을때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 메모나 설명을 남기고 싶을때는 주석 -->
    <title> HTML 기본 구성 요소 공부 중 </title>
</head>
<body>

</body>
</html>
◽ 주석 단축키가 있지만 프로그램마다 단축키가 다름

🟣 문법

HTML은 태그와 속성으로 문법을 구성 문법은 콘텐츠(content)가 있는 문법과 없는 문법으로 나눔

  • 콘텐츠가 있는 문법

    <title> 오늘은 HTML 기본 구성요소 공부 중 </title>

    앞에 넣은 태그 <title> 은 시작태그, 뒤에 넣은 태그 </title> 은 종료태그 오늘은 HTML 기본 구성요소 공부 중 은 콘텐츠 시작태그와 종료태그, 콘텐츠를 합쳐서 요소라고 함

  • 콘텐츠가 없는 문법

    <br>

    앞뒤로 감싸야 할 콘텐츠가 없으므로 시작태그만 사용 내용이 비어 있다는 의미로 빈태그 라고 함 콘텐츠가 없는 문법은 시작태그가 곧 요소이기 때문에 <br>요소 라고 할 수 있음




]]>