본문 바로가기

반응형

FrontEnd/HTML

(18)
#4-3. HTML 링크(link) 설정 방법(<a>) # html 에서 링크(link)를 설정하는 방법과 tag의 target 속성, 링크의 상태 등을 설명한다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. HTML 링크(link) 1) 문법 이 링크를 클릭하세요 2) target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. _blank : 링크로 연결된 문서를 새 창이나 새 탭에서 오픈 _self : 링크로 연결된 문서를 현재 프레임(frame)에서 오픈(기본 설정) _parent : 링크로 연결된 문서를 부모 프레임(frame)에서 오픈 _top : 링크로 연결된 문서를 현재 창의 가장 상위 프레임(frame)에서 오픈 프레임(frame) 이름 : 링크로 연결된 문서를 지정..
#4-2. HTML 배경(Background) 설정 방법 # HTML 문서의 기본 배경은 흰색입니다. # 또한, HTML 요소들도 각자 자신만의 배경을 가지고 있습니다. # 이번 "HTML 배경(Background) 설정 방법"편에서는 HTML의 배경을 변경하는 방법에 대해 설명합니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 배경(Background) HTML에서는 이러한 배경을 다음과 같이 변경할 수 있습니다. 1. 배경을 다른 색으로 변경 2. 배경을 다른 이미지로 변경 위의 두 가지 방법을 아래에서 하나씩 배워보겠습니다. 1) 배경을 다른 색으로 변경 HTML5 이전까지는 bgcolor 속성을 이용해 HTML 요소의 배경색을 다른 색으로 변경할 수 있었습니다. 하지만 HTML5 부터는 bgcolor 속성..
#4-1. HTML 스타일(style) 속성 # 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정이 가능합니다. # 하지만 이러한 style 속성을 이용한 방법은 오직 하나의 HTML 요소에만 스타일을 적용할 수 있습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML 스타일(style) 속성 1) 문법 2) 배경색 변경 style 속성을 이용한 배경색 변경 3) 글자색 변경 style 속성을 이용한 글자색 변경 4) 글자 크기 변경 style 속성을 이용한 글자 크기 변경 5) 문단 정렬 변경 style 속성을 이용한 문단 정렬 변경 6) 여러 스타일 설정 style 속성값에 사용되는 CSS 속성과 속성값들은 세미콜론(;)을 이용하여 구분 CSS 속성을 하나만 사용할 때나, 여러 개의 CSS ..
#3. HTML 공간 분할 요소:: iframe과 HTML 레이아웃(layout) # HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다. # 오늘은 ifame과 HTML의 레이아웃(layout)을 알아보겠습니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. iframe 요소 1) iframe 요소 iframe이란 inline frame의 약자입니다. iframe요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹페이지를 삽입할 수 있습니다. 문법: iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다. 또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정되어 있습니다. 2) iframe 요소의 테두리 변경 iframe 요소는 기..
#2. HTML 공간 분할 요소:: 블록과 인라인(Block, Inline) # HTML의 모든 요소는 해당 요소가 Web browser에 어떻게 보이는가를 결정짓는 display 속성을 갖습니다. # 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. # 블록(Block)타입의 요소와 인라인(Inline)타입의 요소입니다. # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML 1. 블록(block)타입의 요소 1) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. p요소는 display 속성값이 블록인 ..
#1. HTML TEXT(텍스트) 요소 # tag 목록을 볼 수 있는 페이지로 이동합니다. # HTML의 TEXT 요소를 확인합니다. # box 하단에는 사용된 예시를 보여줍니다. AXCE 의 BLOG 미리보기 굵은 글씨 입니다. 굵은 글씨 강조 입니다. 이탤릭체 입니다. 이탤릭체 강조 입니다. 하이라이팅 효과 입니다. "이부분"을 삭제합니다. "밑줄 친 부분"입니다. X2 + Y2 = Z2 H2O 이 글은 짧은 인용구를 위한 글입니다. HTML 정의 블록 인용구 1 블록 인용구 1-1 블록 인용구 2 HTML5 정의 대전광역시 서구 복수서로 10
HTML 의 구조와 Tag # HTML 구조에 대해 전반적으로 이해하도록 한다. # HTML 대표적인 태그의 사용 방법을 알아본다. # BOX 와 ITEM # block 과 inline # 비전공자가 이해한 HTML 1. HTML 태그의 종류 1) "BOX"형 TAG "Box"형 tag는 사용자들에게 보여지는 content들의 구조를 지정할 때 사용합니다. header, footer, nav, aside, main section, article, div, span, form 2) "ITEM"형 TAG "Item"형 tag는 사용자들에게 직접적으로 보여주는 content를 담고 있습니다. a, button, input, label, img video, audio, map, canvas, table 여기서 "Item"형 tag를 배치..
HTML이란? (HTML 기본 개념 이해하기) # "HTML"이 무엇인지 알아보고 "Web site"의 구조를 파악하는 방법을 배워보자 # "HTML" 이란? # "Markup language" 란 무엇인가? # "HTML" 구조 파악 # 비전공자가 이해한 HTML 1. HTML(HyperText Markup Language) HTML은 Web browser에 나타나는 UI(User Interface)들을 보여주는 표준 Markup language 입니다. - Markup language는 컴퓨터 텍스트 처리 과정에서 태그 등을 이용해 문서나 데이터의 구조를 표현한 언어입니다. - Markup language는 문서가 처리될 때 Text의 형식을 지정하는 데만 사용됩니다. HTML은 Web site를 이루는 가장 기본적인 "Building block..

반응형