[P1_S1] HTML 핵심개념

보리·2024년 3월 9일
CSS
0

codeit-sprint

목록 보기
2/22

⚠️URI 스킴(URI Scheme)

Uniform Resource Identifier (URI) Schemes

이메일 보내기

mailto:<이메일 주소>라는 걸 사용하면 이메일을 보낼 수 있습니다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 줍니다.


<!-- test@example.com으로 이메일 보내기 -->
<a href="mailto:test@example.com">메일 보내기</a>

전화 걸기

tel:<전화번호>를 사용하면 전화를 걸 수 있는데요. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결됩니다.


<!-- 한국의 010-1234-0123으로 전화걸기 -->
<a href="tel:+821012340123">전화 걸기</a>

✨링크의 상대 주소(Relative URL)

현재 폴더는 점 한 개(./)

상위 폴더는 점 두 개(../)

최상위 폴더는 경로 맨 앞에 /

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5707&directory=revue-lien.png&name=revue-lien.png

✨URI 프래그먼트(URI Fragment)

페이지의 특정 부분을 가리키는 주소

원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하는 #아이디-이름 을 쓰면 됨.


팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다.

...

<p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>

📘 target 속성

새 창(새 탭)으로 열거나 현재 창 또는 내가 원하는 창으로 열 수 있다.


<a href="https://movie.naver.com" target="_blank"><!-- 새 창으로 열기 -->
  네이버 영화
</a>
<a href="https://movie.naver.com" target="_self"><!-- 현재 창 -->
  네이버 영화
</a>
<a href="https://movie.naver.com" target="movie"><!-- 내가 원하는 창 -->
  네이버 영화
</a>
<a href="https://movie.daum.net" target="movie"><!-- 내가 원하는 창 -->
  다음 영화
</a>
<a href="https://imbd.com" target="movie"><!-- 내가 원하는 창 -->
  imbd
</a>

✨텍스트 태그

  • 제목 태그 <h1> ~ <h6>
  • 본문 <p>
  • 줄바꿈 <br>
  • 중요 <strong>

글 굵게

  • 강조 <em>

기울기

  • 취소 <s>

글에 줄치기

  • 인용 <blockquote>, <q>

길게 인용할 때 <blockquote>

짧게 인용할 때는 <q>

  • 위 첨자, 아래 첨자

약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자

  • 주제 전환(Thematic Break)

과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만, 최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그다.

  • 미리 서식이 정해진 텍스트 <pre>

코드 통으로 쓸 때

  • 코드 <code>

    짧은 코드를 작성할 때

📘순서 리스트(Ordered List)

순서가 있는 목록을 작성할 때 <ol>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그


<h2>상영작 순위</h2>
<ol>
  <li>라라랜드</li>
  <li>명량</li>
  <li>극한직업</li>
  <li>신과함께: 죄와 벌</li>
  <li>국제시장</li>
  <li>어벤져스: 엔드게임</li>
</ol>

📘순서 없는 리스트(Unordered List)

순서가 없는 목록을 작성할 때 <ul>이라는 태그를 감싸고, 그 안에 항목은 <li> 태그


<h2>카테고리</h2>
<ul>
  <li>한국 영화</li>
  <li>외국 영화</li>
  <li>드라마</li>
  <li>예능</li>
  <li>영화</li>
  <li>프로야구</li>
</ul>

📘리스트 스타일링

순서 리스트에서는 type 속성으로 기호를 바꿀 수 있다.


<ol type="I">
  <li>라라랜드</li>
  <li>명량</li>
  <li>극한직업</li>
  <li>신과함께: 죄와 벌</li>
  <li>국제시장</li>
  <li>어벤져스: 엔드게임</li>
</ol>
type 값실제 기호
aa, b, c, d, e, …
ii, ii, iii, iv, v, …
II, II, III, IV, V, …
11, 2, 3, 4, 5, …

list-style이라는 CSS 속성으로도 바꿀 수 있다.


ul {
  list-style: disc; /* 동그라미 */
}

기호를 없애고 싶을 때는 none을 사용.


ul {
  list-style: none;
}

리스트 항목을 한 줄로 쓰고 싶으면 display: inline-block을 활용할 수도 있다. 


ul > li {
  display: inline-block;
}

✨테이블

  • 정보를 표로 나타낼 때는 <table> 태그를 사용
  • 테이블의 행은 <tr> (Table Row)태그
  • 각 데이터들은 <td> (Table Data) 태그

