[HTML] 태그

• <>여는 태그, </>닫는 태그로 이루어져있다(꺽쇠)
• 여닫는 태그 안에 써있는 글자에 따라 정보의 성격이 달라진다. (p는 문장, h1은 제목....)
• 태그를 구성하는 요소 중 '속성(attribute)'이란 것이 있는데 이것은 태그 하나만으로 표현하지 못하는 정보를 부가적으로 줄 때 설정한다.
  • 만약 p태그로 러시아어로 된 문단을 감싸고 있을때, 웹 브라우저에게 이 문단이 러시아어라는 정보를 알려주고 싶다면 p 여는 태그에 lang이라는 애트리뷰트를 주고<p lang="ru">라고 줄 수 있다.
• 태그마다 자동으로 적용되는 스타일(글머리 부호, 글꼴 기울임, 굵기 변화, 밑줄... 등등)이 있는데, 이것은 CSS로 처리하면 되는 문제라서 중요한게 아니다. HTML에서 중요한것은 Semantic(의미론적인) 마크업이다. 웹브라우저에게 이것은 제목이고, 이것은 중요한 내용이고 하는 것의 지표를 만들어주는 것이 HTML의 핵심이다. html에서는 css를 신경쓰지 않고 의미에 중점을 두고 마크업 하는것이 중요하다.

<h1>김버그</h1>
<p>반갑습니다</p>
<a href="#">링크</a>

제목 Heading

h1, h2, h3, h4, h5, h6

가장 중요한 순서대로 h1부터 사용

<h1>제목</h1>

display: block; 이 디폴트이다

문단 Paragraph

문단을 감싸는 태그

<p>문단</p>

display: block; 이 디폴트이다

강조 Emphasis

강조하고싶은 문장을 감싸는 태그

em, strong 두가지를 사용 가능하다 → 둘의 차이는 없다. 그냥 쓰고싶은 것 골라 쓰면 된다.

<em>강조하고싶은 문장</em>

<strong>강조하고싶은 문장</strong>

링크 Anchor (href, target속성)

페이지 이동이 가능하게 해주는 태그

반드시 href 속성을 넣어야한다. (href는 hypertext reference의 약자, 문서 주소값)

target="_blank" 속성을 쓰면 현재창의 페이지가 이동하는게 아니라 새탭으로 띄워서 페이지가 이동한다.

href값으로 할 수 있는 일

1. 웹URL(절대경로, 상대경로)을 넣어서 페이지를 URL로 이동하도록 한다.

<a href="이동할 url">링크</a>

