[HTML5&CSS] 멀티미디어 넣기

오디오

웹페이지 내에 오디오를 넣고 싶을 때는 audio element로 넣을 수 있다. src attribute 혹은 source element로 하나의 오디오 소스를 가지거나 audio element의 children으로 source element 리스트를 넣어서 여러개의 오디오 소스를 가질 수 있다.

<audio controls src="media/dasomoli.mp3">여러분의 브라우저가 audio 태그를 지원하지 않는 것 같네요..</audio>

위처럼 <audio>와 </audio> 사이에 브라우저가 지원하지 않을 때 나타낼 메시지를 넣을 수 있다. controls attribute는 여러분이 오디오를 재생할 수 있도록 할 수 있다. 다음과 같은 contol이 나타난다.

다음과 같은 속성들이 있다.

  • autoplay (boolean)
  • preload (none / metadata / auto)
  • loop (boolean)
  • controls

autoplay는 전부 다운로드 받지 않더라도 재생이 가능할만큼만 되면 바로 재생한다. 사람들이 웹페이지에 들어왔을 때 오디오가 바로 재생되면 싫어하므로 사용에 주의하라.

preload는 미디어 소스의 로딩을 어떻게 할지를 정하고 싶을 때 사용한다. none은 preload하지 않고, metadata는 metadata만 로드한다. auto는 empty string(“”)과 동등한데, 전체 파일이 로드된다.

loop는 반복 재생하도록 한다.

controls는 브라우저의 기본 미디어 컨트롤을 추가한다. 사용자가 오디오의 재생을 제어할 수 있다. 브라우저마다 UI가 다른데, 공통적인 기능은 비슷하다. UI가 다르므로 controls attribute를 셋팅하지 않고 HTML, CSS, Javascript를 사용해서 customize한 control을 생성, 원하는 디자인을 할 수도 있다.

webm, mp3, ogg등 브라우저마다 지원하는 format이 다르다. 이에 대해서는 MDN의 다음 글을 참고하자.

여러개의 source를 넣고 싶을 때는 source element를 이용한다. src attribute를 사용하지 않고 여러개의 source를 사용했음에 주목하라. 이 중 지원하지 않는 format이 있으면 다음 것을 시도한다.

<audio controls>
  <source src="media/dasomoli.webm" type="audio/webm">
  <source src="media/dasomoli.mp3" type="audio/mp3">
  <source src="media/dasomoli.ogg" type="audio/ogg">
  여러분의 브라우저가 <code>audio</code>를 지원하지 않는 것 같아요!
</audio>

동영상 (Video)

video element와 audio element는 둘 모두 HTML media elements이다. 사실 video element로 audio를, audio element로 video를 재생하는 것도 가능하다. video element는 display 영역을 제공한다는 것이 차이이다.

video element의 attribute는 audio element 것을 모두 가진다. 추가로 다음 attribute를 제공한다:

  • height
  • width
  • poster

width와 height attribute는 video display area의 width와 height을 각각 조정한다. 둘 모두 pixel로 조정된다. %로 비율을 쓸 수 없다.

poster attribute는 video가 다운로드되는 동안 보여줄 이미지를 지정한다. 지정하지 않으면 video의 첫 frame의 다운로드 전에는 빈 네모가 보이고, 첫 frame을 다운로드 받으면 그 첫 frame이 보일 것이다.

Text track

track element는 media element와 연관된 시간 기준의 글을 지정한다. 이는 미디어 재생과 싱크가 맞는 시간에 어떤 글을 보여줄 수 있다는 뜻이다. 자막이나 해당 미디어에 대한 설명은 물론, 앞이 안보이거나 소리가 안들리는 사람들에게도 어떤 것인지 설명할 수 있도록 해준다.

video의 source element와 같이 하나의 media element 에 여러개의 track element를 넣어서 그 media에 대한 여러 track을, 예를 들면 다른 언어 자막 같은 식으로 제공할 수 있다.

track element의 attribute는 다음과 같다:

  • src: text track file의 위치
  • default: media element 당 하나의 track element가 default track으로 지정될 수 있다. 사용자 설정에 따라 override될 수 있다.
  • kind: text track이 무엇으로 사용되는지를 지정한다. subtitles, captions, descriptions, chapters, metadata같은 여러 옵션이 있다. default는 subtitles이다.
  • srclang: track text의 언어. 영어는 en, 프랑스어는 fr. subtitle track이면 srclang은 필수다.
  • label: captions과 subtitles 사이를 가르는데 사용되는 제목
