HTML/CSS/JS 기초 잡기 02 HTML

HTML-CSS-JS 2021. 8. 3. 20:49

유투버 유노코딩님, 어라운드허브님 강의 참조!

1. HTML 태그/속성/바디

HTML의 기본 구성요소는 태그로 이루어지며 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있고 종료시 /을 붙임
속성은 태그의 부가적인 정보를 제공하는 방법 (<img>, <src>, width, height 등)
바디는 태그와 태그사이의 콘텐츠를 의미
HTML의 기본 골격은 <HTML> / <HEAD> / <TITLE> / <BODY> 로 구성

모든 컨텐츠는 바디에 위치, 헤드에는 CSS/JS/외부정보에 대한 정의가 들어감

2. 레이아웃

화면의 구성요소를 배치하는 것을 의미하며 웹페이지 디자인을 시작할때 '제일 먼저' 설계해야하는 작업
보통 <div>태그를 이용해 나누며 일반적인 웹페이지는 상단 배너, 좌/우측 메뉴, 중앙 콘텐츠, 하단공통영역으로 구성

- HTML 기본 문법 및 태그 설명

HTML은 태그로 구성된 형태이며 뭐든지 태그로 열고 닫는 구조로 이루어짐

HTML의 기본 형태
<!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>
  
</body>
</html>

- HTML에서 가장 많이 쓰는 기본 태그 6가지

1. 텍스트 태그
- <h1~h6>, <p>(단락 태그) 등 등

- 단락태그사이에는 자동으로 공백이 들어감

- 수평선 태그 <hr>

- HTML/CSS 에서는 엔터는 공백을 의미 하지 않고 스페이스 또한 한번만 빈칸을 의미함 (여러 공백은 <br>)

    <body>
      <h1>HTML 입니다!</h1>
      <h2>텍스트 태그의 종류는 h1~h6까지!~</h2>
      <hr />
      <p>이것은 단락 입니다!</p>
    </body>

2. 링크 태그

현재 문서에서 다른 문서로 이동시켜주는 기능
인라인 요소이며, 주로 링크의 목적지를 나타냄
target="" 태그로 현재탭일지 새롭게 열지 고를 수 있음 (target="_self"/"_blank")
<a> 태그를 통해 전화걸기나 메일을 쓰게 할 수도 있다.
내 컴퓨터의 다른 html문서로 가고싶으면 그 주소를 적어도 가진다

  <body>
      <a href="https://www.naver.com"> 네이버로! </a>
      <br />
      <a href="https://www.google.com"> 구글로! </a>
      <br />
      <a href="https://www.fmkorea.com/"
        >이미지를 클릭해도 가져요!<br /><img src="/2.jpeg" width="200"
      /></a>
      <br />
      <a href="https://www.ygosu.com/" target="_self">현재창</a>
      <br />
      <a href="https://www.ygosu.com/" target="_blank">새탭</a>
      <br />
      <a href="tel:010-1234-5678">전화걸기</a>
      <br />
      <a href="mailto:sehwan_8@naver.com">메일보내기</a>
  </body>

3. 미디어 태그

단일 태그로써 닫는 태그를 필요로 하지 않고 alt="" 를 통해 이미지에대한 정보를 표시할수 있다
src="" 를 통해 표시할 이미지의 위치를 나타낸다

    <body>
      <img src="/2.jpg" width="300" height="300" alt="이미지"/>
      
//      <img src="https://upload.wikimedia.org/wikipedia/ko/c/cd/Doraemon.PNG"
//       width="300" height="300" alt="이미지"/>
    </body>

4. 리스트 태그

연관있는 항목들을 나열하기위한 기능. 리스트 태그는 블록요소를 가지고 있다.
순서있는것과 없는것으로 나뉨

  <body>
    <h1>순서 없는 목록</h1>
    <ul>
      <li><strong>강아지</strong></li>
      <li>고양이</li>
      <li>토끼</li>
    </ul>
    <br />
    <h1>순서 있는 목록</h1>
    <ol>
      <li><mark>HTML</mark></li>
      <li>CSS</li>
      <li>JS</li>
    </ol>
  </body>

5. 테이블 태그

    <table border="1">
      <!-- tr은 한줄, td 데이터가 들어갈 테이블 -->
      <tr>
        <td>언어</td>
        <td>역할</td>
      </tr>
      <tr>
        <td>HTML</td>
        <td>뼈대</td>
      </tr>
      <tr>
        <td>CSS</td>
        <td>꾸밈</td>
      </tr>
      <tr>
        <td>JS</td>
        <td>동적임</td>
      </tr>
    </table>

