정요섭

정요섭

Front-end 개발자가 되기 위한 코린이

3.HTML 기초

13 minute read

1. 태그해부학(나의 다짐)

  1. 특정 태그들은 필수적으로 적어야할 attribute(속성)이 있다.

  2. attribute(속성)을 통해 추가적인 정보를 제공한다.

  3. 다양한 태그와 웹표준에 맞는 올바른 사용법을 익힌다.

  4. HTML은 내가 제공하고자 하는 정보가 어떤성격의 정보인지 알려주기 위한 언어이다. (정보를 알려주기 위한것이지, 화면이 위치를 정하거나 꾸미는 용도는 아니다.)

  5. 가장 최소의 단위로 요소를 짠다. 즉 가장 최소의 테그만을 이용하여 요소를 구성한다.

2. 제목과 문단 Headings & Paragraph

  • h1 : 제목에 쓰이는 테그

    • h1~h6까지 존재한다.

  • p : 문단에 쓰이는 테그

introduce_penguin

<h1>황제펭귄</h1>

<h2>생물학적 특성</h2>
<p>
  지구상에 생존하는 모든 펭귄들 중에서 가장 키가 크고 체중이 많이 나가는 종이다.
  서식지는 남극과 포클랜드 제도이다. 암컷과 수컷은 덩치와 깃털 무늬가 비슷하며,
  성체는 최고 122센티미터에 몸무게는 22~37킬로그램까지 나간다. 등은 검고 가슴
  부위는 창백한 노랑색을 띠고 있으며 귀 부위는 밝은 노랑색이다. 다른 펭귄들과
  마찬가지로 황제펭귄은 날지 못한다. 이들은 해양 생활에 적합한 유선형의 몸매와
  플리퍼(flipper)로 불리는 납작한 날개를 갖고 있다.
</p>

<h2>특성</h2>
<p>
  황제펭귄은 남극의 겨울 기간 동안 알을 낳는 유일한 종으로, 50 ~ 120킬로미터
  정도 얼음 위를 걸어 새끼들을 키우는 군집장소까지 이동한다. 이 군집장소에는
  최대 수천 마리의 개체들이 모인다. 성체 황제펭귄들은 노래를 통해 짝짓기를 하고,
  암컷은 한 개의 알을 낳는다. 수컷은 암컷이 바다로 돌아가서 먹이를 충분히 먹고
  돌아올 때까지 태양이 완전히 뜨지 않아 최대 -60℃까지 기온이 떨어지는 1개월을
  포함하여 약 4개월간 알을 발등에 올려놓고 품는다. 이 기간동안 수컷은 수분정도만
  섭취하며 버틴다. 알이 부화하면 수컷은 4개월간 위 속에 간직했던 물고기를 한 번
  새끼에게 준다. 암컷이 돌아오면 수컷이 역할 교대를 하여 바다로 먹이를 섭취하러
  나가며, 암컷이 새끼를 돌본다. 새끼가 성장하여 천적인 도둑갈매기로부터
  안전해지면 한 곳에 모아 집단으로 관리한다. 펭귄의 새끼는 다른 조류와
  마찬가지로 솜털로 덮여있는데, 성체가 되면 솜털이 빠지고 깃털이 나면서 수영에
  적합한 상태가 된다. 황제펭귄의 수명은 야생에서 보통 20년 정도이지만, 기록에
  따르면 일부 개체들은 50년까지 살 수 있다고 한다.
</p>

3. 강조 Emphasis

  • em 테그 or strong 테그 : 문장을 강조하는 테그

    • 둘다 기능은 같으므로 사용하고 싶은 테그 사용하면된다.

    • 그러나 em 테그를 쓸경우 보여질때 기울어져서 보인다. 그러나 결국 둘다 문장을 강조하는 역할을 하는 테그

강조

