본문 : 폼(Form) 요소 - FORM, FIELDSET, LEGEND

폼과 관련된 요소와 속성은 사용자들과 상호작용을하는 주요 수단입니다. 첫번째로 폼을 구성하는 기본 구조에 대하여 배워봅니다. FORM 요소 form 요소는 폼(FORM)의 범위를 표시한다. 폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다. 상호작용이 양방향으로 이루어지면서 사용자로부터 데이터를 수집해야 하는 상황이 자주 발생하였고, 이를 위해 고안된 것이 바로 컨트롤이다. 그리고 이 컨트롤들이 모여 있는 곳이 바로 폼이다. ... 폼 요소는 블록 레벨 요소이므로 문서 전체를 폼으로 지정하거나 한 문서 내에 여러 개의 폼을 지정할 수도 있다. actio..
웹코딩/HTML 2015. 5. 6. 17:00

본문 : 테이블(Table) 요소 - TABLE, CAPTION, TR, TH, TD, COL, COLGROUP, THEAD, TFOOT, TBODY

테이블은 사실 사용을 자제하는 요소입니다. 테이블은 접근성에 문제가 있고 이를 구현하는데 브라우저는 많은 자원을 소모하기 때문입니다. TABLE 요소 table 요소는 테이블(TABLE) 범위를 표시한다. 중간고사 성적표 이름 학과 점수 등급 홍길동 경영학과 90 A 전지현 영문학과 80 B 테이블은 행과 열에 의해 만들어진 격자가 연속적으로 이어지는 구조로 주로 2차원 데이터를 그리드 형태로 표시할 때 사용한다. 테이블을 페이지 레이아웃을 제어하기 위한 용도로 사용하는 것을 금한다. 테이블의 의미적 마크업 수준이 높지 않기 때문에 되도록 자제한다. 테이블을 렌더링할때 브라우저가 겪어야 하는 수많은 시행착오를 고려한다면 성능적으로도 비추천된다. summary 속성 summary 속성은 테이블 요약을 지정..
웹코딩/HTML 2015. 5. 4. 17:00

본문 : 내용 편집(Edit) 요소 - CITE, Q, ABBR, SUB, SUP, DEL, INS, S, ADDRESS, SMALL, TIME, WBR, SPAN, BDO, BDI, RUBY, BR

웹문서의 콘텐츠를 꾸미거나 부가적인 내용을 추가하는 요소들을 살펴봅니다. CITE 요소 cite 요소는 HTML5에서 재정의된 요소로서, 인용된 작품 제목(CITEd title of a work)을 표시한다. 이 글은 UX DESIGN에 기초하여 작성되었다. 책, 논문, 에세이, 노래, 영화, 게임등이 작품에 해당하며 내용 중에 다른 사람의 작품을 소개하는 내용이 있을 때 cite 요소를 사용한다. cite 요소는 인용을 위한 표준기술이지만 인용 여부와 상관없이 작품 제목을 표시하는 용도로 사용할 수도 있다. cite 요소는 참고 또는 출처에 관한 제목을 인용하는 것이고 q 요소는 참고 또는 출처에 있는 내용을 인용한다. cite 요소는 인라인 요소이며 브라우저 대부분은 cite 요소로 마크업된 글자를 ..
웹코딩/HTML 2015. 5. 1. 17:00

본문 : 문단(Paragraph) 요소 - EM, I, STRONG, B, MARK, DFN, CODE, SAMP, KBD, VAR

웹문서에서 문단을 구성하는 요소들에 대하여 알아봅니다. EM 요소 em 요소는 강조(EMphasis)를 표시한다. 문장 내에서 무엇을 강조하느냐에 따라 문장의 의미는 달라질 수 있다. 대화할 때 같은 내용이라도 어떤 내용에 스트레스(stress, 상대적 강도)를 주느냐에 따라 미세한 어감 차이가 생긴다는 사실을 알 수 있는데, 이러한 차이는 전체적인 의미를 변화시키기도 한다. 고양이는 귀여운 동물입니다. 문맥을 통해 의미 변화를 이끌어내기 위한 요소이다. em 요소로 지정된 텍스트는 다른 글자와 구분될 수 있도록 이탤릭체로 표현된다. I 요소 i 요소는 HTML5에서 재정의된 요소로서, 더 이상 이탤릭체를 의미하지 않으며 어떤 중요성이나 강조의 의미를 갖지 않는다. 오늘 프랑스 요리인 Foie gras을..
웹코딩/HTML 2015. 4. 30. 17:00

본문 : 링크(Link) 요소 - A

