element 검색 결과

해당 글 15건

본문 : 상호작용(Interactive) 요소 - DETAILS, SUMMARY, MENU, COMMAND

사용자들과 상호작용하기 위해서 준비된 요소들에 대해 설명합니다. 인터랙티브 컨트롤 인터랙티브 컨트롤(interactive control)은 사용자가 입력한 데이터를 브라우저나 서버로 전송하기 위한 도구다. 과거에는 데이터 전송을 위해 폼이나 자바스크립트를 이용해야만 했다. 웹이 점점 애플리케이션화 되면서 웹 문서 어느 곳에서든 데이터 전송이 이루어질 필요가 있었고, 이를 위해 새롭게 details, summary, command, menu 요소가 제안되었다. DETAILS 요소 details 요소는 HTML5에 새롭게 추가된 요소로서 세부사항(DETAILS)을 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)을 선택하면 숨겨져 있던 세부사항이 나타나도록 ..
웹코딩/HTML 2015. 5. 11. 17:00

스크립트(Script) 요소 - SCRIPT, NOSCRIPT

흔히 자바스크립트를 삽입할때 스크립트 요소를 사용합니다. 이에 대해 알아보며 곁들여 noscript 사용법도 알아봅니다. SCRIPT 요소 script 요소는 클라이언트 사이드 스크립트와 같은 프로그래밍 코드를 HTML 문서 내에 직접 작성하거나 불러올때 사용한다. script 요소는 문서 내 어디든 놓일 수 있으며, 그 횟수도 제한이 없다. 문서의 머리에 script 요소를 두면 로딩과 함께 스크립트가 실행된다. 문서 전체에 걸쳐 기능을 제어해야 하거나 문서 본문을 처리하기 전에 스크립트가 실행될 필요가 있을때 문서의 머리에 둔다. 문서의 직전에 script 요소를 두게 되면 문서의 마지막에 스크립트가 실행된다. 이는 접속자들의 화면에 HTML의 구조와 CSS의 디자인을 먼저 적용하고 렌더링되기 때문에..
웹코딩/HTML 2015. 5. 11. 12:00

본문 : 폼(Form) 요소 #3 - TEXTAREA, SELECT, OPTION, OPTGROUP, DATALIST, BUTTON, KEYGEN, METER, PROGRESS, OUTPUT

폼 요소를 소개하는 마지막 장입니다. HTML5에서 추가된 요소들도 포함되어 있지만 브라우저 지원사항이 제각각임에 유념하세요. TEXTAREA 요소 textarea 요소는 텍스트 영역(TEXT AREA)을 표시한다. 텍스트 필드가 한 줄짜리 입력 컨트롤이라면 텍스트 영역은 여러 줄짜리 입력 컨트롤이다. ... cols 속성 cols 속성은 세로 행에 입력될 수 있는 글자 수를 지정한다. 이것은 글자 수에 의해 텍스트 영역의 넓이를 지정하는 것인데 기본값은 20이다. 만약 20자를 넘게 되면 텍스트 영역이 커지는 것이 아니라 스크롤바가 생기면서 원래 저장되었던 텍스트 영역의 넓이는 그대로 유지된다. maxlength 속성 maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 지정한다. 이 속성..
웹코딩/HTML 2015. 5. 8. 17:00

본문 : 폼(Form) 요소 #2 - LABEL, INPUT

폼에서 가장 많이 사용되는 label과 input 요소의 다양한 속성들에 대하여 알아봅니다. LABEL 요소 label 요소는 컨트롤 레이블(LABEL)을 표시한다. 레이블은 항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말한다. 시각적으로만 그 용도가 표현되므로 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 label 요소를 사용해야 한다. 이름: for 속성 for 속성은 레이블과 관련된 컨트롤을 지정한다. 컨트롤에 레이블을 제공하는 방법은 크게 암시적 방법과 명시적 방법으로 나뉜다. 암시적 방법 : 이 방법은 label 요소 내에 컨트롤을 둔다. 즉 label 요소 내에 있는 컨트롤은 굳이 밝히지 않아도 관련 있다고 보는 것이다. 명시적 방법 : 이 방법은 for 속성을 이용하여 ..
웹코딩/HTML 2015. 5. 7. 17:00

본문 : 폼(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

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