<p>가끔 눈물을 흘린다. 눈물을 참을 수 없는 나 자신이 싫은 순간도 있다. 아픈 마음을 달래기 위해, 소리치며 울 수 있다는 건 좋은 거야. 그렇지? 눈물은 슬픔을 위한 것만은 아니니까.</p>
</br>
<p>난 눈물이 좋다.
아니,머리가 아닌<strong>마음으로 우는 내가 좋다.</strong></p>

4. 링크 Anchor

  • a 테그 : 현 위치에서 다른 위치로 이동할때 쓰는 테그

문법적으로 반드시 지켜야할 사항

  • 반드시 명시해줘야할 attribute가 있는데 바로 href(hypertext reference(주소))
<a href="주소"></a>

  • href 주소값 표기방법

    • 1.웹 URL 
      <a href="https://www.naver.com"></a>

    • 2.페이지내 이동

      <a href="#paragraph_h4">앵커테크 누를시 h4로 이동</a>

<h4 id="paragraph_h4"></h4>
    • 3.메일쓰기 
      <a href="mailto:메일주소"></a>
    • 4.전화걸기 
      <a href="tel:전화번호"></a>

  • a테그의 attribute 중 하나인 target

    • target=”_blank” 를 하게 되면 새로운창에서 작업을 실행함

addAnchor

<h1>Be Really Excellent</h1>

<h2>구름EDU 클라우드 SW교육환경</h2>
<p>
  스크래치3, 엔트리부터 파이썬, C언어까지 설치가 전혀 필요없고 강력한 LMS와
  연동된 SW교육환경이 눈앞에 펼쳐집니다. 누구나 SW에 대한 지식과 경험을 나눌 수
  있고, 누구나 SW를 배울 수 있는 환경! 지금 경험해보세요!
</p>
<a href="https://edu.goorm.io/" target="_blank">서비스 바로가기</a>

전체Anchor

<a href="https://youtube.com" target="_blanck">
  <h2>Subscribe Kimbug</h2>
  <p>이 배너를 클릭하시면 버그의 유튜브 채널로 이동합니다.</p>
</a>

5. 이미지 Image

  • 1.img 테그 : img테그는 이미지를 불러올때 사용한다.
    • img 테그의 반드시 사용해야 할 attribute 는 src 와 alt 가 있다.
      • (1). src(source) : 이미지의 주소 또는 이미지가 있는 경로
      • (2). alt(alternative) : 이미지가 뜨지 않을때 대체할수 있는 문장, 나중에 보지못하시는분들을 위해서도 필요

문법적으로 반드시 지켜야할 사항

  • img 테그의 반드시 사용해야 할 attribute 는 src 와 alt 가 있다.

냥냥이 이미지

<img
  src="https://grm-project-template-bucket.s3.ap-northeast-2.amazonaws.com/lesson/les_WigIe_1570680987066/3255c7f10ba49dfe77972c76c67ffce95b0c5e4e9ef9d9f90a0659998a85f8d6.jpg"
  alt="냥냥이사진"
/>

6. 리스트 Lists

  • ol(ordered list) : 순서가 중요한 리스트

  • ul(unordered list) : 순서가 중요하지 않은 리스트

  • li(list item) : 순서에 들어갈 아이템, ul과 ol의 자식요소는 무조건 li만 가능

문법적으로 반드시 지켜야할 사항

  • ul과 ol의 자식요소는 무조건 li만 가능
  • <ul>
  <li><a>맞는 테그형식</a></li>
</ul>

<ul>
  <a><li>틀린 테그형식</li></a>
</ul>

list 나열

<h1>개발분야</h1>
<ul>
  <li>웹 개발자</li>
  <li>서버 개발자</li>
  <li>프론트엔드</li>
  <li>개발자자바 개발자</li>
  <li>안드로이드 개발자</li>
  <li>iOS 개발자</li>
  <li>파이썬 개발자</li>
  <li>시스템,네트워크 관리자</li>
</ul>

