HTML
1.[HTML] HTML 소개
HTML은 웹페이지를 제작하기 위한 가장 기초적인 마크업 언어입니다. HTML은 <꺽쇠>이루어진 태그라는 것으로 이루어져 있습니다. 이 태그들이 모여 우리 눈에 보이는 페이지를 구성하게 됩니다. 그래서 HTML문서를 들여다보면 웹페이지의 구조를 알 수 있습니다.태
2.[HTML] 블록 요소와 인라인 요소
HTML의 요소에는 블록과 인라인으로 구분되는 속성이 있습니다. 이 요소 속성에 따라서 스타일을 적용했을 때 모습이 달라지게 됩니다.블록 요소는 브라우저에서 가로로 한 줄을 차지하는 요소입니다. 블록 요소는 다른 블록, 인라인 요소를 하위 요소로 포함할 수 있습니다.
3.[HTML] HTML 주석
기념비적인 Velog에서의 첫 오리지널 포스트입니다. HTML 카테고리를 옮기다보니 주석과 같은 기초적인 부분에 대해서 설명을 하지 않았더라고요. 그래서 추가하게 되었습니다.주석(Comment)는 문서에 설명을 붙이는 것을 말합니다. 문서에 설명을 왜 붙여야할까요? 작
4.[HTML] 텍스트 태그 - 블록 요소
<h>태그는 주로 제목을 표시하기 위한 태그입니다. 일반 텍스트에 비해서 굵고 큰 폰트로 표시가됩니다. <h>태그는 뒤에 숫자를 붙여 <h1> ~ <h6>의 형태로 사용되며, <h1>이 가장 큰 글씨이고 <h6>로 갈수록 크기가 작아집니
5.[HTML] 텍스트 태그 - 인라인 요소
이번에 알아볼 태그는 인라인 텍스트 태그들입니다. 지난 번엔 블록 요소로써 한 줄을 차지했는데, 이번에는 주로 요소 내에서 효과를 주는 방식으로 사용할 수 있는 인라인 요소들을 소개해드리겠습니다.<b>와 <strong>태그는 텍스트를 굵게(볼드체) 표시할 때
6.[HTML] 특수문자 입력하기
지난 시간에 두 개의 포스팅에 걸쳐서 텍스트 관련 태그를 알아봤습니다. 그런데 실습하다가 <, >, " 등의 특수문자가 제대로 입력되지 않는다는 점을 아시나요?일반적인 방식으로는 HTML에서 특수문자를 인식시킬 수 없습니다. 이번에는 특수문자를 입력하는 방법에 대
7.[HTML] 리스트 만들기
지난번에 네이버의 CSS를 제거했을 때 모습을 한 번 보여드린 적이 있었는데요. 그렇게 뜯어본 웹 구조는 앞 부분에 검은 점이 달린 리스트의 형태를 취하고 있습니다. 이처럼 복잡한 구조의 웹 페이지는 리스트의 형태를 취하고 있었는데요, 이번에는 이런 리스트를 생성하는
8.[HTML] 표를 만드는 태그
이번에는 한 눈에 보기 쉬운 자료인 테이블(표)를 만드는 태그에 대해서 알아보겠습니다. 테이블은 자료를 한 눈에 보기 쉽지만 자칫하면 복잡한 문서 구조를 탄생시킬수도 있으니 설계를 잘하고 작성해야 합니다.테이블에 들어가지 앞에서 행과 열에 대한 개념을 확실히 하고 가겠
9.[HTML] 테이블과 관련된 태그들
지난 포스트에서는 테이블을 만드는 방법을 알아봤습니다. 이번에는 테이블과 관련해서 다양한 효과를 주는데 도움을 주는 태그들에 대해서 알아보고 가겠습니다. 이번 예제에 사용되는 테이블의 html 코드입니다.<caption>태그는 표 상단 중앙에 표의 제목을 추가할
10.[HTML] 이미지 태그
웹 페이지에서 이미지는 단순히 그림으로 사용 될 수도 있고 버튼으로도 사용되는 등 다양한 역할을 하고 있습니다. 그런면에서 이미지를 적재적소에 넣고 활용하는 것도 중요하다고 할 수 있습니다.웹 페이지에 이미지를 삽입할 때는<img>를 사용합니다. 그냥 <im
11.[HTML] 하이퍼링크 태그
이번에 알아볼 태그는 하이퍼링크와 관련된 태그입니다. 하이퍼링크는 일반적으로 텍스트를 통해 특정 주소가 직접적으로 연결되어있는 것들을 말합니다. 오늘날의 인터넷은 무수한 하이퍼링크들이 모인 공간이라고 해도 무방할 정도로 하이퍼링크 삽입은 여러므로 중요하다고 볼 수 있습
12.[HTML] 폼 요소 1
지금까지 배운 HTML 태그들은 제작자가 사용자에게 정보를 보내는 일들을 했습니다. 하지만 우리는 종종 웹에서 정보를 보내기도 합니다. 검색창이라던가, 로그인창과 같이 문자를 입력해서 정보를 보내기도 하고, 설문조사에서 특정 번호를 선택해 정보를 보냅니다. 이렇게 사용
13.[HTML] 폼 요소 2
이전 포스트에서는 주로 텍스트 입력과 관련된 폼을 알아보았다면, 이번에는 좀 더 다양한 모습의 폼 요소들을 알아보겠습니다. 혹시 회원가입을 할 때 이메일을 적어보신 경험이 있으신가요? 이메일의 @ 뒷부분은 보통 사이트 도메인이 들어갑니다. 이 부분을 직접 입력할 수도
14.[HTML] 폼 요소 3 - 속성
두 개의 포스트에서 폼 요소들을 알아보았습니다. 폼 요소는 속성에 따라 변화가 가장 큰 기본 태그라고 생각이 되는데요. 이번에는 그동안 알아봤던 태그들의 핵심적인 속성들을 짚고 넘어가보려고 합니다.특히 <input>태그의 type속성은 그 값도 많고, 어떻게 사용
15.[HTML] 폼 요소 4 - type 속성
`태그에서 type속성은 그 값에 따라 전혀 다른 폼의 형태를 갖습니다. 오늘은 `에 대해서 자세히 알아보겠습니다. 한 번씩 폼을 클릭해보고 입력해보면서 따라가봅시다. 참고로 모든 속성은 아래와 같은 형태를 취합니다. type='text' text는 텍스트를 입력하는
16.[HTML] <div>와 <span>
웹 페이지에서 공간을 분할하는 것은 중요합니다. 문서 구조를 쉽게 파악할 뿐만 아니라, 문제가 생기면 해당 부분만 건드리면 되기 때문이죠. 또한 분할을 하면 태그를 관리하기가 쉬워집니다. 웹 페이지의 공간을 분할 한다는 것은 큰 서랍장을 용도 별로 나눠서 사용한다는 것
17.[HTML] 시맨틱 태그
지난 포스트에서 공간 분할 태그인 <div>와 <span>에 대해서 알아봤습니다. 이들은 브라우저 구조를 나눠주긴 하지만, 한 눈에 쉽게 구조를 알아보긴 어려운데요. 그래서 등장한 것이 시맨틱 태그입니다.시맨틱 태그란 태그만을 보고 브라우저의 구성 구조를 알
18.[HTML] <iframe>
iframe은 inline frame의 약자로 말 그대로 인라인 요소 프레임을 말합니다. 인라인 요소 프레임이라는 것은 다른 HTML페이지를 현재 페이지에 인라인 요소의 형태로 넣는 것을 말합니다. 즉, 한 웹 문서에서 다른 웹 문서를 볼 수 있다는 것 입니다.인라인
19.[HTML] 미디어 관련 태그
HTML5가 등장하기 이전의 웹 페이지에서는 미디어(오디오, 영상) 등을 삽입하기 위해서는 따로 플러그인을 이용해야 했습니다. 미디어를 위해 플러그인을 따로 삽입한다라는 것은 불편함을 초래했는데요. 이러한 점을 개선하고자 HTML5에서는 미디어와 관련한 태그를 본격적으
20.[HTML] <style> 태그
<style>태그는 HTML문서에 스타일을 적용할 때 사용하는 태그입니다. <style>태그는 <body>가 아닌 <head>태그에 삽입해서 사용하고 이 방식을 내부 스타일 시트라고 합니다.<style>내부에 적은 스타일 시트 내용은 해당 H
21.[HTML] <link>태그와 @import
웹 문서를 꾸밀때 주로 외부 스타일 시트를 적용합니다. 이번에는 외부 스타일 시트를 적용하는데 사용하는 <link>태그에 대해서 알아보겠습니다.<link>는 외부 파일을 연결할 때 사용하는 태그입니다. 이 태그는 닫는 태그가 존재하지 않습니다. 그리고 <
22.[HTML] id와 class
id와 class속성은 모든 태그에 대해서 적용가능한 속성입니다. 이 속성은 태그에 별개의 이름을 적용하는 속성인데, 이 속성이 무슨 일을 하고 어떤 차이가 있는지에 대해서 알아보겠습니다.id속성은 태그에 식별자를 부여하는 속성입니다. 학교에서 한 반에 학생들은 각자
23.[HTML] <canvas> 태그
<canvas>태그는 HTML5에서 추가된 태그입니다.웹 콘텐츠를 그리는 일을 수행합니다. 콘텐츠를 그릴 때 자바스크립트 등의 스크립트를 이용해서 그리게 됩니다.즉, 실제로 <canvas>태그에 콘텐츠를 그리는 역할은 스크립트가 수행합니다.HTMLCanvas