a 요소는 단순히 링크 용도의 목적뿐만 아니라 다양한 속성과 활용법을 내포하고 있습니다. 아래에서 이를 살펴봅니다. A 요소 a 요소는 앵커(Anchor, 닻)를 표시한다. 서로 다른 두 지점을 연결하려면 두 지점에 대한 정보와 연결방향이 필요하다. 두 지점에 대한 정보를 앵커라고 부른다. 링크된 텍스트는 단순히 읽기를 위한 텍스트가 아니므로 본문 글자와는 다른 형태를 보일 필요가 생겼고 이때문에 a 요소가 적용된 글자는 파란색으로 바뀌고 밑줄이 생긴다. 앵커의 종류 소스(source) 앵커 : 다른 곳에 있는 문서를 참조하기 위해 href 속성을 사용한다. 목적지(destination) 앵커 : 같은 문서 내에 있는 다른 지점으로 연결할 때는 name이나 id 속성을 사용하여 이동하고자 하는 지점을 표..
웹코딩/HTML 2015. 4. 28. 17:00

본문 : 제목(Heading) 요소 - H1~H6, HGROUP

문서의 제목을 구성하는 헤딩요소들에 대하여 알아봅니다. HTML5 스펙에서는 이를 적절히 부여하면 목차를 만들듯이 구조화된 아웃라인 생성이 가능합니다. 헤드라인 섹션을 만들고 내용을 묶었다면 적절한 제목을 부여하여 쉽고 빠른 이해를 도와야 한다. 웹 콘텐츠 제작에 필요한 제목은 아래와 같다. 문서제목(Page Title) 문서에 붙이는 제목으로 요소가 이에 해당한다. 헤딩(Heading) 구획화된 내용에 붙이는 제목으로 ~ 요소가 이에 해당한다. 레이블(Label) 컨트롤 요소에 붙이는 제목으로 요소가 이에 해당한다. 캡션(Caption) 테이블이나 이미지에 붙이는 제목으로 과 요소가 이에 해당한다. H1~H6 요소 h1, h2, h3, h4, h5, h6 요소는 헤딩(heading)을 표시한다. 사이트..
웹코딩/HTML 2015. 4. 27. 17:09

본문 : 외부 콘텐츠(Embeded) 요소 - IMG, MAP, OBJECT, EMBED, CANBAS, IFRAME, VIDEO, AUDIO

웹에서 사용하는 멀티미디어 콘텐츠들은 이미지, 비디오, 오디오, 플러그인 등 다양한 형식의 외부 콘텐츠들입니다. 이미지든 플러그인이든 외부 콘텐츠는 형식에 관계없이 object 요소로 표시할 수 있습니다. 그런데 이미지, 비디오, 오디오, 플러그인 등 외부 콘텐츠를 각각 비교해 보면 성격이 크게 다르다는 것을 알 수 있으며, 이 때문에 렌더링하는 방법도 달라질 수 밖에 없습니다.HTML에는 이러한 렌더링 작업을 브라우저가 좀 더 신속하게 준비할 수 있도록 여러가지 표준기술을 마련해 두고 있으므로 이에 맞게 외부 콘텐츠를 넣어야 합니다. 아래에서 그 방법들을 살펴봅니다.IMG 요소img 요소는 멀티미디어 형식의 콘텐츠로서, 이미지를 표시한다.브라우저는 이런 콘텐츠를 미디어 객체(media object)로 ..
웹코딩/HTML 2015. 4. 26. 18:00

본문 : 내용(Content) 요소 - P, BLOCKQUOTE, UL, OL, DL, HR, FIGURE, DIV, PRE

웹문서의 본문에 위치하는 내용 요소들에 대하여 알아봅니다. 콘텐츠를 구성하는 기본적인 요소들이며, HTML5에서 새로 추가된 속성이나 요소들도 있음에 유념합니다. P 요소 p 요소는 문단(Paragraph)을 표시한다. 도망쳐 도착한 곳에 낙원이란 없다. 문단을 통해 같은 주제의 시작과 종료 지점을 알릴 수 있다. a, input 요소 등 다양한 요소를 포함할 수 있다. BLOCKQUOTE 요소 blockquote 요소는 블록 형태의 인용문을 표시한다. For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works... 인용된 내용은 상대적으로 특별한 내용이므로..
웹코딩/HTML 2015. 4. 25. 18:00

본문 : 섹션(Section) 요소 - BODY, HEADER, NAV, SECTION, ARTICLE, MAIN, ASIDE, FOOTER

웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아봅니다. BODY 요소 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다. HEADER 요소 HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. LOGO 검색 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다. 과거에는 와 같이 사용했었다. 문서나 각 section, article 의 헤더 부분에 사용가..
웹코딩/HTML 2015. 4. 24. 04:34

HEAD(문서 머리) 영역 #3 - LINK 요소