급상승 검색어

<h1>급상승 검색어</h1>
<ol>
  <li><a href="#">김버그</a></li>
  <li><a href="#">프론트엔드 개발</a></li>
  <li><a href="#">구름</a></li>
  <li><a href="#">주니어개발자</a></li>
  <li><a href="#">Goorm</a></li>
  <li><a href="#">Frontend</a></li>
  <li><a href="#">개발</a></li>
  <li><a href="#">구름IDE</a></li>
  <li><a href="#">버그 킴</a></li>
  <li><a href="#">튕김버그</a></li>
</ol>

7. 정의 리스트 Description List

  • dl : 정의리스트를 만들때 사용하는 테그

    • 1.용어를 정의할때 사용한다.

    • 2.key-value로 정보를 제공할때 사용한다.(A(key)는 B(value)다.)

  • dt(description term) : 설명할 용어 테그 , key 값

  • dd(description data) : 용어를 설명할 내용을 나타내는 테그 , value 값

  • dfn(description definition) : 용어를 정의하는 테그 , 이 용어를 정의한다는것을 나타내고 싶을때 사용하는 테그

문법적으로 반드시 지켜야할 사항

  • dl의 자식요소가 dt,dd,div 만 가능하다.

  • Good Practice

    • 하나의 용어에 하나의 설명
    <dl>
  <dt>정요섭</dt>
  <dd>코딩에 코짜도 모르는 초짜 개발자</dd>
</dl>
    • 하나의 용어에 여러개의 설명
    <dl>
  <dt><dfn>개발<dfn></dt>
  <dd>1. 발달 성장</dd>
  <dd>2. 신제품의 개발 , 신개발품</dd>
</dl>
    • 두개의 용어에 하나의 설명(두개의 용어가 관련있을때 두개의 용어를 사용한다.)
    <dl>
  <dt>정요섭</dt>
  <dt>Jung Yo sup</dt>

  <dd>코딩을 이제 안 중급 개발자</dd>
</dl>
    • 두개의 용어에 두개의 설명(두개의 용어가 관련있을때 두개의 용어를 사용한다.)
    <dl>
  <dt>정요섭</dt>
  <dt>Jung Yo sup</dt>

  <dd>코딩을 이제 안 중급 개발자</dd>
  <dd>제자FC 회장 ㅎㅎ..</dd>
</dl>
    • 용어와 설명을 div로 묶었을때
    <dl>
  <div>
    <dt>정요섭</dt>
    <dt>Jung Yo sup</dt>

    <dd>코딩을 이제 안 중급 개발자</dd>
  </div>
</dl>

  • Bad Practice

    • 용어에 설명이 없을 경우
    <dl>
  <dt>정요섭</dt>
  <dd>제자FC회장<dd>
  <dt>손흥민<dt>
</dl>
    • dl의 자식요소가 dt,dd,div가 아닌경우
    <dl>
  <section>
    <dt>정요섭</dt>
    <dt>Jung Yo sup</dt>

    <dd>코딩을 이제 안 중급 개발자</dd>
  </section>
</dl>

8. 인용 Quotations

  • blockquote : 전체를 인용할때 사용한다. , q테그보다 더 많이 사용한다.

  • q : 문단안에서 작은 일부를 인용할때 사용한다. , q테그 사용시 따음표로 표시됨
    • 인용이 아닌 내용에 따옴표를 나태내기 위해 q 요소를 사용해서는 안된다.
  • cite : 출처를 뜻하는 테그 or 출처의 url을 나타내는 attribute 로 사용된다.

blockqute 예시

<blockquote cite="https://bit.ly/2mvSYrT">
  <p>
    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.
  </p>
  <p>
    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.
  </p>
  <p>
    <q>"It's not happy news for the emperor penguin,"</q> said Hal Castellan of
    the U.S. Woods Hole Oceanographic Institution, a co-author of the study in
    the journal Nature Climate Change.
  </p>
  <p>
    <cite>
      “Emperor Penguin Population to Slide Due to Climate Change”, Scientific
      American, June 29, 2014, https://bit.ly/2mvSYrT
    </cite>
  </p>