<track src="media/dasomoli-ko.vtt" kind="subtitle" label="Korean subtitles">
<track src="media/dasomoli-en.vtt" kind="subtitle" label="English subtitles">
<track src="media/dasomoli-fr.vtt" kind="subtitle" label="French subtitles">

자막에 공용적으로 많이 쓰이는 format은 Web Video Text Tracks Format (WebVTT)이다. 이 format은 timestamps와 captions를 설명하는 plain text로 구성된다. 다음과 같은 형식이다.

WEBVTT
00:00:05.000 --> 00:00:10.000
5 seconds
00:00:15.000 --> 00:00:20.000
15 seconds

이미지

여러 방법이 있다:

  • img element
  • picture element
  • 프로그래밍한 그래픽

img element는 가장 간단하게 img를 넣는 방법이다. src로 파일 위치를 지정한다. alt attribute는 img가 나타나지 않을 때 해당 이미지에 대한 설명을 제공한다. 다음과 같이 사용한다

<img src="media/dasomoli.png" alt="Genius developer">

picture element는 img와 비슷한데 여러개의 source element를 가지고 그 중 어느 것을 나타낼지에 대한 rule을 정한다. 다음처럼 쓴다.

<picture>
    <source srcset="media/dasomoli-small.png" media="(max-width: 639px)">
    <source srcset="media/dasomoli-large.png" media="(max-width: 800px)">
    <img src="media/dasomoli.png" alt="Geniuse developer">
</picture>

위에서 source element는 media attribute를 갖는다. 위 코드는 첫번째 것부터 media attribute가 참인지를 보고 맞다면, 위 코드에서는 viewport가 639 픽셀 이하인지를 보고 맞다면 해당 이미지를 보여준다. 아니라면 다음 것으로 넘어간다. 다 안맞으면 마지막의 img의 것을 보여주게 된다. 브라우저가 picture를 지원하지 않을 때도 picture의 가장 마지막 것을 보여주게 된다.

조건으로 media 외에도 type attribute나 mime type도 사용할 수 있다.

위의 .jpeg, .gif, .png, .webp 같은 foramt외에도 SVG (Scalable vector graphics)나 canvas element 처럼 프로그래밍한 그래픽을 생성할 수 있다. SVG는 vector graphics를 위한 XML 기반의 format이고, canvas element는 웹페이지 상에서 rasterized graphics를 생성하는데 사용되는 JavaScript drawing API로 접근 할 수 있는 element다.

svg element

svg는 vector graphics를 정의하는 XML 기반 format이다. Vector graphics는 깨지는 문제없이 비율에 따라 계산되기 때문에 반응형 웹에 매우 유용하다. 간단한 예로 play와 stop button을 만든다고 하자.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="black" />
            <path d="M 90,50 25,80 25,20 z" fill="white" />
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="50" fill="black" />
    <path d="M 25,25 75,25 75,75 25,75 z" fill="white" />
</svg>

viewBox attribute로 x좌표 0, y좌표 0에서 100 dimension으로 설정했다. viewBox는 pixel로 표시하지 않는다. width와 height attribute로 비율을 정할 수 있다. 안에 들어가는 children들은 viewBox의 상대적 위치에 놓이게 된다.

circle element로 x좌표 50, y좌표 50의 위치에 반지름 50짜리 원을 그렸고, 안을 black으로 채웠다. hex value #rrggbb로도 당연히 설정 가능하다. 그 후 path로 3점을 정해서 삼각형을 하나 그리고 이를 white로 채웠다. 비슷하게 stop 버튼은 사각형을 하나 그리고 이를 white로 채웠다. 위 소스는 다음과 같이 렌더링된다.

svg는 canvas처럼 javaScript가 필요하지 않고 바로 접근 가능하지만, shape들이 많으면 성능 문제가 일어날 수 있다.

canvas Element

