프론트엔드 공부

HTML에는 웹 문서 구조를 나타내는 몇 가지 태그가 새로 추가되었다. 즉, 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는 데 중요한 역할을 하는 태그들이다. 이 포스팅에서는 웹 문서 구조를 위한 태그들을 살펴본다.

웹 사이트에서는 텍스트로 정보를 쉽게 전달할 수 있다. 신문 기사나 블로그, 쇼핑몰 상세 페이지 등 대부분의 사이트에서 텍스트를 사용한다. 이 포스팅에서는 텍스트를 입력할 때 기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그를 알아본다.

웹 문서에서 목록은 단순히 어떤 항목을 나열할 때뿐 아니라 특히 CSS와 함께 사용해서 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용한다. 이 포스팅에서는 목록을 자유자재로 사용하기 위하여 목록의 종류와 기본적인 특징을 알아본다.

웹 문서에서 자료를 정리할 때 자주 쓰는 태그는 표이다. 이 포스팅에서는 표를 만들 때 사용하는 여러 가지 태그를 알아본다.

웹 사이트에 적절한 이미지가 있으면 정보를 시각적으로 전해 줄 뿐 아니라 지루하지 않게 해 준다. 따라서 웹 사이트에서 이미지의 역할은 텍스트만큼 중요하다. 사이트 전체 디자인 뿐만 아니라 메뉴나 중요한 요소를 이미지로 처리하여 내용을 강조할 수 있다.

웹 사이트에서 많이 사용하는 멀티미디어 형태는 오디오와 비디오이다. HTML에서는 <audio> 태그와 <video> 태그가 새로 추가되어 멀티미디어 파일을 더 편리하게 삽입할 수 있다.

하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능이다. 단순해 보이는 이 기능에도 여러 속성을 이용해 다양하게 활용할 수 있다. 이 포스팅에서는 하이퍼링크를 사용해 다른 문서나 사이트와 연결하는 방법을 알아본다.

폼은 이미 우리가 알게 모르게 웹 문서에서 자주 사용해 왔다. 특히 사용자의 의견이나 정보를 얻으려고 폼을 사용하는 경우가 많다. 이 포스팅에서는 폼에서 사용하는 여러 항목을 살펴보기 전에, 웹에서 폼의 형태를 만들어 주는 여러 태그를 알아본다.

아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 이용해 넣는다. <input> 태그로 넣을 수 있는 요소는 아주 다양한데, 이 포스팅에서는 각 요소마다 어떤 특징이 있는지 살펴본다.

HTML5에 와서 폼 태그는 더욱 강력해졌다. 단순이 내용을 입력할 뿐만 아니라 입력란에 커서나 힌트를 표시할 수도 있고, 꼭 입력해야 하는 필드도 지정할 수 있다. 예전에는 자바스크립트로 실행한 것을 <input> 태그의 속성만으로도 처리할 수 있다.

지금까지 살펴본 <input> 태그는 폼에서 한 줄 정도로, 간단한 내용을 입력할 때 사용한다. 이 포스팅에서는 <input> 태그 외에 폼에서 사용하는 다양한 태그를 살펴본다.

Part 1 - HTML로 웹 구조 설계하기

Part 2 - CSS로 웹 페이지 꾸미기

Part 3 - 자바스크립트로 웹 동작 구현하기

Part 3 - 자바스크립트로 웹 동작 구현하기