</blockquote>

9. Div & Span

  • Div 와 Span 테그 : 브라우저에 아무런 의미가 없는테그지만,Css의 스타일링할때 사용함

10. Form(1)-기본구조

  • form : 사용자로부터 어떠한 정보를 받고 싶을때 사용하는 테그, 사용자로부터 input을 통해 정보를 받기위한 테그

문법적으로 반드시 지켜야할 사항

  • form 테그의 Attribute(속성)에는 반드시 action와 method attribute가 있어야 한다.

    • action : API주소값이 들어감,

      • API주소 : 사용자로부터 받은 정보를 보낼 주소가 들어감(일반적으로 서버)

    • method : GET or Post 가 값으로 들어감

      • Get : url을 사용하여 서버에서 정보를 가져오는 방식(서버에게 동일한 요청을 여러번 해도 동일한 응답이 돌아와야 함)

      • Post :서버에 값이나 상태를 수정하는 방식(서버에게 동일한 요청을 여러 번 전송해도 응답은 항상 다를 수 있음)

11. Form(2)-input

  • input 테그 : 입력창

    • input 테그에는 반드시 type attribute(속성)이 들어감, 그리고 그 속성 값에 따라 종류가 바뀜

  • input에 사용되는 여러가지 속성들

    • type : input테그에 반드시 들어가야할 속성, 그 값에 따라 input의 형태가 바뀐다.

    • placeholder : 아무것도 값이 없을때 , 기본적으로 값에 보여질 내용을 정하는 속성

    • maxlength : 내가 작성할수 있는 최대 문자의 갯수를 제한하는 속성

    • minlength : 내가 작성할수 있는 최소 문자의 갯수를 제한하는 속성

    • required : 무조건 사용자가 값을 입력하도록 할때 사용하는 속성

    • disabled : 사용자가 테그를 사용하지 못하게 하는 속성

    • value : 기본값을 지정할때 사용하는 속성

  • 다양한 input 형태

    • type : “text”

    • type : “email”
      • 이메일 형태의 input 타입, 이메일 형태의 값이 들어가야한다.
    • type : “password”
      • 비밀번호 형태의 input 타입, 비밀번호가 들어가야할 input 형태
    • type : “url
      • url 형태의 input 타입 , url 값이 들어가야함
    • type : “number”
      • 숫자의 값이 들어가야할 input 형태, 속성으로 min 과 max를 사용함
        • min : 값의 최소값을 정해줌
        • max : 값의 최대값을 정해줌
    • type : “file”
      • 이미지나 , 첨부할 파일를 하고 싶을때 사용하는 input 형태, 속성으로 accept를 사용함
        • accept : 첨부할 파일을 제한하는 attribute ex) accept=”.png,.jpg” (png파일과 jpg파일만 가능)

회원가입창

<form method="GET" action="">
  이름 : <input type="text" required /> 아이디 :<input
    type="text"
    required
    minlength="6"
    maxlength="10"
  />
  비밀번호 :
  <input type="password" minlenth="5" maxlenth="12" required /> 이메일 :
  <input type="email" required /> 전화번호 : <input type="tel" required /> 만
  나이 : <input type="number" required min="12" max="122" /> 프로필 사진:
  <input type="file" accept=".jpg,.png" />
  >
</form>

12. Form(3)-Label

  • label : form 양식에 이름을 붙여주는 테그, 꼭쓰지 않아도 되는 부가적인 테그

문법적으로 반드시 지켜야할 사항

  • 특정 input의 이름을 붙여주는것이기 때문에, for(~을 위한) 이라는 속성(attribute)가 필요하다.