canvas element로는 rasterized graphics를 렌더링할 수 있다. 이를 위해서 JavaScript의 drawing API를 사용한다. 2D와 WebGL의 두가지 렌더링 모드가 있다. WebGL은 GPU acceleration과 같은 shader support를 제공한다.

browser가 canvas를 지원하는지를 확인한 후 이용하는 것이 좋다. 확인하는 코드는 다음과 같이 쓸 수 있다.

<canvas id="canvasArea" width="640" height="480">
    여러분의 브라우저가 <code>canvas</code>를 지원하지 않네요.
</canvas>
<script>
    const canvas = document.getElementById('canvasArea');
    if (canvas.getContext) {
            const context = canvas.getContext('2d');
            // 여기다가 뭔가를 그려봅시다.
    }
</script>

선 그리기

moveTo(x, y) 로 옮기고, lineTo(x, y) 로 경로를 정한 후, strokeStyle을 정한 후 stroke()로 외곽선을 그린다. lineTo로 이어서 그린 후 해당 경로를 fillStyle로 정한 후 fill()로 채울 수도 있다.

사각형(Rectangle) 그리기

속이 빈 사각형을 외곽선 만으로 그리고 싶으면, strokeStyle로 외곽선의 style을 정하고, lineWidth로 외곽선 굵기를 정한 후, strokeRect(x, y, width, height)로 그린다.

안이 채워진 사각형을 그리고 싶으면 fillStyle로 style을 정하고, fillRect(x, y, width, height)로 그린다. fillStyle은 CSS에서 사용하는 값이면 다 쓸 수 있다. color, backgroundColor같은 property나 black, red, white 같은 color값, hex value #rrggbb나, rgba(25, 35, 45, 0.7) 같은 rgba 값도 가능하다.

외곽선과 안이 채워진 것을 모두 적용하고 싶다면, strokeStylefillStyle을 모두 설정하고, rect(x, y, width, height)로 사각형 경로를 설정하고, fill()로 채우고, stroke()로 외곽선을 그리면 된다.

context.strokeStyle = "blue";
context.lineWidth = 5;
context.strokeRect(50, 50, 50, 50);
context.fillStyle = "green";
context.fillRect(100, 100, 200, 150);
context.fillStyle = "red";
context.strokeStyle = "lime";
context.lineWidth = 4;
context.rect(300, 50, 50, 50);
context.fill();
context.stroke();

위의 코드는 아래와 같이 렌더링된다.

원 (Circle) 그리기

arc(x, y, radius, startangle, endangle, anticlockwise)로 그린다. x와 y는 원의 중심, radius는 반지름, startangle과 endangle은 시작과 끝 각, anticlockwise는 true이면 반시계방향, false이면 시계방향이다. 각도는 radian값이다.

context.fillStyle = 'red';
context.arc(100, 100, 40, 0, Math.PI * 2, false);
context.fill();
context.beginPath();
context.fillStyle = 'orange';
context.arc(200, 100, 40, 0, Math.PI * 2, false);
context.fill();
context.beginPath();
context.fillStyle = 'green';
context.arc(300, 100, 40, 0, Math.PI * 2, false);
context.fill();

위 코드는 아래처럼 렌더링된다. 새로운 style을 적용하기 위해서 beginPath()를 썼음에 주의하라

canvas 지우기

clearRect(x, y, width, height) 으로 원하는 영역을 지울 수 있다. 전체를 지우고 싶으면 아래처럼 해당 canvas의 width와 height으로 지우면 된다.

context.clearRect(0, 0, canvas.width, canvas.height);

[HTML5&CSS] 미디어 쿼리를 이용한 반응형 웹

Viewport란?

viewport는 사용자의 웹페이지의 보여지는 영역이다. 디바이스에 따라 다르다. 일반적으로 모바일 폰은 컴퓨터 화면보다 작을 것이다.

Responsive Viewport

위처럼 width property로 device-width로 viewport를 셋팅하면 그 디바이스의 해상도에 맞게 보여줄 수 있다. initial-scale은 그 윂페이지의 초기 zoom을 제어한다. 이 값은 별 일 없는 한 1로 하는 것이 좋다. maximum-scale을 1로 셋팅하면 zoom하지 못하게 할 수 있지만 권하지 않는다.

미디어 쿼리 (Media Queries) 이해하기

