[WEB] 1. HTML

HTML(Hyper Text Markup Language)

참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트로, 웹 페이지를 구조화하기 위한 언어이다.

Markup Language

태그 등을 이용해서 문서나 데이터의 구조를 명시하는 언어

HTML 기본 구조

html : 문서의 최상위(root) 요소

head: 문서 메타데이터 요소(문서 제목, 인코딩, 스타일, 외부 파일 로딩 등 일반적으로 브라우저에 나타나지 않는 내용)

body : 문서 본문 요소(실제 화면 구성과 관련된 내용)

head 예시로는 <title>(브라우저 상단 타이틀), <link>(외부 리소스 연결 요소(CSS 파일 등)),<style>(CSS 직접 작성) 등이 존재한다.

HTML 요소

HTML 요소는 <h1>contents</h1>와 같은 태그와 내용으로 구성되어 있다.열었으면 닫아야 하고, 모든 내용은 태그로 감싸져 있다.

각 태그별로 사용할 수 있는 속성이 다르고, 속성은 속성명과 속성값으로 이루어져 있다.

속성을 통해 태그의 부가적 정보를 설정할 수 있다. 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적 정보를 제공한다. 요소의 시작 태그에 작성하며 보통 이름-값이 하나의 쌍으로 존재한다. 태그와 상관없이 사용 가능한 속성들도 존재한다.

 

<form>은 사용자의 정보를 제출하기 위한 영역이며, <input>은 다양한 타입을 가지는 입력 데이터 유형과 위젯이 제공되는 영역이다. form에 input이 포함된다.

input label

label을 클릭하여 input 자체의 초점을 맞추거나 활성화시킬 수 있다. 사용자는 선택할 수 있는 영역이 늘어나 웹/모바일 환경에서 편히 사용할 수 있다. label은 input 입력과의 관계를 시각적 뿐만 아니라 화면 리더기에서도 label을 읽어 쉽게 내용을 확인할 수 있게 한다. input에는 id 속성을, <label>에는 for 속성을 활용하여 상호 연관을 시킨다.

<label for="agreement">개인정보 수집에 동의합니다.</label>
<input type="checkbox" name="agreement" id="agreement">

 label에서의 for=""와 input의 id가 같아야 상호 연관이 된다.

 

input 유형 : 일반적으로 입력을 받기 위해 제공되며 type으로 HTML 기본 검증 혹은 추가 속성을 활용할 수 있다.

text : 일반 텍스트 입력

password : 입력 시 값이 보이지 않고 문자를 특수기호로 표현

email : 이메일 형식이 아닌 경우 form 제출 불가

number : min, max, step 속성을 활용하여 숫자 범위 설정 가능

file : accept 속성을 활용하여 파일 타입의 지정 가능

 

label로 선택에 대한 내용을 작성하고, 항목으로 선택할 수 있는 input을 제공한다. 동일 범주에 속하는 항목은 name을 통일하고 선택된 항목 값은 value로 지정한다.

checkbox : 다중 선택

radio : 단일 선택

 

CSS(Cascading Style Sheets)

스타일을 지정하기 위한 언어로, 선택하고 스타일을 지정한다.

h1 {
color: blue;
font-size: 15px;
}

CSS 구문은 선택자를 통해 스타일을 지정할 HTML 요소를 선택한다. 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행하며, 각 쌍은 선택 요소의 속성, 속성에 부여할 값을 의미한다.

CSS는 inline, 내부 참조, 외부 참조(link file)의 방식으로 정의할 수 있다.

 

선택자 유형

• 기본 선택자
  • 전체 선택자(*), 요소(tag) 선택자
  • 클래스 선택자(.), 아이디 선택자(#), 속성 선택자
• 결합자(Combinators)
  • 자손 결합자, 자식 결합자

CSS 적용 우선순위

1. 중요도(importance) - 사용시 주의. 1순위가 된다 !important 으로 사용한다.
2. 우선 순위: inline>id>class,속성>요소