6. 입력 태그

사용자로부터 값을 입력받을수있는 대화형 인라인 요소
input은 type의 값에따라 형태나 입력 데이터 유형이 달라진다
더 많은 type은 다음 주소로!(https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input)
input에는 식별자가 중요하다 (name="" 을 써서 JS나 웹프로그래밍에서 중요한 요소)

  <body>
    <input type="text" placeholder="입력하세요!" maxlength="5" /><br /><br />
    <input type="button" value="Button!" /><br /><br />
    <input type="color" />색을 고르세요!<br /><br />
    <input type="range" max="10" min="0" /><br /><br />
    <input type="date" /><br /><br />
  </body>

연습 문제 1

  <body>
    <h1>우산</h1>
    <p>
      이슬비 내리는 이른 아침에<br />
      우산 셋이 나란히 걸어갑니다.
    </p>
    <p>
      파란우산 검정우산 찢어진 우산<br />
      좁다란 학교길에 우산 세게가<br />
      이마를 마주대고 걸어갑니다.
    </p>
    <img src="/2.jpeg" width="200px" />
  </body>

- 그 외 알면 좋은 것들

1) 개발자 도구

웹브라우저에는 개발자 도구가 탑재되어 있다. HTML/CSS코드, 모바일 모니터링, 네트워크 상태점검 등 개발자게에 편의를 제공하는 기능
HTML/CSS를 위해서는 Elements를 잘 보아야 한다

2) 블록요소 vs 인라인요소

블록요소 - 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
인라인요소 - 자기에게 필요한 만큼만 차지하여 형성

3) 컨테이너 및 전역 속성

컨테이너 태그 - 컨텐츠나 레이아웃에 아무런 영향을 주지 않지만 다른 요소 여럿을 묶어 관리하기 편하게 만들어 준다 (<div>, <span>등)
<hr>태그는 표면적으로는 구별이 가능하나 코드상으로는 전혀 아니다.

<div>는 블록요소기반 이며 이를 통해 한 영역을 묶어서 관리가 가능하다

전역속성 - 모든 HTML 태그에 공통으로 사용할수있는 속성
더 많은 속성들은 여기로! (https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes)

4) 또 다른 입력 요소

select - 다수의 옵션을 선택할수있는 속성, input과 마찬가지로 name과 value 지정 가능. 여기서 value는 실제로 처리될 값임
textarea - 여러줄의 일반 텍스트를 입력할수있는 속성. 역시 name을 지정 가능 (빗금으로 조절 가능)

  <body>
    <h1>Select what you like!</h1>
    <select name="sports">
      <option value="1">Soccer</option>
      <option value="2">Baseball</option>
      <option value="3">Basketball</option>
    </select>
    <br /><br />
    <select name="sports" multiple>
      <option value="1">Soccer</option>
      <option value="2" selected>Baseball</option>
      <option value="3">Basketball</option>
    </select>
    <br /><br />
    <textarea name="content" rows="5" cols="10"></textarea>
  </body>

5) Form 태그

사용자가 입력한 데이터를 서버로 보내기 위해 사용하는 태그
form은 입력 요소들을 감싸며 입력값을 서버로 제출(submit)할 수 있다
form의 속성에는 action과 method로 나뉘며 action은 입력값을 전송할 주소, method는 어떤식으로 전송할지를 지정하는 속성(GET/POST)

  <body>
    <h1>Select What you like!</h1>
    <form action="exam.php" method="POST">
      <input type="text" placeholder="NAME" name="name" />
      <br />
      <select name="pet">
        <option value="1">Soccer</option>
        <option value="2">Pingpong</option>
        <option value="3">Swim</option>
      </select>
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>

'HTML-CSS-JS' 카테고리의 다른 글

HTML/CSS 클론코딩으로 복습하기 3 - 유투브 (0)	2021.08.06
HTML/CSS 클론코딩으로 복습하기 2 - 반응형 헤더 (0)	2021.08.05
HTML/CSS 클론코딩으로 복습하기 1 - 구글 (0)	2021.08.05
HTML/CSS/JS 기초 잡기 03 CSS (0)	2021.08.04
HTML/CSS/JS 기초 잡기 01 기본개념 (0)	2021.08.02

ABOUT ME

Treasure Treasure

유투버 유노코딩님, 어라운드허브님 강의 참조!

- HTML 기본 문법 및 태그 설명

'HTML-CSS-JS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

유투버 유노코딩님, 어라운드허브님 강의 참조!

- HTML 기본 문법 및 태그 설명

'HTML-CSS-JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바