미디어 쿼리는 CSS3의 핵심 기능이다. @media 로 어떤 조건이 참이 될 때만의 CSS properties를 담는 rule을 사용한다. 디바이스의 screen width와 orientation(portrait 또는 landscape)에 따라 또는 인쇄된 종이에 보여지는 것 조차 display를 바꿀 수 있다.

먼저 breakpoint부터 보자. breakpoint는 디바이스나 웹 브라우저의 width 또는 height에 반응하는 웹페이지의 한 point이다. breakpoint threshold에 다다르면, 다른 스타일을 CSS로 적용할 수 있다.

breakpoint의 추가는 min-width나 max-width 룰을 추가함으로써 할 수 있다. 예를 들어 640px보다 작을 때를 지정하고 싶다면, max-width: 640px 를 쓴다. 반대로 640px 보다 클 때를 지정하고 싶다면, min-width: 640px 를 쓴다.

미디어 쿼리는 @media 뒤에 breakpoint 조건을 쓴 뒤 { } 안에 적용하고 싶은 CSS code를 적으면 된다. 예를 들어, max-width 800px로 screen에 어떤 스타일을 적용하고 싶다면 @media only screen and (max-width: 800px) 그리고 뒤에 { } 를 붙여 그 안에 스타일을 적어주면 된다.

다음 코드는 디바이스 상의 웹페이지가 800 px까지는 p 태그의 글자색을 red로 바꿀 것이다.

@media only screen and (max-width: 800px) {
  p {
    color: red;
  }
}

@media 코드를 각 디바이스에 따라 다르게 아래처럼 적용할 수도 있다. 그러나 브라우저는 로딩 시 width에 따라 css파일을 load하지 않고, width와 상관없이 모든 css파일을 읽어들인다.

<link rel="stylesheet" media="screen and (max-width: 480px)" 
href="mobilephone.css" />
<link rel="stylesheet" media="screen and (min-width: 481px) and 
(max-width: 768px)" href="tabletpc.css" />

Device Orientation에 따른 처리

디바이스의 orientation에 따른 처리를 하고 싶다면, 다음 미디어 쿼리를 사용하면 된다. 아래 코드는 landscape일 때의 rule을 적용할 것이다.

@media (orientation: landscape)

반대로 portrait일 때의 rule은 다음으로 한다.

@media (orientation: portrait)

다음과 같은 코드는 orientation이 landscape일 때만 p.warning을 보인다.

<head>
...
	<style type="text/css">
	p.warning {
		display: none;
		background: red;
		padding: 15px;
		font-size: 30px;
		margin: 0;
	}
	@media (orientation: landscape) {
		p.warning {
			display: block;
		}
	}
	</style>
</head>
<body>
	<p class="warning">이 글은 landscape에서 보여집니다.</p>
</body>

Landscape 혹은 portrait로의 전환을 확인해보고 싶다면 브라우저의 개발자도구에서테스트 가능하다.

여러 개의 미디어 쿼리 합치기

여러 개의 breakpoint로 어떤 스타일을 지정하고 싶다면 콤마(,)를 사용해서 합쳐서 사용할 수 있다. 콤마(,)는 미디어 쿼리를 OR해서 처리한다. 다음 코드는 width 480px 에서 640px 사이, 또는 1024px를 넘어가면 배경색을 green으로 바꾼다.

@media screen and (max-width: 640px) and (min-width: 480px), 
(min-width: 1024px) {
    body {
        background: green;
        }
}

인쇄 시의 스타일 (Print Stylesheets) 지정

CSS3 미디어 쿼리는 해당 페이지를 인쇄할 때의 스타일을 따로 지정할 수 있다. 두가지 방법이 있다.

  1. 따로 분리된 stylesheet를 <link /> 태그를 사용해서 import한다.
  2. 원래 있던 stylesheet 내에 @media 문법으로 인쇄를 위한 스타일을 지정한다.

첫번째 방법의 경우 아래의 코드처럼 import할 수 있다.

<link rel="stylesheet" media="print" href="printstyle.css" />

두번째 방법의 경우 아래처럼 사용하면 인쇄 시에만 적용되어 footer와 aside의 내용을 보이지 않도록 하고, header와 section의 margin과 배경을 조정한다.

