2 분 소요

HTML

< meta > 태그

  • head태그 안에 위치하며 웹서버와 웹브라우저간에 교환되는 정보를 정의한다.

  • 브라우저나 검색엔진 등에 의해 사용된다.

  • name=”정보명” -> 지정하지 않으면 http-equiv와 같다.

    content=”정보값” -> meta 정보의 내용

    http-equiv=”항목명” -> 브라우저가 서버에 명령을 내리는 속성

    (문서가 응답 헤더와 함께 웹 서버에서 웹 브루아저로 전송되었을 때에만 의미를 갖는다.)

    브라우저가 사용할 문자셋 -> 한,중,일어가 포함되면 반드시 추가한다.
<meta charset="utf-8">
  
디바이스의 가로크기가 웹페이지의 가로크기와 같다.
<meta name="viewport" content="width=device-width">
  
검색엔진이 사용할 키워드
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  
웹페이지의 설명
<meta name="description" content="Web tutorials on HTML and CSS">
  
웹페이지의 저자
<meta name="author" content="John Doe">
  
30초마다 refresh
<meta http-equiv="refresh" content="30">

span태그와 div태그의 차이점

둘 다 특별한 기능을 갖고있지 않고, CSS와 함께 쓰인다.

div태그와의 차이점은 display속성이 block이 아닌, inline이라는 점이다.

이 둘의 차이를 쉽게 설명하면, div는 줄 바꿈이 되지만, span은 줄 바꿈이 되지 않는다는 점이다.

<body>
    <div>
        가나다라
    </div>
    <div>
        마바사아
    </div>
    <span>
        가나다라
    </span>
    <span>
        마바사아
    </span>
</body>

image-20220109133733359

제목, 텍스트, 본문 태그

  • <h1> ~ <h6> : 제목

  • <span> : inline-element로 주로 텍스트 입력

  • <div> : division (레이아웃 분리, 그룹화)

  • <strong> : 의미상 중요하며, 텍스트 굵게

    <b>: 단순히 텍스트 굵게

  • <em> : 의미상 강조하며, 기울여 표현

    <i>:단순히 기울여 표시할때

  • <small> : 작은 글씨

  • <mark> : 글씨 하이라이트

  • <del> : 새롭게 업데이트 된 사항에서 그 텍스트가 삭제 되었음을 나타냄, 취소선

    <s>:단순히 텍스트에 취소선

  • <ins> : insert의 약자로 datetime 속성값을 이용하여 내용의 추가와 삭제를 의미적으로 지정 가능

    <u>:단순히 텍스트에 밑줄

  • <p> : 단락

  • <br> : 강제 개행 (line break) → empty element로 종료 태그가 없다.

  • <pre> : 형식화된 텍스트 (작성한 그대로 보여주기)

  • <hr> : 수평줄 삽입

  • <q> : 짧은 이용문 (따옴표로 감싸기)

  • <blockquote> : 긴 이용문 (양쪽 여백을 자동으로 적용)

  • &nbsp : 공백(space) 추가하기

  • <abbr>: 줄임말 태그

    <abbr title="Xxx Yyy Zzz">XYZ</abbr>XYZ

    title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나온다

  • <cite>: 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용

  • <code> : 컴퓨터 코드의 일부분을 나타낼 때 사용한다.

  • <sub> : 아래첨자

  • <sup> : 위 첨자

절대 경로 / 상대 경로

  • 절대 경로 : 루트 디렉터리를 기준으로 파일의 위치

    /Users/leeungmo/Desktop/myImage.jpg

  • 상대경로 : 현재 작업 디렉터리를 기준으로 상대적인 위치

    ../../dist/index.js

< audio > 태그

  • <source> 태그를 사용해 브라우저별 파일 형식 차이 문제를 해결 할 수 있다.
<audio src="assets/audio/Kalimba.mp3" controls></audio>

<audio controls>
   <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
   <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
 </audio>

type 속성 생략 가능하다.
  • src : 파일 경로
  • preload : 재생 전 파일을 모두 불러올 것인지
  • autoplay : 자동 재생 여부
  • loop : 반복 여부
  • controls : 재생도구 표시 여부

< video > 태그

  • <source> 태그를 사용해 브라우저별 파일 형식 차이 문제를 해결 할 수 있다.
<video width="640" height="360" controls>
  <source src="assets/video/wildlife.mp4" type="video/mp4">
  <source src="assets/video/wildlife.webm" type="video/webm">
</video>
  • src : 파일 경로
  • poster : 준비 중 표시될 이미지 파일 경로
  • preload : 재생 전 파일을 모두 불러올 것인지
  • autoplay : 자동 재생 여부
  • loop : 반복 여부
  • controls : 재생도구 표시 여부
  • width 와 height : 너비와 높이를 지정

표 입력

기본형

<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>
<table> 테이블 만들기
<caption> 표 제목
<tr> 행 삽입
<td> 셀 삽입
<th> 셀 삽입(진하게 표시)
<thead> 표 중 제목, 여러 페이지에 걸쳐 고정 가능
<tbody> 표 중 본문
<tfoot> 표 중 요약, 여러 페이지에 걸쳐 고정 가능

####

<td>, <th>의 행, 열 합치기 속성

rowspan=”2” 2개의 행 합치기
colspan=”2” 2개의 열 합치기

합쳐질 셀들은 태그를 적지 않는다.

열의 스타일 속성 지정

  • 열 1개만 지정할 땐, <col>
  • 여러 열을 지정할 땐, <colgroup>

기본형

<colgroup>
  <col>
</colgroup>
1 <col style="~"> 첫번째 열 스타일 지정
2 <col> 두번째 열은 스타일 지정 안함
3 <col style="~"> 세번째 열 스타일 지정
4 <col style="~"> 네번째 열 스타일 지정
5 <col **span**="2"> 동일한 스타일로 다섯, 여섯번째 스타일 지정

댓글남기기

참고