그리고 그 속성의 값에는 특정 input 테그의 id 값을 넣어주면 된다. 단 주의할점은 for=”#id값” 가 아닌 for=”id값” 이다.

  • <label for="user-name">이름</label> <input type="text" id="user-name" />

회원가입창

<form method="GET" action="">
  <label for="user-name">이름 :</label
  ><input type="text" required id="user-name" />
  <label for="user-id">아이디 :</label>
  <input type="text" required minlength="6" maxlength="10" id="user-id" />
  <label for="user-password">비밀번호 :</label>
  <input
    type="password"
    minlenth="5"
    maxlenth="12"
    required
    id="user-password"
  />
  <label for="user-email">이메일 :</label>
  <input type="email" required id="user-email" />
  <label for="user-tel">전화번호 :</label>
  <input type="tel" required id="user-tel" />
  <label for="user-age">만 나이:</label>
  <input type="number" required min="12" max="122" id="user-age" />
  <label for="user-image">프로필 사진</label>
  <input type="file" accept=".jpg,.png" id="user-image" />
</form>

13. Form(4)-Radio & Checkbox

  • radio : 선택하는 테그 , 하나만 선택가능

  • checkbox : 선택하는 테그 , 여러개 중복 선택 가능

문법적으로 반드시 지켜야할 사항

  • radio 테그와 checkbox 테그는 반드시 name 속성과 value 속성을 적어주어야 한다.

    • Bad example
    <input type="radio" id="subscribed" />
<label for="subscribed">구독중</label>
<input type="radio" id="unsubscribed" />
<label for="unsubscribed">비구독중</label>

    why? radio 테그는 하나만 눌려야하는데, 두개가 눌린다..? 이유인즉슨 두 input테그가 같은 그룹이 아니라 다른 그룹이므로 하나씩 눌릴수 있다.

    • good example
    <input type="radio" id="subscribed" name="subscription" />
<label for="subscribed">구독중</label>
<input type="radio" id="unsubscribed" name="subscription" />
<label for="unsubscribed">비구독중</label>

    따라서 지금의 예시처럼 name 속성을 통해 하나의 그룹임을 명시해줘야한다.

  • form 테그와 같이 써질때, 서버에 전송을 위해서는 name 속성 뿐만 아니라 value 속성도 써야한다. value 속성을 쓰지 않을시 default 값이 전송되므로, 내가 원하는 값이 전달이 서버에 전달이 안된다.

    • perfect example(서버에 name=value 로 전송된다.)
    <input type="radio" id="subscribed" name="subscription" value="구독" />
<label for="subscribed">구독중</label>
<input type="radio" id="unsubscribed" name="subscription" value="미구독" />
<label for="unsubscribed">비구독중</label>

  • checkbox 테그 역시 name 속성과 value 속성을 넣어줘야한다.

    • perfect example
    <input type="checkbox" id="html" name="skills" value="HTML" />
<label for="html">HTML</label>
<input type="checkbox" id="css" name="skills" value="CSS" />
<label for="css">CSS</label>
<input type="checkbox" id="javascript" name="skills" value="javascript" />
<label for="javascript">Javscript</label>

14. Form(5)-Select & Option

  • select : select 테그는 선택할수 있게 되어있게 만들어주는 테그
    • multiple 속성 : select에 사용되는 속성으로 , 다중 선택할수 있게 하는 속성이다.
  • option : select 테그안에 들어가는 테그

문법적으로 반드시 지켜야할 사항

  • select 테그 안에 option 테그가 들어가야하며, name과 value가 속성이 들어가야한다.

    • 단 radio 테그와 checkbox 테그는 테그 하나하나에 name 속성을 주었지만 select 테그는 select 테그에 name 속성을 주면 된다.
    <form method="GET" action="">
  <select name="skill">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">Javascript</option>
  </select>
</form>