@media only print {
    footer, aside {
        display: none;
    }
    header, section {
        margin-right: 0;
        background: transparent;
    }
}

[HTML5&CSS] Dark theme 만들기

다크 테마를 만들기 위해 색상을 다뤄보자.

테마 내의 새로운 HTML element를 몇 개 알고 넘어가자.

  • pre (preformatted): HTML 파일 내에 whitespace를 포함하여 적힌 그대로 보여준다. 일반적으로 monospace font, 즉 고정폭 폰트로 보여준다.
  • abbr (abbreviation): acronym이나 abbreviation을 나타낸다. acronym element는 deprecated되었다. 그렇지만, 하위 호환성을 위해 포함된다.

새로운 CSS background properties도 몇 개 알고 넘어가자.

  • background-image: element의 배경 이미지. url()에 이미지 URL을 넣는다.
  • background-repeat: 배경 이미지를 어떻게 반복할지. 다음 값들을 사용할 수 있다.
    • repeat: 모든 공간을 덮을만큼 반복한다. 잘릴 수 있다.
    • space: 잘림 없이 가능한만큼 반복한다. 비율이 유지되고, 첫번째와 마지막 이미지 사이의 가장자리를 잡기 위한 여백이 공간을 채우기 위해서 바뀐다.
    • round: 이미지가 늘어나거나 줄어들어서 공간을 채운다.
    • no-repeat: 이미지가 반복되지 않는다.

색상 반전시키기

반대 색상을 찾기 위해서 https://www.colortools.net을 이용하자. Opposite Color Tool을 이용하면 반대 색상을 쉽게 얻을 수 있다. 반전시킨 색상을 각 element에 적용한다.

 

HSL function 사용하기

HSL function은 세가지 값으로 색을 만든다. Hue, Saturation, Lightness.

  • H는 색상(Hue)를 나타낸다. 색상환(color wheel)에서 각도를 나타낸다. degree로 나타내던가 또는 radian으로 지정한다. 단위 없이 쓰면 degree이고, 0이 pure red, 120이 pure green, 240이 pure blue이다.
  • S는 채도(Saturation)을 나타낸다. 100% saturation은 완전히 짙은 색, 0%는 완전히 흐린 색, 회색이다. 50%가 “normal” color이다.
  • L은 밝기(lightness)를 나타낸다. 100%는 하얀색, 0%는 검정색이 된다.

따라서 색상을 180 degree 돌리면 반대색이 된다. 회색을 반전시키고 싶을 때는 밝기를 뒤집으면 된다. 회색을 얻고 싶으면 채도를 0으로 바꾸면 된다. 여기서 grayscale을 바꾸고 싶으면 밝기를 바꾸면 된다.

 

CSS Invert Filter

filter: invert() 를 사용해서 뒤집을 수도 있다.

 

[HTML5&CSS] Form styling하기

label을 styling하기 위해서 font와 text의 크기를 조절한다.

textboxes나 textareas는 일반적으로 그 크기를 바꾸고, border를 제거한다. 또 예시 입력값인 placeholder를 추가해서 어떤 값을 입력하면 되는지를 도와주도록 한다.

 

button을 styling하기 위해서 일반적으로 배경색과 크기를 바꾼다. button의 box 바깥이 흉하므로 좀 손본다.

 

Select boxes를 styling하기 위해서는 일반적으로 text box처럼 보이게 만들고, 오른쪽의 아래 화살표를 styling한다.

 

form validation을 위해서 HTML은 required attribute를 제공한다. 입력이 꼭 필요한 field는 required attribute를 사용한다. CSS에서 이를 select하기 위해서 :valid 와 :invalid pseudo selector를 사용할 수 있다.

[HTML5&CSS] Form Elements

다음 form을 구성하는 HTML elements에 대해서 알아보자.

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

 

form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.

input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.

text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.

E-mail의 입력에는 email type을 사용할 수 있다.

password의 입력에는 password type을 사용할 수 있다.

checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.

radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.

 

label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.

 

textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.

 

fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.

 

select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.

 

button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.

[Web] 웹 개발 시 유용한 사이트

웹 개발 시 유용한 사이트들을 정리한다.

[HTML5&CSS] Display property: block과 inline

display property 중 block과 inline에 대해 알아보자.

