분류 전체보기

[CSS] CSS 기본 문법

CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다. HTML5에서는 HTML은 정보와 구조화, CSS는..

[HTML] 웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그

웹페이지의 레이아웃을 구성하기 위해서 공간을 분할할 필요가 있다. 공간을 분할할 수 있는 태그는 div, span, table 등이 있는데, 과거에는 table 태그를 사용하여 레이아웃을 구성하기도 하였으나 모던 웹에서는 주로 div를 사용하여 레이아웃을 구성한다. 그런데 div 태그는 의미론적으로 어떠한 의미도 가지고 있지 않기 때문에 아래와 같이 HTML5에서 새롭게 추가된 시맨틱 태그를 사용하는 것이 더 나은 방법이다. tag Description header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)을 포함하는 공간을 의미한다 article 분문의 주내용이 들어가는 공간을 의미한다 footer 푸터를 의..

[HTML] form

form form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다. ... form elements (input, checkbox, radio button, submit button...) ... attribute Value Description action URL 입력 데이터(form data)가 전송될 URL 지정 method get / post 입력 데이터(form data) 전달 방식 지정 GET과 POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라..

[HTML] img, audio, video

이미지 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다. attribute Description src 이미지 파일 경로 alt 이미지 파일이 없을 경우 표시되는 문장 width 이미지의 너비 (CSS에서 지정하는 것이 일반적) height 이미지의 높이 (CSS에서 지정하는 것이 일반적) 미디어 audio audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다. attribute Description src 음악 파일 경로 preload 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay 음악 파일을 자동의 재생 개시할 것인지 지정 loop 음악을 반복할 것인지 지정 controls 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 ..

[HTML] ul, ol, li, table

목록(List) 순서없는 목록(Unordered List) ● 생김 순서없는 목록 (Unordered List) Coffee Tea Milk 순서있는 목록(Ordered List) 숫자, 알파벳 등등의 문자가 오름차순으로 생김 순서있는 목록 (Ordered List) Coffee Tea Milk type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다. Value Description “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 Coffee Tea Milk start 어트리뷰트로 리스트의 시작값을 지정할 수 있다. Coffee Tea Milk reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다. Coffe..

[HTML] Hyperlink

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다. Visit google.com! href 어트리뷰트 href(hyper reference의 약자로 '하이퍼 참조'를 의미한다.) 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를..