15. Form(6)-Textarea

  • texarea 테그 : 여러줄에 걸쳐 많은양의 내용을 받을때 사용하는 테그
    • rows : 행의 줄수를 정할때 쓰는 속성(가로줄,즉 세로)
    • cols : 열의 줄수를 정할때 쓰는 속성(세로줄,즉 가로)

16. Form(7)-Buttons

  • button 테그 : 누르면 폼이 제출되는,

문법적으로 반드시 지켜야할 사항

  • 버튼 테그는 반듯이 type 속성을 써야한다.
    • type속성에는 값으로 button과 submit이 있다 , 값으로 reset도 있지만 잘 사용 안함
      • button : button이면 일반적은 버튼에 사용하기 위해 사용된다.
      • submit : submit이면 눌렀을때 form 을 제출하기 위해 사용된다.

17. 표 Table(1)-기본구조

  • table 테그 : 데이터를 담는 표를 만들 때 사용하는 테그

    • tr 테그 : 테이블의 가로줄을 만들어준다.
    • th 테그 : 테이블 헤더와 관련된 값이 들어가는 테그
    • td 테그 : 테이블 데이터와 관련된 값이 들어가는 테그

  • table의 기본구조

    • <table>
  <tr>
    <th>ID</th>
    <th>이름</th>
    <th>개발분야</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>정요섭</td>
    <td>front-end</td>
  </tr>
</table>

문법적으로 반드시 지켜야할 사항

  • 테이블에서는 데이터가 없다고 해서 테그를 쓰지 않으면 안된다.

  • bad example

    • <table>
  <tr>
    <th>ID</th>
    <th>이름</th>
    <th>개발분야</th>
    <th>기타</th>
  </tr>

  <tr>
    <td>0001</td>
    <td>정요섭</td>
    <td>front-end</td>
  </tr>
</table>

  • good example, 데이터 값이 없더라도 갯수는 같게 해줘야한다.

    • <table>
  <tr>
    <th>ID</th>
    <th>이름</th>
    <th>개발분야</th>
    <th>기타</th>
  </tr>

  <tr>
    <td>0001</td>
    <td>정요섭</td>
    <td>front-end</td>
    <td></td>
  </tr>
</table>

  • perfect example, 테이블에서도 각자의 역할이 다르므로 브라우저에게 좀더 명확화한 테이블 구조를 보여주기 위해 thead 테그와 tbody 테그, tfoot(합계,결과값의 구조를 묶을때) 테그를 쓴다.

    • <table>
  <thead>
    <tr>
      <th>ID</th>
      <th>이름</th>
      <th>개발분야</th>
      <th>기타</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>정요섭</td>
      <td>front-end</td>
      <td></td>
    </tr>
  </tbody>
</table>

18. 표 Table(2)-심화

  • rowspan 속성 : 테이블의 가로줄 즉 세로 공간을 value 값 만큼 차지한다

  • colspan 속성 : 테이블의 세로줄 즉 가로 공간을 value 값 만큼 차지한다.

  • scope 속성 : table header 즉 th 테그 한테만 사용하는 속성으로, 가로줄의 해더인지 세로줄의 헤더인지 명시하기 위해서 사용한다.

복잡한 테이블 표 

<table>
  <tr>
    <th></th>
    <th scope="col">월</th>
    <th scope="col">화</th>
    <th scope="col">수</th>
    <th scope="col">목</th>
  </tr>
  <tr>
    <th scope="row">1교시</th>
    <th></th>
    <td rowspan="2">왕초보 HTML &amp; CSS</td>
    <td>모각코</td>
    <td rowspan="2">왕초보 HTML &amp; CSS</td>
    <td>모각코</td>
  </tr>
  <tr>
    <th scope="row">2교시</th>
    <th></th>
    <td rowspan="2">JavaScript스킬업</td>
    <td rowspan="2">JavaScript스킬업</td>
  </tr>

  <tr>
    <th scope="row">3교시</th>
    <th></th>
    <td>Javascript시작반</td>
    <td>Javascript시작반</td>
  </tr>

  <tr>
    <th colspan="6" scope="row">점심시간</th>
    <td></td>
  </tr>

  <tr>
    <th scope="row">4교시</th>
    <th></th>
    <td>SASS기초반</td>
    <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
    <td rowspan="2">Open Seminar</td>
    <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
  </tr>

  <tr>
    <th scope="row">5교시</th>
    <th></th>
    <td>모각코</td>
  </tr>