기본적으로 elements들은 block 아니면 inline 으로 setting된다. block은 horizontally 모든 공간을 점유한다. 반면, inline은 그 content만큼의 공간만 차지한다.
block-level element의 예는 div가 있고, inline element의 예로 span이 있다.

다음과 같이 해서 이 값을 바꿀 수도 있다.

 

[HTML5&CSS] Box model

각 HTML element들은 여러 layer로 구성되는데, 가장 바깥쪽에 margin, 그 안에 외곽선인 border, 그 안에 padding 그리고 그 안에 width와 height의 content가 위치한다. 반대로 안쪽부터 보자.

 

Content Box는 실제 content가 들어가는 부분이다. 가장 중요한 property는 width와 height이다. 실제 px값이나 %로 준다.

width: 300px;

height: 200px;

 

Padding은 border와 content box 사이에 공간을 준다. top, bottom, left, right 모두에 줄 수도, 좌우와 상하에만 줄 수도, 원하는 곳에 padding-top, padding-bottom, padding-left, padding-right로 줄 수도 있다.

모두에 padding 값을 줄 때는 값 하나만 쓴다.

padding: 25px;

상하와 좌우에 같은 값들을 줄 때는 값 두개를 쓴다. 아래는 상하에 25px를, 좌우에는 0px를 준다

padding: 25px 0px;

 

border는 padding의 끝에서 margin의 시작까지 자리한다. 기본값은 visible하지 않아서 명시적으로 정해주어야만 볼 수 있다. padding처럼 각 direction마다 줄 수도 있다. 모든 값은 width, style, color의 3가지 값을 갖는다. 예제들은 다음과 같다.

border: 1px solid red;

border-top: 1px solid blue;

border-right: 2px dotted red;

border-bottom: 5px dashed yellow;

border-left: 10px double pink;

 

margin은 border의 끝과 페이지 상의 다른 element의 외곽 사이에 공간을 준다. 역시 padding처럼 모든 방향에, 상하/좌우를 나눠서 줄 수도, 각 direction 별 top, right, bottom, left에 따로 줄 수도 있다.

 

4 방향을 속성에 한꺼번에 써서 줄 때는 clock-wise로 돈다. top->right,->bottom->left

개발자 도구에서 각 속성 값을 확인할 수 있다.

[HTML5&CSS] HTML5 기본 구조

처음 doc type을 정한다. HTML5부터는 매우 심플하다.

<!DOCTYPE HTML>

 

HTML 태그로 시작한다. lang attribute로 어느 언어인지를 명시한다.

<html lang=”en”></html>

 

html 태그 안에는 head와 body가 들어간다.

먼저 head 안에 들어갈 내용을 살펴보자.

head의 필수 태그는 title이다. title 태그 전에 meta 태그로 charset을 명시해준다.

meta 태그로 해당 페이지의 description을 적어주면 좋다.

meta 태그로 디바이스의 width와 초기 scale로 viewport도 적어준다.

<head>

<meta charset=”utf-8″>

<title>DasomOLI’s example1</title>

<meta name=”description” content=”The purpose of this page is for showing a example of HTML5 basic structure”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

</head>

 

body 태그 안엔 보일 내용을 내용의 목적에 맞는 태그를 사용해서 적는다.

대표적인 태그는 제목을 적을 때 사용하는 heading <h1>, <h2> 등의 태그와 리스트를 작성할 때 사용하는 unordered list <ul>, ordered list <ol>, 그리고 그 아래 항목을 적을 때 사용하는 list item <li>, 문단을 작성할 때 사용하는 paragraph <p> 태그 등이 있다.

<body>
<h1>DasomOLI’s example1</h1>
<p>Hello HTML5!</p>
</body>

모두 합치면 다음과 같을 것이다.

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <metacharset=”utf-8″>
    <title>DasomOLI’s example1</title>
    <metaname=”description”content=”The purpose of this page is for showing a example of HTML5 basic structure”>
    <metaname=”viewport”content=”width=device-width, initial-scale=1″>
  </head>
  <body>
    <h1>DasomOLI’s example1</h1>
    <p>Hello HTML5!</p>
  </body>
</html>

완성된 html 은 w3c에서 제공하는 validator (https://validator.w3.org/)를 통해 유효성을 검사할 수 있다.