<table>
  <tr>
    <td></td>
    <td>Premium</td>
    <td>Standard</td>
    <td>Basic</td>
  </tr>
  <tr>
    <td></td>
    <td>₩15,900</td>
    <td>₩10,900</td>
    <td>₩8,900</td>
  </tr>
  <tr>
    <td>화질</td>
    <td>최대</td>
    <td>FHD</td>
    <td>HD</td>
  </tr>
  <tr>
    <td>다운로드</td>
    <td>무제한</td>
    <td>월 30회</td>
    <td>불가</td>
  </tr>
</table>

📘머리글

  • 표에서 머리글은 <thead> 태그
  • 행은 <tr> 태그
  • 각 행 안에 있는 것들은 제목이기 때문에 <th>라는 태그
  • 본문에 해당하는 행들은 <tbody>

<thead>
  <tr>
    <th></th>
    <th>Premium</th>
    <th>Standard</th>
    <th>Basic</th>
  </tr>
  <tr>
    <th></th>
    <th>₩15,900</th>
    <th>₩10,900</th>
    <th>₩8,900</th>
  </tr>
</thead>
<tbody>
  <tr> ... </tr>
  ...
</tbody>

📘바닥글

  • 표에서 바닥글은 <tfoot> 태그
  • <thead>와 마찬가지로 행은 <tr>로
  • 제목으로 쓰는 칸은 <th> 태그

<table>
  <thead>
    <tr>
      <th></th>
      <th>Premium</th>
      <th>Standard</th>
      <th>Basic</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>₩15,900</th>
      <th>₩10,900</th>
      <th>₩8,900</th>
    </tr>
  </tfoot>
</table>

✨테이블 스타일링

📘테두리 넣기

border 속성을 사용해서 테두리를 넣을 수 있다.

  • 표 전체에 테두리를 넣고 싶으면 <table> 태그에 적용
  • 각 셀에 적용하고 싶으면 <td> 태그에 적용

📘테두리 겹치기

기본적으로 표의 테두리는 서로 간격이 있어서 표 전체, 각 셀마다 보인다. 이 간격을 없애고 테두리끼리 겹치고 싶다면 border-collapse 속성을 활용하면 된다.


table {
  border: 1px solid red;
  border-collapse: collapse;
}

th {
  border: 1px solid green;
}

td {
  border: 1px solid blue;
}

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5720&directory=table-summary-01.png&name=table-summary-01.png

📘테두리 간격

테두리 사이의 간격을 직접 조절하고 싶다면 border-spacing이라는 속성 사용


table {
  border: 1px solid red;
  border-spacing: 10px;
}

th {
  border: 1px solid green;
}

td {
  border: 1px solid blue;
}

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5720&directory=table-summary-02.png&name=table-summary-02.png

✨이미지 <img>

  • 파일 주소는 src 속성으로 지정.
  • 크기는 width와 height 속성으로 단위 없이 지정.
  • 이미지에 대한 설명은 alt

<img src="poster.jpg" width="750" height="530" alt="영화 명량 포스터">

✨비디오 <video>

  • 파일 주소는 src
  • 크기는 width와 height 속성으로 단위 없이 지정
  • 자동 재생을 하는 autoplay 속성
  • 음소거를 하는 muted
  • 조작하는 버튼들을 보여 주는 controls
    • 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 동작한다는 점

<video autoplay muted controls src="trailer.mp4" width="750" height="530">
</video>

✨오디오 <audio>

  • 파일 주소는 src
  • 자동 재생을 하는 autoplay
  • 조작하는 버튼들을 보여 주는 controls

<audio autoplay controls src="intro.mp3">
</audio>

✨iframe <iframe>

  • 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용
  • src로 불러올 문서의 경로를 지정
  • width, height라는 속성으로 지정할 수 있다.

<iframe src="banner.html" width="750" height="135">
</iframe>

✨action 속성

폼 내용을 전송할 주소를 정하는 방법

확인 버튼을 누르면 기본적으로는 페이지를 이동


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>코드잇</title>
  </head>
  <body>
    <form>
      <div>
        <label for="signup-email">이메일</label>
        <input id="signup-email" name="email" type="email">
      </div>
      <div>
        <label for="signup-password">비밀번호</label>
        <input id="signup-password" name="password" type="password">
      </div>
      <div>
        <label for="signup-password-repeat">비밀번호 확인</label>
        <input id="signup-password-repeat" name="password_repeat" type="password">
      </div>
      <button>
        확인
      </button>
    </form>
  </body>
</html>

