
HTML 링크(Link) 오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다 문법 HTML 링크 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다.태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 예제 이 링크를 클릭해 보세요! 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. targer 속성 target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _..

비트맵 그래픽 비트맵 그래픽은 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식이다. 대표적인 비트맵 그래픽인 jpeg, gif, png 형식의 이미지 파일을 확대하다보면 아래의 그림 좌측과 같이 이미지가 손상되는 현상이 발생한다. 비트맵 그래픽은 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 때문에 원본 크기보다 이미지를 확대하면 이미지가 손상되는 결과가 발생한다. 그러나 비트맵 그래픽은 단순히 데이터의 배열로써 이미지를 표현하기 때문에 컴퓨터가 연산하기 용이하다. 따라서, 비트맵 그래픽은 하드웨어의 자원을 적게 소모하는 장점이 있다. 벡터 그래픽 벡터 그래픽은 픽셀의 배열로 이미지를 표현하는 것이 아니라 실제로 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 ..

비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다. 비디오 요소의 속성 예제 control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. 태그 사이에 존재하는 텍스..

HTML 리스트 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있습니다. 순서가 없는 리스트(unordered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트(ul) 순서가 없는 리스트는 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다. - disc : 검..

article 내용이 독립적이고 따로 떼어져도 흐름이 깨지지 않는 내용일 때 사용 독립적으로 구분되거나 재사용 가능한 영역을 설정. (매거진/신문 기사, 블로그 등) 일반적으로 ~를 포함하여 식별. 작성일자와 시간을 의 datetime 속성으로 작성. * article > section 민초 민초단 반민초단 section 각 section의 내용이 연관성(논리적으로 관계있는 문서) 있을 때 사용 일반적으로 ~를 포함하여 식별. * section > article 경제 경제뉴스1 경제뉴스2 쉽게 풀어내면 article은 독립적인 콘텐츠이다. 예를 들어 블로그 글을 볼 수 있다. 그래서 블로그에는 여러 개의 글이 있지만 그 글들은 연관성이 있든 없든 상관이 없다. 어제는 경제라는 주제에 대해 쓸 수 있고 오..

HTML이란? HTML(Hypertext Markup Language)이란 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 요소로 구성된 마크업 언어이다. 요소 1. 여는 태그(Opening tag): 요소의 이름과 열고 닫는 꺽쇠 괄호()로 구성. 2. 닫는 태그(Closing tag): 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그와 같음. 3. 내용(Content): 요소의 내용. 4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 함. 속성과 값 요소의 기능을 확장하기 위해 속성(Attributes)을 사용한다. 웹 표준, 접근성, 호환성 웹 표준(Web Standards) 웹 표준이란 브라우저 종류 및..

시맨틱 태그 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다. 즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공하게 된다. HTML5 이전의 태그와 비교하자면 HTML5부터는 태그로 클래스나 아이디를 선언하는 것이 아닌 미리 정의된 시맨틱 태그를 사용한다는 차이점이 있다. 시맨틱 태그를 사용하게 되면 유지보수에 용이해지고 웹 접근성이 향상되는 등의 이점이 있다. 종류 태그명 설명 태그는 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다. 태그는 페이지의 제목과 같은 소개 내용을 나타낼 때 사용합니다. 태그는 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 나타낼 때 사용합니다. 태그는 좌측과 우측 사이드 위치의 공간을 의미하며, 본문..