</table>

19. 미디어 파일 Media

  • audio 테그 : 음성을 나오게 하는 테그이다.

  • 사용할수 있는 속성

    • src : 경로위치를 지정해주는 속성(필수)

    • autoplay : 자동으로 음성이 나오게 하는 속성

    • loop autoplay : 자동으로 음성이 나오게 하며, 반복해서 나옴

    • controls : 내가 오디오를 조정하고 싶을때 사용하는 속성

  • audio 테그의 두가지 사용방법
    • 첫번째 : 일반적인 형태 
      • <audio src="경로" loop autoplay controls></audio>
    • 두번째 : 브라우저가 지원하는 audio의 type이 다른데 그 타입에 맞추기 위해 사용되는 형태 
      • <audio controls>
  <source src="foo.opus" type="audio/wav" />
  <!--wav 타입을 지원  -->
  <source src="foo.ogg" type="audio/ogg" />
  <!--ogg 타입을 지원  -->
  <source src="foo.mp3" type="audio/mpeg" />
  <!--mpeg 타입을 지원  -->
</audio>
<!-- 만약 크롬에서 wav 타입을 지원안해주고 ogg 타입을 지원해준다고 하면 
ogg파일이 실행됨 -->

  • video 테그 : 비디오를 나타나게 하는 테그로서 , audio 테그와 사용방법과 속성들이 같다.

  • video 테그의 두가지 사용방법
    • 첫번째 : 일반적인 형태 
      • <video src="경로" loop autoplay controls></video>
    • 두번째 : 브라우저가 지원하는 video의 type이 다른데 그 타입에 맞추기 위해 사용되는 형태 
      • <video controls>
  <source src="foo.opus" type="video/wav" />
  <!--wav 타입을 지원  -->
  <source src="foo.ogg" type="video/ogg" />
  <!--ogg 타입을 지원  -->
  <source src="foo.mp3" type="video/mpeg" />
  <!--mpeg 타입을 지원  -->
</video>
<!-- 만약 크롬에서 wav 타입을 지원안해주고 ogg 타입을 지원해준다고 하면 
ogg파일이 실행됨 -->
  • iframe 테그 : 또다른 HTML 문서나 콘텐츠를 넣을때 사용하는 테그, iframe을 직접 작성할 일은 없고 유투브나 이런것들을에서 가져와서 사용하면 된다.

20. 기타 Etc

  • abbr(abbreviation, 약어) 테그 : 약어라는것을 알려주는 테그

문법적으로 반드시 지켜야할 사항

  • abbr 테그는 반드시 title 속성을 사용해야한다.

    • title의 값에는 약어의 풀네임을 적는다

      <p>
  안녕하세요 혹시
  <abbr title="Attention Deficit Hyperactivity Disorder">ADHD</abbr> 에
  대해서 알고 계신가요?
</p>
  • address 테그 : 연락처의 정보를 마크업하는 테그
    • 물리적인 주소에 사용(경도,위도)
    • email
    • url
    • sns
    • 전화번호
<address>
  <h1>
    정요섭
  <h1>
  <a href="mailto:15queue@hanmail.net"></a>
  <a href="tel:111-11-111"></a>
</address>

  • pre 테그 : 내가 작성한 텍스트 대로 나오게 한다.

    • 하위요소로 code 테그를 사용하기도하지만, 사용안하기도 함

  • code 테그 : 안에다가 코드를 작성할때 사용하는 테그