head 요소에 포함되는 link 요소에 대하여 설명합니다. link 요소의 rel 속성은 a 요소에도 존재하며, head 영역에 속하진 않지만 같이 다루겠습니다. LINK 요소 요소는 다른 문서 또는 외부 소스와의 링크를 표시한다. 이때의 링크는 다른 문서 참조의 하이퍼링크가 아닌 외부 소스를 연결하여 좀 더 효과적으로 처리하는 것을 말한다. 대표적으로 스타일시트 문서를 별도로 관리하는 용도로 자주 쓰인다. LINK 요소의 rel 속성 rel 속성은 현재 문서와 링크된 문서와의 관계(relationship)를 지정한다. 속성값은 alternate, author, help, icon, license, next, pingback, prefetch, search, stylesheet를 가질 수 있다. rel..
웹코딩/HTML 2015. 4. 17. 05:48

HEAD(문서 머리) 영역 #2 - META 요소

head 요소에 포함되는 meta 요소에 대하여 설명합니다. 하나씩 설명을 적어넣으며 웹 문서의 완성될 모습을 그리곤 하는 곳이지요. 메타데이터(METADATA) 메타데이터는 "데이터에 관한 데이터"를 의미한다. 문서에 관한 정보로 구성되는데 어떤 정보로 구성되어야 하는가에 대한 규칙은 정해진 바 없다. 일반적으로 제공자(author), 저작권(copyright), 키워드(keyword), 언어(language)등 문서의 성격을 파악하는데 도움을 줄 수 있는 정보가 포함된다. 이러한 정보는 사람보다는 기계(브라우저, 검색엔진)를 위한 것이다. charset(문자세트) 속성 charset 속성은 문자 세트를 지정한다. 문자 세트는 사용언어를 표현하는 데 필요한 모든 문자를 모아둔 것으로, 여기에는 기호, ..
웹코딩/HTML 2015. 4. 17. 05:27

네임스페이스와 휴먼랭귀지, manifest

네임스페이스(namespace) XHTML은 HTML을 XML로 재정의한 언어이기 때문에 XML이 가지는 확장성을 이용하여 다른 XML형식의 문서 표준을 네임스페이스(xmlns)를 이용하여 지원할 수 있습니다. 중복되는 다수의 네임 스페이스 다른 문서 타입으로 부터 요소와 속성을 포함하기 원한다면, 이름이 같은 다중의 네임 스페이스는 어찌해야 하는가? 충돌할 염려가 있기 때문에 하나의 문서를 위해 이름이 같은 다수의 DTD를 결합할 수는 없습니다. 그러나 다수의 네임 스페이스는 사용할 수 있다. 네임 스페이스는 같은 문서내에 다수의 마크업 단어의 사용을 허락하기 때문입니다. 따라서 요소들에 새로운 세트를 추가하는 것은 다른 네임 스페이스를 가리키는 것만큼 쉽습니다. 예를 들어 XHTML 문서 내에 Mat..
웹코딩/HTML 2015. 4. 17. 03:22

DOCTYPE(문서형 정의) 선언

모든 웹 문서의 시작은 문서형 정의(DTD)의 선언으로부터 시작합니다. 일단 웹 사이트의 목적과 목표를 정확히 정한 후, 첫 번째로 HTML로 마크업할 것인지, XHTML, HTML5로 마크업 할지를 결정해야 합니다.또 한, 웹 사이트를 제작할 때 필요한 기능을 구현하기 위해 비추천 요소와 속성을 사용할 것인지를 고려해야 합니다. DOCTYPE 정의 및 선언(DTD)이란? 문서형 정의(DTD:Document Type Definition)은 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성등을 처리하는 기준이 되며 유효성 검사에 이용된다. 문서형 정의를 생략하는 경우, 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks mode)로 렌더링되..
웹코딩/HTML 2015. 4. 17. 03:17

HTML 기초(개요, 역사, 요소)

웹(Web) 웹(Web)은 전 세계에 흩어져 있는 정보 자원을 연결하는 네트워크(World Wide Web)을 말합니다. 이 네트워크는 컴퓨터와 인터넷을 이용하여 접속할 수 있고 거미줄(web)처럼 복잡하게 얽혀져 있습니다. 사람들이 웹을 통해 정보자원에 접근하여 이용할 수 있는 것은 다음과 같은 메커니즘을 갖고 있기 때문인데 이것을 웹의 3대 요소라고 부릅니다. URI : 정보자원의 위치를 표시하기 위한 표기법 HTTP : 위치 표시가 있는 정보자원에 접근하기 위한 통신 규약 HTML : 정보자원과 정보자원 사이를 오가기 위한 하이퍼텍스트 HTML이란? HTML(HyperText Markup Language)은 World Wide Web(www)을 위한 마크업 언어이며, 제목이나 문단, 표, 꼬리글 및..
웹코딩/HTML 2015. 4. 17. 03:16