반응형

IT 강좌(IT Lectures)/HTML 7

[HTML] 7강 이미지 관련 태그

이미지 태그에 대하여 웹 문서에서 작성 할 때 가장 많이 쓰이는 태그 중 하나가 이미지 태그입니다. 이러한 이미지 태그에 사용되는 이미지들은 JPG, GIF, PNG 3가지 파일 형식으로만 구성될 수 있습니다.이미지 삽입하기 웹 문서에서 이미지를 삽입할 때는 보통 태그를 사용합니다. 태그는 경로 지정을 통해 이미지를 불러오며, 이미지의 사이즈, 설명 등을 속성으로 추가하여 사용할 수 있습니다. 경로를 불러오는 속성은 src로 [src="경로"] 형식으로 작성합니다. 이미지를 설명해주는 속성은 alt 속성으로 [alt="설명"]형식으로 작성하며, 사이즈는 width, height 속성을 통하여 [width="가로" height="세로"]형식으로 작성합니다.ex)이미지의 다양한 경로 형태 이미지의 경로를 가..

[HTML] 6강 표 관련 태그

표 관련 태그에 대하여 웹 문서에서 자료를 정리 할 때 뿐만 아니라 자료의 위치를 정렬하고 싶을 때 사용되는 태그입니다. 보통 행(row)과 열(column)으로 이루어져이으며, 그 영역을 셀(cell)이라고 표현합니다. 한마디로 셀(cell)이 모여서 행(row)과 열(column)을 이루고 그 행열을 표(table)라고 부릅니다. 이러한 표(table)는 태그, 태그, 태그, 태그 등으로 구성됩니다. ex) 표(table) 셀(cell) 행(row) 열(column) 표 만들어보기 표를 만들기 위해선 태그를 부모태그로 하여, 태그를 작성한 뒤, 태그의 자식태그로 태그, 태그를 작성해줍니다. 여기서 태그는 전체적인 윤곽을 잡아주는 역할을 하고, 태그는 행을 만들어주는 역할을 합니다. 태그는 행마다 생성..

[HTML] 5강 문단 및 형식 관련 태그

문단 태그란? 일반적으로 텍스트를 작성할 때 블록형태로 묶어 처리를 하는경우가 필요합니다. 이럴 때, 필요한게 문단(블록) 태그입니다. 블록형태로 묶어 처리하는 태그를 사용하는 경우, 해당 블록 전체에 태그 명령이 처리가 되는 특징이 있습니다. 단락 태그 텍스트를 작성할 때 가장 많이 사용되는 태그로 앞뒤에 줄바꿈을 만들어 주는 특징이 있습니다. 일반적으로, 태그를 사용하며, 태그의 경우 를 만날 때까지 줄바꿈 없이 텍스트를 한줄로 표시하며, 브라우저의 창보다 너비가 길어지는 경우에는 자동으로 줄바꿈을 해주는 기능이 있습니다. ex) p태그 예제 입니다. p태그 예제입니다. 줄바꿈 태그 텍스트를 작성할 때, 엔터키를 이용하여 줄바꿈을 한다하더라도 웹브라우저 창에서는 줄바꿈 없이 한 줄로 표시됩니다. 이 ..

[HTML] 4강 텍스트 태그

텍스트 태그란? 보통 웹문서들은 텍스트들의 집합으로 이루어져 있습니다. 이러한 텍스트들의 집합을 좀더 쉽게 편집하고 제어하기 위해 쓰이는 태그를 텍스트 태그라고 합니다. 대표적으로 , , , , , , , 등이 있습니다. 볼드체(Bold) 텍스트 태그 텍스트 중 글씨를 굵게 만들기위해 보통 태그와 태그를 사용합니다. 하지만, 와 태그 사이에는 차이가 존재 합니다. 태그는 강조를 하기 위해 사용되고, 태그는 글씨의 굵기를 단순히 굵게하기 위해 사용됩니다. 이에 따라 스크린리더 기능 사용시 차이가 나기도 합니다. * 스크린리더는 태그만 판독 가능합니다 ex) strong태그 예제 strong태그 예제 ex) b태그 예제 b태그 예제 이탤릭체(Italic) 텍스트 태그 비스듬한 텍스트를 표현하고 싶을 때는 태..

[HTML] 3강 HTML의 기본구성

태그를 작성하는 방법 이전 강의에서 HTML은 , 하지만 이때, 주의할 점이 있습니다. 바로, 태그내에 들어가는 영문자가 소문자로 작성되어야 한다는 점입니다. 물론, 대문자로 작성을 해도 동작하는데는 크게 상관이 없지만, HTML5 발표이후, 표준명세에서 태그 사이의 속성을 이루는 모든 문자는 소문자로 사용할 것을 권장하고 있기 때문입니다. 그리고 태그는 태그와 같이 닫는 태그가 필요 없는 특정 태그를 제외하고 여는 태그가 이으면 닫는 태그는 필수로 삽입해야 합니다. 단, 닫는 태그가 없는 경우 보통 이런식으로 표현하기도 합니다. * 닫는 태그가 없는 태그들 area, base, meta, param, col, source, hr, embed, img, command, hr, input, link 등 그..

[HTML] 2강 웹브라우저와 웹표준 그리고 웹에디터

웹브라우저란 무엇인가? 웹 브라우저는 웹사이트를 둘러보기 위해 사용하는 프로그램으로 1993년 일리노이공과대학의 마크 안데르센이 개발한 모자익(Mosaic)으로 시작됐습니다. 현재는 매우 다양한 웹 브라우저가 존재하며, 우리가 흔히 쓰고 있는 마이크로소프트사의 인터넷 익스플로러(Internet Explorer)와 구글사의 크롬(Chrome)이 대표적입니다.웹브라우저의 종류 웹브라우저는 개발사에 따라 특징이 다르며, 종류 또한 매우 다양합니다. 이름 개발사 특징 인터넷 익스플로러 마이크로소프트 국내에서 많이 사용되고 있는 브라우저. 윈도우에 기본 탑재 엣지마이크로소프트 인터넷 익스플로러의 단점을 보완하여 만든 브라우저. 윈도우10이상부터 기본 탑재 크롬 구글 간단하고 효율적인 사용자 인터페이스를 제공하며 ..

[HTML] 1강 HTML에 대하여

HTML이란 무엇인가? 웹사이트를 만들 때 필요한 웹문서를 구성하는 프로그래밍 언어의 한 종류로 쉽게 책에 빗대어 설명하자면, 책에 해당되는 것이 웹사이트, 책을 구성하는 한장 한장의 종이를 웹문서, 종이에 적혀있는 글자를 HTML이라고 생각하시면 되겠습니다. HTML은 HyperText Markup Language의 줄임말이며, 1991년부터 지금까지 이어져왔는데, 그간 많은 보완을 통해 현재 5버전인 HTML5까지 나왔습니다. HTML의 구성요소 HTML은 요소(Elements), 태그(Tag), 속성(Attributes), 변수(Arguments)로 구성이 됩니다. 구성요소 각각을 자세히 살펴보겠습니다. 요소(Elements)란 HTML 내에서 태그(Tag)로 이루어진 모든 명령어를 의미합니다. 그..

반응형