본문 바로가기

프로그래밍/HTML 기초

(8)
HTML 문법 - 7 (입력 양식 태그) 입력 양식 태그 입력 양식 태그는 회원가입할 때 이름, 나이, 성별 같은 것을 입력할 때 사용하는 태그들이다. 이 태그는 무언가 정보들을 받아올 때 사용하는 태그이다. 다음과 같은 속성들을 가지고 있다. name 폼의 이름 action 입력 데이터를 처리하는 웹 프로그램 (jsp,php 와 같은) method 전송 양식 (GET, POST) type 입력 양식 모양 에서 사용가능한 태그들 입력 여러줄에 대한 입력 입력 요소에 대한 라벨링 form에 관련된 요소 요소에 대한 설명 선택 목록 생성 선택 목록에서 관련 옵션 그룹 선택 목록의 옵션 버튼 입력에 대한 미리 정의해놓은 옵션들 계산 결과 아래와 같이 입력이 가능한 박스를 하나 생성한다. 닫는 태그가 존재하지 않는다. value속성을 이용하여 초기값을..
HTML 문법 - 6 (공간 분할) 공간 분할 몇몇 태그들을 이용해서 공간을 분할해 줄 수 있다.
HTML 문법 - 5 (멀티미디어 태그) 멀티미디어 태그 멀티미디어 태그는 이미지, 오디오, 동영상과 같은 컨텐츠들을 넣을 때 사용하는 태그들이다. 이미지 삽입을 위해 사용하는 태그이다. 다음과 같은 속성들을 가진다. src 이미지의 위치 경로 title 이미지의 제목 width 이미지의 너비 height 이미지의 높이 alt 이미지의 대체 텍스트 style 이미지의 스타일 border 이미지 테두리 오디오를 삽입할 때 사용하는 태그이다. 다음과 같은 속성들을 가진다. src 오디오의 경로 controls 컨트롤바 표시 autoplay 자동재생 loop 반복재생 muted 기본적으로 음소거 설정 preload 오디오 파일 미리 다운로드 오디오 파일을 블로그에 올려놓고 링크를 가져와서 아래처럼 작성해서 오디오를 첨부할 수 있다. HTML 삽입 미..
HTML 문법 - 4 (리스트 태그, 테이블 태그) 리스트 태그 a b a b 이러한 것들을 리스트라고 한다. 각 항목별로 분류를 한다고 생각하면 될 것 같다. 이 때 분류를 도형이나 기호 혹은 a,b,c 같은 알파벳과 같이 어떤 방식으로 항목을 분류해 줄 것인지 태그를 통해 구현해줄 수 있다. 순서가 없는 리스트(Unordered List)를 뜻한다. ■나 ●와 같은 것들로 항목을 구분해준다. style 속성을 이용하여 모양을 바꿔줄 수 있다. circle,square 등의 모양을 넣을 수 있다. 그 외에도 다양한 속성을 가지고있다. 각 항목은 를 통해 구분한다. 순서가 있는 리스트(Ordered List)를 뜻한다. 1, 2, 3, 4 같은 숫자나 a, b, c 같은 알파벳 i, ii, iii 등 순서가 존재하는 것들로 항목을 구분해준다. 숫자 혹은 ..
HTML 문법 - 3 (텍스트 서식 태그, 인용 태그) 텍스트 서식 태그 태그 사이의 내용을 굵게(bold) 기울이게(italic) 작게(small) 밑줄(insert) 취소선(delete) 강조(mark) 중요표시(strong) 강조(emphasize) 위 첨자(superscript) 아래 첨자(subscript) 코드(code) 순서대로 작성시 위와 같은 형태를 띄게 된다. 와 은 둘 다 굵게 표시를 하게 되는데, 는 텍스트를 강조할 때 은 내용 자체를 강조할 때 사용한다고 한다. 인용 태그 는 짧은 인용구 이용 시 사용한다. q는 quote를 뜻한다. 인용구 이렇게 작성 시 이렇게 보이게 된다. 는 길이가 긴 인용구를 이용 시 사용한다. 는 약어를 정의할 때 사용한다. abbr은 abbreviation을 뜻한다. 는 인용구의 제목을 작성할 때 사용한다...
HTML 문법 - 2 (속성과 기본 태그들) HTML의 포함 관계는 개행으로 정리한다고 한다. HTML의 태그는 여러 속성을 갖는다. 와 같은 경우 p는 태그의 이름이고, class는 속성의 이름, value는 속성의 값, 그리고 이 뒤에 닫힌 태그가 오기 전까지 내용이 들어있다. 속성(attributes) element에 추가적인 정보 및 설정을 적용할 때 이용한다. 무조건 대문자를 이용해야 하는 것은 아니지만 보통 소문자로 작성한다. 태그에 class='value'와 같은 형태로 작성한다. 대표적으로 태그에 이용하는 경우가 있다. a라는 태그에 href라는 속성에 'link'라는 값을 넣어준 것이다. 내용 부분에 들어가는 엔터나 여러 공백은 그냥 하나의 공백으로 취급한다. 가 나 다 라 마 바 사 마 이와 같이 작성해도 실행시켜보면 이와 같이 ..
HTML 문법 - 1 (기본 태그들) HTML 작성을 할 때 맨 위에는 보통 아래와 같은 코드가 적혀있다. 읽히는 대로 문서(DOCument) 타입(TYPE)이 HTML이라고 해주는 것이라 생각하면 될 듯 하다. 웹 브라우저가 코드를 어떻게 해석해야 할 지 알려준다고 생각하면 될 것이다. 태그는 웹 페이지의 시작과 끝이라고 생각하면 된다. 이 사이에 웹 페이지를 구성하는 수많은 코드가 들어간다. 태그는 문서의 속성을 닮는다. 메타 태그나 타이틀 태그가 들어간다. 태그는 HTML의 제목을 담는 코드이다. 태그는 보통 문자 인코딩 정보를 담는다. 위와 같이 적음으로써 해당 웹 페이지의 문자 인코딩 방식을 utf-8로 지정할 수 있다. 태그 사이에는 실제로 보일 웹 페이지를 표현하기 위한 코드를 담는다. 태그는 외부 파일과 연결할 때 사용한다. ..
HTML이란? HTML은 Hyper Text Mark-up Language의 약자이다. 이름에서도 볼 수 있듯이 프로그래밍 언어가 아닌 마크업 언어라고 한다. 그래서 위와 같은 유명한 사진이 탄생하게 되었다. HTML은 웹페이지의 뼈대와 같은 역할을 한다. 확장자로써 htm, html을 갖는다. 문법 오류에 꽤나 관대한 편이다. 맨 처음에 남의 코드를 보거나 강의들을 보면서 작성하다보면 사람마다 시작점이 조금씩 다르기도 하고, 아무것도 모르고 짠 코드도 이게 돌아가네 싶은데도 잘 돌아가는 경우가 많다. 이러한 특성이 이것을 가능하게 하는 듯 하다. 동적인 화면 구성을 위해서 자바스크립트와 같은 스크립트들을 이용하고는 한다. HTML을 사용하기 위해서는 태그를 잘 활용하여야 한다. 태그는 HTML을 작성할 때 사용하는 ..