21. Doctype & Document Structure

  • DOCTYPE(Document TYPE) : 브라우저에게 이 문서에 대해 설명하기 위해서 사용되는 테그

    • <!DOCTYPE html>
<!-- 브라우저에게 이 문서는 가장최신 버전의 html(지금은 html5)으로 만들어진 문서야 -->

  • Document Structure

    • head 테그 : 뇌 , 웹 문서에 관한 보이지 않은 정보를 담아두는 테그
    • body 테그 : 웹 문서에 보여질 모든 테그들을 넣는 공간의 테그
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

22. Title, Link, Style & Script

  • title 테그 : HTML 문서의 대 제목을 나타내는 테그 , 웹페이지의 제목

title을 막쓴다고?? 혼난다..

  • title은 어떻게 쓰느냐에 따라 검색 최적화에 매우 중요하다

  • title을 잘 쓰는 방법

    • 키워드를 단순히 나열하는것은 비추
    • 페이지 마다 그에 맞게 변경(ex 설명하는 페이지이다. 그럼 그에 맞게 title을 변경, Q&A 페이지이다 . 그럼 그에 맞게 title을 변경)
    • 무엇에 관한 내용인지 잘 적은 내용을 적어줘야한다.

  • link 테그 : CSS 스타일시트를 첨부하는 테그 또는 다른곳에서의 CSS의 api를 받을때 사용하는 테그

  • style 테그 : HTML 문서내에서 CSS코드를 작성할 떄 사용하는 테그, html 안에 style테그를 사용하여 CSS를 작성할수도 있지만 굳이 style 테그를 html 안에 쓸 필요는 없다.

  • script 테그 : javascript 파일을 사용할때 사용하는 테그, html 안에 script테그를 사용하여 javascript를 작성할수도 있지만 굳이 style 테그를 html 안에 쓸 필요는 없다.

script 테그를 head 테그 안에 쓴다고?? 혼난다.

  • script 테그를 head 테그 안에 쓸경우
    • script 테그는 다른 테그들과 다르게 다른서버에 있는 javascript 파일을 가져올때 다 가져올때까지 멈춰버린다. (link 나 다른 테그들은 가져올때가지 기다리지 않고 가져오는 중간중간 다른것들을 실행시킴)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./abc.js"></script>
    <!-- 이 부분에서 javascript 파일을 다 가져올때까지 다른 작업이 실행이 안됨 
    따라서 javascript 파일을 가져올때까지 <h1>안녕</h1>이라는게 뜨지 않음 -->
  </head>
  <body>
    <h1>안녕</h1>
  </body>
</html>
  • script 테그를 body 테그안에 맨 마지막에 쓸경우(맨 마지막에 써야함!!)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <h1>안녕</h1>

    <script src="./abc.js"></script>
    <!-- 안녕이라는 html이 뜨고 javascript를 가져옴 -->
  </body>
</html>

23. Meta

  • meta 테그 : title,link,style,script 테그들로 표현할수 없는 데이터를 표현할때 사용함 반응형 웹페이지를 만들때 필수

문법적으로 반드시 지켜야할 사항

  • meta 테그는 반드시 필요한 속성으로는 name 과 content 속성이 있다.

    • name 속성 : 메타테그의 셩격
      • name=”viewport” 각 디바이스의 브라우저 전체 사이즈를 나타냄,
      • name=”author” 작성자를 명시함
      • name =”keywords” 사용자가 키워드로 검색을 했을때 우리 웹페이지가 검색되게
      • name =”description” 이 페이지가 무엇에 관한 페이지인지 설명
    • content 속성 : 메타데이터 값
      • content=”width=device-width, initial-scale=1.0;”
      • content=”정요섭”
      • content=”웹페이지의 키워드”
      • content =”페이지 설명 내용”

Tags:

Categories:

Updated:

Leave a comment

You may also enjoy