HTML

• HTML은 여러 개의 공백도 하나로 인식하고, Enter도 하나의 공백으로 인식한다
• HyperText Markup Language
• 웹 페이지의 생김새를 묘사하는 마크업 언어 
• HTML로 작성한 코드를 웹 브라우저가 해석하여 사용자에게 보여준다
• 마크업 언어 : 여는 태그와 닫는 태그로 영역을 표시하는 언어 (XML, HTML)
• 웹 브라우저 : Chrome, IE, Safari 등 http 프로토콜을 이용하여 서버에 접속하고 웹 서버에서 받아 온 HTML 코드를 해석해주는 프로그램

 

# 블록요소(Block Elements)

- 문단 태그는 블록요소이다

- <br>을 쓰지 않아도 줄이 자동으로 바뀐다

- 새로운 영역을 지정하고 싶을 때 주로 새로운 블록 요소를 추가한다

 

# 인라인 요소(Inline Elements)

- 대표적으로 <b> 태그는 인라인 요소이다

- <br> 태그를 사용하지 않으면 줄이 바뀌지 않는다

- 새로운 영역을 지정하지 않으면서 범위를 지정할 때 사용한다

 

• 여는 태그와 닫는 태그 사이에 내용을 모두 통틀어서 HTML요소라고 부른다. br, hr처럼 닫는 태그를 생략한 태그들도 존재한다
• 속성을 통해 해당 요소에 대한 추가적인 정보를 묘사할 수 있다
• 대부분의 속성은 속성 이름과 속성 값이 짝을 이룬다
• 속성은 반드시 해당 요소의 여는 태그에 정의해야 한다
• 모든 요소는 속성을 가질 수 있다

 

# 웹 페이지를 구성하는 3가지 언어

1. html : 웹 페이지의 뼈대를 담당하는 마크업 언어
2. css : 웹 페이지의 디자인을 담당하는 스타일 시트 언어
3. javascript : 웹 페이지의 동작을 담당하는 프로그래밍 언어 (웹 브라우저가 해석한다)

 

# 웹 페이지에 이미지 넣기

• src : 출력하고자 하는 이미지의 경로 (외부 or 내부)
• alt : 해당 이미지에 대한 설명 (이미지 출력 실패 시 대신 출력됨)
• alt 속성은 화면 읽어주는 프로그램이 이미지를 읽을 때 사용하는데 이미지에는 alt속성을 넣어주는 규칙(필수 x)
• width : 해당 이미지의 너비 설정
• heigth : 해당 이미지의 높이 설정
• width/height 둘 중 하나만 수정하면 비율을 자동으로 조절한다

 

# 웹 페이지에 표 출력하기

• <table> 표의 범위를 나타내는 태그
• <tr> table row. 표에 한 행을 추가한다
• <th> table header. 행에 제목 칸을 추가한다
• <td> table data. 행에 데이터 칸을 추가한다

 

# 웹 페이지에서 동영상 재생하기

• controls : 동영상 컨트롤 패널을 추가한다
• autoplay : 자동 재생 (음소거 옵션과 함께 사용해야 한다)
• muted : 음소거
• loop : 반복 재생

 

# 사용자에게 입력받기 (input)

• input 태그를 이용해 사용자로부터 다양한 입력을 받을 수 있다
• <input type = "text"> 일반적인 텍스트 입력
• <input type = "password"> 비밀번호 입력 (보이지 않게 텍스트를 가려준다)
• <input type = "date"> 날짜 입력 (브라우저마다 생김새가 다르다)
• <input type = "checkbox"> 여러 가지 항목을 선택할 수 있는 버튼
• <input type = "radio"> 여러가지 항목 중 하나만 선택할 수 있는 버튼(다 같은 Name으로 묶여 있어야 한다, 카테고리 역할)
• <input type = "number"> 숫자 입력란
• <input type = "email"> 이메일 입력란 : 약간의 이메일 형식 검사를 한다
• <input type = "color"> 색상 선택
• <textarea></textarea> 많은 양의 텍스트를 입력하기 위한 태그
• <select></select> 드롭다운 형식으로 선택할 수 있게 한다