1. 페이지 내 이동 ( id="hello"인 섹션으로 이동시키고 싶으면 href="#hello"라고 쓰면 a태그 클릭시 id가 hello인 섹션으로 이동한다
2. 메일쓰기 (href="mailto:메일주소")하면 바로 메일 쓰는 창이 뜬다.

<a href="mailto:iu@gmail.com">
  아이유에게 메일 보내기
</a>

1. 전화걸기 (href="tel:전화번호")하면

<a href="tel:01012345678">
  김00에게 전화 걸기
</a>

이미지 Image(scr, alt속성)

필수 속성: src(source), alt(alternative text)

src는 이미지 파일의 주소값(상대경로, 절대경로), alt는 대체 텍스트. 이미지가 뜨지 않을경우 보여줄 텍스트

<img src="#" alt="" />

리스트 LIsts → ul, ol

순서가 중요한 리스트 ⇒ ol (Ordered List)

순서가 중요하지 않은 리스트 ⇒ ul (Unordered List)

** ul과 ol의 자식요소는 무조건 li만 가능하다 ⇒ 직계 자식으로 li만 사용가능

ol의 아래에 li로 목록들을 만들었는데 클릭하면 이동하도록 a태그를 쓰고싶은데 li를 감싸도록 li바깥에 a태그를 쓸지, 아니면 li 안에 a태그를 쓸지? ⇒ 정답은 li태그 안에 a를 쓰는것. ul과 ol의 자식은 li만 올 수 있다

<h1>급상승 검색어</h1>
<ol>
  <li>
  <a href="#">아이유</a> 
  </li>

<a href="#">.  <- 틀린 방법, ol직계자식은 li만 올수있다. a태그가 오면 안된다. 
  <li>
    프론트엔드 개발
  </li>
</a>
</ol>

정의 리스트 Description List(dl, dt, dd, dfn)

1. 용어를 정의할 때
2. key-value로 정보를 제공할 때

dl(Description List, 정의리스트를 감싸는), dt(Description Term, 키값), dd(Description Data, 벨류값), dfn(Definition)

dl에는 반드시 dt, dd가 들어가야한다.

사전적으로 조금 더 구체적으로 정의 내리고 싶다면 dfn을 사용

🔥문법주의: dl의 직계 자식으로 dt,dd 그리고 div만 사용가능.

🔥문법주의: dt를 썼으면 dd도 써야한다.

🔥문법주의: dt를 두개쓰거나 dd를 두개 사용 가능하다

<dl>
  <dt>학습 學習 [학씁]</dt>
  <dd>1. noun 배워서 익힘.</dd>
  <dd>2. noun 심리 경험의 결과로 나타나는, 비교적 지속적인 행동의 변화나 그 잠재력의 변화. 또는 지식을 습득하는 과정</dd>
</dl>

<dl>
  <div>
    <dt>Open</dt>
    <dd> 월요일, 화요일, 수요일, 목요일, 금요일</dd>
  </div>
  <div>
    <dt>Close</dt>
    <dd>토요일, 일요일, 공휴일</dd>
  </div>
</dl>

<dl>
  <div>
    <dt>Username</dt>
    <dd>아이유</dd>
  </div>
  <div>
    <dt>Email</dt>
    <dd>iu@gmail.com</dd>
  </div>
  <div>
    <dt>Passport #</dt>
    <dd>M********</dd>
  </div>
  <div>
    <dt>Nationality</dt>
    <dd>Republic of Korea</dd>
  </div>
</dl>

인용 Quotation (blockquote, q)

다른 사람 말을 인용할 때 사용하는 blockquote, q

blockquote ⇒ 문단, 내용 전체가 인용문일 때 사용

q ⇒ 문장 내에 잠깐 인용문이 나올 때 사용

우리가 겪을 수 있는 가장 아름다운 체험은 신비다.
신비는 모든 참 예술과 과학의 근원이다. 알버트 아인슈타인

The study is the first to project the long-term outlook for Antarctica's largest penguins, which can grow 1.2 meters (four ft) tall, seeking to fill a gap in understanding climate change and wildlife in one of the remotest parts of the planet.

Overall, numbers were set to fall by at least 19 percent from current levels by 2100 as sea ice melts. And two-thirds of colonies of the birds, which have distinctive golden head patches, would decline by more than half, it said.

It's not happy news for the emperor penguin

said Hal Castellan of the U.S. Woods Hole Oceanographic Institution, a co-author of the study in the journal Nature Climate Change.

“Emperor Penguin Population to Slide Due to Climate Change”, Scientific American, June 29, 2014,

DIV, span태그

아무런 의미가 없음.

CSS 스타일링 할때 요긴하게 사용

div는 요소들을 묶어서 나중에 css에 적용

span은 문장안에 텍스트를 span으로 묶을 수 있다.

**아무런 의미 없는 태그이므로 div태그 안에 바로 글자 적는것보다, p태그나 h1태그 등 의미에 맞는 태그로 감싸서 넣는것이 좋다.

Form태그(input, label, radio&checkbox, select&option, textarea, buttons)

사용자로부터 정보를 받기 위한 태그

<form action="API주소" method="GET혹은 POST"> </form>

🔥문법주의:

Input : 입력창, 인풋 필드 <input type="text" />

🔥문법주의: 속성값으로 type="" 반드시 적어줘야한다. (text, email, password, tel, number, file, radio.....)

<form action="" method="GET">
    <input type="email" placeholder="이메일을 입력하세요" />
    <input type="password" placeholder="비밀번호를 입력하세요" />
    <input type="url" placeholder="포트폴리오 url을 입력하시오" />
    <input type="number" placeholder="나이를 입력하세요(12~122세)" min="12" max="122" />
    <input type="file" accept=".png, .jpg">
    <button>submit</button>
  </form>

label태그 → <label for="누구">라벨</label>

input태그에 이름을 붙이는 태그

🔥문법주의: 특정 input의 이름이므로 그 특정 input의 id값을 for로 나타내준다.

<h1>회원가입</h1>
  <form action="" method="POST">
    <label for="user-name">이름</label>
    <input type="text" id="user-name" required placeholder="이름">

    <label for="user-id">아이디</label>
    <input type="text" id="user-id" required placeholder="아이디" minlength="5" maxlength="10">

    <label for="user-password">비밀번호</label>
    <input type="password" id="user-password" required placeholder="비밀번호" minlength="6" maxlength="12">

    <label for="user-email">이메일</label>
    <input type="email" id="user-email" required placeholder="이메일">

    <label for="usesr-tel">전화번호</label>
    <input type="tel" id="usesr-tel" placeholder="전화번호 (***-****-****)" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">

    <label for="user-age">나이</label>
    <input type="number" id="user-age" placeholder="만 나이" min="12" max="122">

    <label for="user-profile-picture">프로필 사진</label>
    <input type="file" id="user-profile-picture" accept="image/*, audio/*, video/*">

    <button type="submit">
      가입하기
    </button>

  </form>

Radio&Checkbox

Radio - 여러개중 하나만 선택

Checkbox - 다중선택 가능

<form action="" method="GET">
    <input type="radio" id=subscribed name="subscription" value="sub">
    <label for="subscribed">구독중</label>
    <input type="radio" id=unsubscribed name="subscription" value="unsub">
    <label for="unsubscribed">미구독</label>
    <button type="submit">
      submit
    </button>
  </form>

Select&Option

Select - 여러개 선택하는 형태를 사용하겠다는 시작 태그, 반드시 name속성을 줘야한다.

Option - 선택할 옵션을 정의하는 태그, value속성을 줘야한다.

<form action="" method="GET">
    <label for="skill">스킬</label>
    <select name="skill" id="skill">
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="js">Javascript</option>
    </select>
    <button type="submit">
      Submit
    </button>
  </form>

Textarea

여러줄에 걸쳐서 많은 양의 텍스트를 받을 때 사용

<label for="field">자기소개</label>
    <textarea id="field" placeholder="자기소개를 입력하세요">
    </textarea>

Buttons

버튼,

🔥문법주의: type속성 반드시 넣어야해(button, submit, reset)

<button type="button"> → 만만하게 사용

<button type="submit"> → 폼 제출시에 사용

<button type="reset"> → 거의 안쓴다. input에 적은 내용을 다 지워줌

<form action="">
    <input type="text">
    <button type="submit">제출하기</button>
    <button type="reset">다시쓰기</button>
  </form>

테이블, table

<table>
    <thead>
      <tr>
        <th>ID</th>
        <th>이름</th>
        <th>개발 분야</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>00001</td>
        <td>조땡땡</td>
        <td>프론트엔드</td>
      </tr>
      <tr>
        <td>00002</td>
        <td>정땡땡</td>
        <td>풀스택</td>
      </tr>
      <tr>
        <td>00003</td>
        <td>김땡땡</td>
        <td>백엔드</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>
  </table>

가장 바깥에는 table태그를 사용

기본은 tr로 한 줄을 생성한 뒤 그 안에 들어갈 데이터를 th(볼드 처리됨)제목, td 내용으로 구성하는데 제목(?)이 되는 부분은 thead로, 내용들이 되는 부분은 tbody로 감싸주면 좀 더 시맨틱하게 만들수 있다. tfoot은 마지막줄에 합계와 같은 것들을 넣는 부분. thead, tbody, tfoot은 꼭 들어가야하는것이 아님.

속성

rowspan="숫자" → 행을 아래로 침범해서 n칸 차지하겠다.

colspan="숫자" → 열을 옆으로 침범해서 n칸 차지하겠다.

scope="row|col" → th에만 쓸 수 있는 속성인데, 이게 가로에 해당하는 헤더인지, 세로에 해당하는 헤더인지 브라우저에게 좀 더 디테일하게 전달하여 구별하게 해주는 속성. 월화수목금→ scope="col", 1~5교시 →scope="row"

<table>
    <thead>
      <tr>
        <th></th>
        <th scope="col">월</th>
        <th scope="col">화</th>
        <th scope="col">수</th>
        <th scope="col">목</th>
        <th scope="col">금</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1교시</th>
        <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
        <td>모각코</td>
        <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
        <td>모각코</td>
        <td rowspan="2" class="html-css-basic">왕초보 HTML &amp; CSS</td>
      </tr>
      <tr>
        <th scope="row">2교시</th>
        <td rowspan="2" class="js-skillup">Javascript 스킬업</td>
        <td rowspan="2" class="js-skillup">Javascript 스킬업</td>
      </tr>
      <tr>
        <th scope="row">3교시</th>
        <td class="js-basic">Javascript 시작반</td>
        <td class="js-basic">Javascript 시작반</td>
        <td class="js-basic">Javascript 시작반</td>
      </tr>
      <tr>
        <th colspan="6" scope="row">점심시간</th>
      </tr>
      <tr>
        <th scope="row">4교시</th>
        <td class="sass-basic">SASS 기초반</td>
        <td class="portfolio" rowspan="2">HTML &amp; CSS 포트폴리오반</td>
        <td rowspan="2">Open Seminar</td>
        <td class="portfolio" rowspan="2">HTML &amp; CSS 포트폴리오반</td>
        <td class="sass-basic">SASS 기초반</td>
      </tr>
      <tr>
        <th scope="row">5교시</th>
        <td class="coding">모각코</td>
        <td class="coding">모각코</td>
      </tr>
    </tbody>
  </table>

미디어 파일 Media

html문서 안에 미디어 파일을 넣는 법

audio, video태그 이용

<audio src=""></audio>

반드시 적어야할 속성: src로 파일이 있응 경로 적어주기

controls속성을 줘야 재생 버튼 생성된다. (안적으면 아무것도 안나옴)

autoplay속성을 주면 contols없이 새로고침 해도 자동 재생된다.

loop속성을 주면 계속 반복재생된다.

audio나 video태그에 바로 src를 줘도 되지만 미디어 파일의 경우 브라우저마다 재생이 되기도, 안되기도 하기때문에 audio태그 안에 source태그를 두고, 그 source태그 안에 src속성을 줘서 파일경로를 주는식으로 하면 재생 가능한 소스로 재생된다.

source태그를 따로 빼서 사용하면 type을 적어주는것이 좋은데, type은 구글 검색해서 모질라 혹은 MDN에서 찾아보고 그에 맞게 사용하면 된다.

caniuser.com https://caniuse.com 에서 mp3나 wav같은것 검색해보면 사용가능한 브라워저, 불가능한 브라우저 나온다.

<audio controls>
    <source src="../ASSETS/audios/kimbug.wav" type="audio/wav" />
    <source src="../ASSETS/audios/kimbug.mp3" type="audio/mp3" />
    <source src="../ASSETS/audios/kimbug.ogg" type="audio/ogg" />
    <p>브라우저를 업데이트 하거나 다른 브라우저를 사용하세요</p>
  </audio>

  <video autoplay>
    <source src="../ASSETS/videos/kimbug.mov" type="video/mp4">
    <source src="../ASSETS/videos/kimbug.mp4" type="video/mp4">
    <p>브라우저를 업데이트 하거나 다른 브라우저를 사용하세요</p>
  </video>

iframe

html문서 안에 또 다른 html문서를 임베드 하고싶을때 사용하는 코드

<iframe src="https://edu.goorm.io" frameborder="0"></iframe>

위와 같은 코드를 작성하면 src주소의 웹페이지가 작게 삽입되어 나타난다.

하지만 iframe을 직접 하는 경우는 많지 않고, 유투브라던가 트위터라던가 임베드 코드를 가져와서 복붙하는 형태로 주로 사용한다.

유투브 영상 주소 share에서 임베드를 선택하여 iframe코드를 복사하여 붙여넣으면 영상이 임베드 된다.

기타 Etc

abbr(abbreviation): 약자,약어

약어에 대해 알 수 있도록 해주는 태그(약어에 마우스 올리면 title에 적은 내용이 나타남)

<p>
    <abbr title="World Health Organization">WHO</abbr>, 미국 자금 지원 중단 결정에 "유감"
</p>

address

연락처에 관한 정보를 마크업 할때 사용

누구정보인지 적고, 그 사람의 정보(물리적주소, URL, email, 전화번호, SNS링크)를 넣는다.

<address>
    <h1>티스토리 블로그</h1>
    <a href="https://everyday-is-christmas.tistory.com/">https://everyday-is-christmas.tistory.com/</a>
  </address>

code, pre(preformatted text)

html 문서상에서 코드 작성하고 싶을때 사용하는 코드

p태그 사용하면 엔터 쳐도 한줄로 나오는 등 맘대로 안되는데 pre태그는 작성 한 대로 출력된다.

<pre>
  ㅇ ㅏ ㄴ ㅕ ㅎ ㅏ ㅅ ㅔ ㅇ 
   ㄴ    ㅇ            ㅛ
</pre>

code는 pre안에 주로 쓰는데 들여쓰기 같은게 중요하게 여러줄 쓰는 경우가 있으면 이렇게 pre태그 안에 code를 작성하고, 한줄인 경우 그냥 code만 쓰기도 한다.

<pre>
    <code>
      console.log("study frontend");
       var frontend = 'frontend';
    </code>
  </pre>

  <code>console.log('hello');</code>

줄바꿈 태그 Break <br/>

줄을 바꾸고싶을때 사용하는 태그

<br/>

hr

 

Doctype & Document structure

HTML문서 가장 처음에 해야할것이 Doctype(document type)선언

document == HTML

Document Type Declaration = DTD선언 = 문서 형식 선언

🔥모든 HTML문서는 무조건 <!DOCTYPE html>로 시작된다.

<!DOCTYPE html>
//브라우저에게 이 문서가 HTML5버전(가장 최신버전)으로 작성된 문서임을 알리고, 표준모드로 랜더링 하도록 선언하는 것. 
<html>
<head></head>
<body>
  

  
</body>
</html>

Title

head태그 안에 필수적으로 들어가야하는 태그

브라우저 탭 부분에 들어가는 제목

검색 최적화에 매우 중요(단순 키워드 나열 하지말고, 페이지마다 그에 맞게 변경)

<title>문서의 대제목</title>

Link

CSS 스타일시트를 HTML문서에 첨부하는 태그

웹폰트 사용할때

Style&Script

Style태그는 CSS파일을 따로 작성하여 link로 첨부하지않고 HTML문서 내에 바로 쓸때 사용한다. (비추, 그냥 CSS를 따로 작성하고 첨부하는것이 좋다, 왜냐면 CSS파일에 따로 설정해둔 것들을 HTML에 직접 작성한 Style이 덮어버려서 우선 적용되어버리기 때문에, HTML은 시맨틱하게 내용 위주로, CSS는 스타일 적용하는것으로 따로 나누는것이 좋다.)

Script

미리 작성해둔 자바스크립트 파일을 가져올때는 아래와 같이 사용하고

<script src="경로"></script>

스타일 태그처럼 HTML문서 내에 Javascript코드를 작성 할 때는 아래와같이 사용한다.

<script> 자바스크립트 코드 작성 </script>

script코드는 body 닫는 태그 직전에 사용한다.

Meta태그

노트북이나, 태블릿, 모바일폰 등 다양한 형태의 스크린으로 사용자들이 화면을 보게되므로 meta 태그에서 viewport(화면 사이즈)에 따라 어떻게 보여줄건지 선언하는 태그가 거의 필수적으로 들어가게된다.

name속성 : (name="메타데이터 종류") → name="viewport"

content속성 : (content="메타데이터 값")

width=device-width는 가로길이는 사용자의 디바이스 화면 가로길이로 하겠다는 뜻

initial-scale=1.0는 사용자가 처음 볼때 배율을 1(기본)로 하겠다는 뜻

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="author" content="조여진">
//작성자를 명시하는 것

<meta name="keywords" content="김버그,구름강의,구름Edu">
//누군가 이런 키워드로 검색하면 우리 페이지 좀 잘 보여줘

<meta name="description" content="이 페이지는 ~~~하는 페이지입니다.하는 설명">
//페이지에 관한 설명

메타 태그는 종류가 아주 많다.

표준 메타데이터 이름 - HTML: Hypertext Markup Language | MDN

표준 메타데이터 이름 - HTML: Hypertext Markup Language | MDN

 

MDN에서 확인가능