현재 페이지의 주소가 http://127.0.0.1:3000이라고 가정하고 이메일에 html@codeit.kr 비밀번호로는 ilovehtml이라고 적고 나서 확인 버튼을 눌렀다고 가정한다. 그럼 아래와 같은 주소로 이동한다.


http://127.0.0.1:3000/?email=html%40codeit.kr&password=ilovehtml&password_repeat=ilovehtml

물음표 이후로 폼에 입력한 값이 들어가 있다. → 쿼리 문자열(Query String)

<input> 태그마다 name 속성 값이랑 입력한 값이 짝지어 적혀 있다.


http://127.0.0.1:3000/
?
email=html%40codeit.kr
&
password=ilovehtml
&
password_repeat=ilovehtml

현재 페이지 주소 말고, 다른 주소를 쓰고 싶다면 직접 정해 줄 수도 있다. <form>태그의 action 속성을 사용하면 된다. 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>코드잇</title>
  </head>
  <body>
    <form action="https://google.com/search">
      <input name="q">
      <button>검색</button>
    </form>
  </body>
</html>

만약에 "코드잇"이라고 적고 검색 버튼을 누르면 https://google.com/search?q=코드잇이라는 주소로 이동한다.

✨method 속성

웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 "리퀘스트"라는 걸 보낸다.

📕get

GET 리퀘스트는 데이터를 받을 때 사용

폼 버튼을 눌렀을 때 페이지를 이동하는 건, 사실 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것

📕post

POST 리퀘스트는 데이터를 보낼 때 쓴다.

❓프로필 사진 파일을 업로드하는 경우

파일은 크기가 너무 크기 때문에 GET 리퀘스트와 쿼리 문자열 만으로는 보낼 수 없다. 이럴 때는 POST 리퀘스트를 주로 사용한다. <form> 태그의 method 속성을 바꾼다. method 속성의 기본 값은 get


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>코드잇</title>
  </head>
  <body>
    <form method="post">
      <div>
        <label for="profile">프로필</label>
        <input id="profile" name="profile" type="file">
      </div>
      <button>
        확인
      </button>
    </form>
  </body>
</html>

✨Input

📘체크박스 checkbox

한 항목만 선택하는 경우


<label>
  <input name="agreement" type="checkbox">
  동의합니다
</label>

여러 항목 중에서 몇 항목을 선택하는 경우


<label for="film">좋아하는 영화 장르</label>
<label>
  <input type="checkbox" name="film" value="action">
  액션
</label>
<label>
  <input type="checkbox" name="film" value="comedy">
  코미디
</label>
<label>
  <input type="checkbox" name="film" value="romance">
  로맨스
</label>

📘날짜 date


<input name="birthdate" type="date">

📘파일 file


<input name="avatar" type="file">

파일 형식 지정하기

accept라는 속성을 써서 허용할 파일 확장자들을 정해 줄 수 있다.


<input name="avatar" type="file" accept=".png,.jpg">

파일 개수 지정하기

multiple이라는 참/거짓 속성을 사용하면 여러 개 또는 한 개만 선택하도록 정할 수 있다.


<input name="photos" type="file" multiple> <!-- 여러 개 선택 가능 -->
<input name="avatar" type="file"> <!-- 한 개만 선택 가능 -->

📘이메일 email

텍스트를 입력할 수 있는 건 똑같지만, 버튼을 눌러서 폼을 전송할 때 올바른 이메일 형식인지 자동으로 검사한다.


<input name="email" type="email">

📘숫자 number

숫자를 입력하고, 최소 최대 값이나 버튼을 눌렀을 때 증가, 감소할 양을 정할 수 있다.


<input type="number">

<!-- 100에서 1000사이 -->
<input type="number" min="100" max="1000">

<!-- 100에서 1000사이, 버튼을 눌렀을 때 100씩 증가, 감소 -->
<input type="number" min="100" max="1000" step="100">

📘비밀번호 password

값을 입력했을 때 입력한 내용이 가려진다.


<input type="password">

📘라디오 radio

동그란 선택 버튼

여러 항목 중 하나의 항목만 선택할 수 있습니다.

value 속성과 같이 사용하면, 같은 name을 가진 <input> 태그들 중에, 선택한 <input>의 value 값을 입력하도록 할 수 있습니다. 예를 들어서 아래 코드에서 "좋음"을 선택하면 feeling의 값으로 3이라는 값이 들어가게 된다.


<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

📘범위 range

범위 안에서 선택할 수 있는 인풋


<label for="signup-feeling">현재 기분</label>
<input id="signup-feeling" name="feeling" min="1" max="10" type="range">

📘텍스트 text

인풋 타입의 기본 값

일반적인 텍스트를 입력할 때 사용


<input name="nickname" type="text">

📘옵션 선택 <select>

미리 정해져 있는 여러 값들 중에서 하나를 선택할 수 있는 태그.

<select> 태그 안에 <option> 태그를 value와 함께 사용


<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
  <option value="drama">드라마</option>
  <option value="documentary">다큐멘터리</option>
  <option value="vareity">예능</option>
</select>

📘긴 글 <textarea>

긴 글을 입력할 수 있는 인풋

<input> 태그와 달리 반드시 종료 태그(</textarea>)를 써야한다.


<textarea name="content"></textarea>

📘값이 비어있을 때 보여주는 값 placeholder


<input name="username" placeholder="이메일 또는 휴대전화">

placeholder 의 디자인을 바꾸려면 CSS 선택자로 ::placeholder 를 활용하면 된다.


input::placeholder {
  color: #dddddd;
}

📘반드시 입력해야 하는 값 required

폼에서 반드시 입력해야 하는 값이 있다면 required 속성

만약 required인 인풋의 값이 비어있다면, 전송 버튼을 눌러도 전송되지 않는다..


<input name="email" type="email" required>

📘자동 완성 autocomplete

https://bakey-api.codeit.kr/api/files/resource?root=static&seqId=5735&directory=input-attrs-01.png&name=input-attrs-01.png

  • 폼이 전송될 때마다 입력한 값을 웹 브라우저에 저장해 두고, 나중에 인풋에 값을 입력할 때 추천해 준다.
  • required와 달리 on이라는 값을 지정

<input name="search" type="text" autocomplete="on">


<input name="email" type="email" autocomplete="email">
<input name="telephone" autocomplete="tel">

HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN

✨폼

📘기본적인 폼의 형태


<form>
  <label for="username">아이디</label>
  <input id="username" name="username">
  <label for="password">비밀번호</label>
  <input id="password" name="password" type="password">
  <button>로그인</button>
</form>

📘라벨

<label> 태그로 <input>을 감싸면 라벨을 클릭했을 때 인풋에 포커싱


<label>
  아이디
  <input name="...">
</label>

라벨의 for 속성과 인풋의 id 속성을 일치시키면 클릭했을 때 인풋에 포커싱


<label for="username">아이디</label>
<input id="username" name="...">

📘인풋 <input>

name 속성은 폼을 전송했을 때 입력한 값에 매칭되는 이름

아래 코드에서 인풋에 입력한 값이 username이라는 이름에 매칭된다.


  <label for="...">아이디</label>
  <input id="..." name="username">

✨ <link> 태그

  • 외부에 있는 것을 불러올 때 사용하는 태그.
  • 어떤 목적인지를 rel 속성에 적는다.
  • 위치는 href로 지정
  • 주로 <head> 태그 안에서 맨 마지막에 씀.

CSS 파일을 불러올 때는 rel="stylesheet"


<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>

사이트 아이콘을 불러올 때는 rel="icon"이라고 씀.


<head>
  ...
  <link rel="icon" href="favicon.ico">
</head>

✨ <script> 태그

  • 자바스크립트 파일을 불러올 때 사용하는 태그
  • 파일의 위치는 src
  • 주로 <body> 태그 안에서 맨 마지막에 씀.

<body>
  ..
  <script src="like.js"></script>
</body>

✨메타태그

메타 태그란 로 작성하는 HTML 태그로 메타데이터.

메타데이터는 데이터를 설명하는 데이터.

📘 <head> 태그

페이지에 대한 정보를 담고 있는 태그.

주로 이 페이지에 대한 데이터를 담고 있는데, 화면에 보여 주기보다는 웹 브라우저가 읽어서 처리하는 용도.


<head>
  <meta charset="utf-8">
  <title>코드잇 캠핑장</title>
  <link rel="stylesheet" href="style.css">
  <link rel="favicon" href="favicon.ico">
</head>

📘시맨틱 태그

<div>와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다.

시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 된다.

태그 이름용도
<header>영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main>사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer>영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article>하나의 완성된, 독립적인 내용을 나타내는 영역
<section>어떤 것의 일부분을 나타내는 영역
<figure>이미지와, 이미지 설명을 담고 있는 영역

웹 페이지에 설정하는 메타 태그 살펴보기

<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정해요.
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.

<meta name="robots" content="noindex">
name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.
profile
보리
정신차려 이 각박한 세상속에서
이전 포스트

[P1_S1] CSS 핵심개념

다음 포스트

1주차 위클리 과제

0개의 댓글