HTML 이어서..
현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
1. 목록 만들기
HTML 목록은 ‘순서없는 목록’과 ‘순서있는 목록’으로 구분된다.
li 태그
li 태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그이다.
항목들(li 태그들)을 감싸는 태그가 무엇이냐에 따라 기호가 달라진다.
실습
2. 표(table) 만들기
표는 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(cell)이콘텐츠를 나타내는 최소 단위다.
목록과 마찬가지로, 표는 하나의 태그 안에 여러 개의 태그를 채워 넣음으로써 완성할 수 있다.
표에 자막 추가하기
caption 태그는 table 태그의 안쪽에서 제목 또는 표에 대한 설명을 나타내는 역할을 수행한다. caption 태그의 콘텐츠는 기본적으로 가운데 정렬된다.
표의 구조 명확하게 표현하기
사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러 개의 셀을 그룹으로 묶어서 관리할 수 있다.
실습
3. 입력(input)
입력 요소를 만드는 다양한 태그들 중, 대표 주자는 단연 input이다.
텍스트를 입력받는 type들
수치를 입력받는 type들
label과 함께 사용하자.
label 태그는 입력 요소에 라벨을 붙이는 역할을 한다. 이를 이용하면 웹이용자에게는 좀 더 직관적인 입력 요소를 제공할 수 있고, 코드의 가독성 및 명확성이 향상되어 코드 작성자에게도 도움이 된다.
실습
4. input 외 입력 태그들
선택지를 제공
select는 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴를 만든다.
메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다.
여러 줄의 텍스트
input 태그를 이용해 텍스트를 입력받을 때는 단 한 줄 밖에 입력받지 못한다.
반면 textarea 태그를 사용하면 여러 줄의 텍스트를 입력받을 수 있다.
텍스트 영역의 크기는 글자 수를 기반으로 결정할 수 있다.
진척도를 표시하자
progress 태그는 작업이 어느 정도 진행되었는지를 나타낼 때 사용한다.
max 속성은 작업 완료에 필요한 작업량을 지정하는 속성이며, value 속성은 화면에 표
시할 진척도를 지정하는 속성이다.
버튼(클릭!)
button 태그는 클릭을 입력으로 받는 버튼 요소를 만드는 태그로, 태그 사이의 콘텐
츠는 버튼에 표시될 텍스트 역할을 한다.
참고로 input 태그의 type속성에 “button”을 지정해도 버튼을 만들수 있는데, 둘은 외형적으로 아무런 차이가 없다.
실습
5. 양식을 만들고 입력정보를 보내기
form
입력 양식을 만들어 주는 form 태그는 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그이다.
form은 입력 요소들을 감싸며, 입력값을 서버 측으로 제출(submit) 할 수 있다.
form 태그의 안에 강의들에 서학습한 여러 입력태그들을 포함시키면, 해당 입력요소들은 양식의 개별항목으로써 역할을 수행한다.
단순히 폼요소 안에 입력요소를 포함한 것만으로는 서버에 입력값을 전송할 수 없다.
form 태그가 역할을 수행할 수 있도록 다음 속성들을 사용하자.
GET vs POST
GET
서버에 요청을 보내어 응답을 받아낸다.
서버로부터 정보를 ‘가져오겠다’는 성격의 요청이다.
POST
서버에 요청을 보내어 작업을 수행한다.
서버에 있는 데이터를 추가/수정/삭제한 후에 응답을 받아낸다.
서버의 정보를‘조작하겠다’는 성격의 요청이다.
name
코드 작성자는 폼 요소 안에 필요한 만큼의 입력 요소를 포함해 다양한 형태의 양식을
만들 수 있다. 이때 폼 요소 안에 포함되는 각 입력 요소에는 name 속성을 추가하여 각 입력 항목의 역할을 구별해 줄 수 있다.
실습
6. 의미론적인 코드
시맨틱 태그
시맨틱은 ‘의미론적인’이라는 의미이다.
시맨틱 태그는 개발자와 브라우저에게 의미를 제공한다.
대부분의 시맨틱 태그는 컨테이너 태그(span이나div)와 같이 특별한 스타일을 제공하
지 않는다. 그러나 다음과 같은 이점을 가져다 준다.
- 검색 엔진은 시맨틱 태그(태그명)를 중요한 단서로 본다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조된다.
- 코드의 가독성이 좋아진다.
- 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편하다.
7. 문서 정보 관리하기
메타(meta)
meta 태그는 HTML 문서에 대한 메타데이터를 정의한다.
메타데이터란 데이터에 대한 데이터, 즉 ‘정보’를 의미한다.
meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명,키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.
meta 태그를 사용하는 이유는 웹페이지에 대한 정보를 제공하므로 검색 엔진이 페이지를 검색할 때 참고할 수 있고, 검색 결과에도 반영할 수 있다.
- charset:문자 세트
- http-equiv:콘텐츠 속성 정보에 대한 http 헤더
- name:문서 정보
- content:메타데이터 내용
charset
문자 인코딩에 대한 요약 정보를 기입하는 속성이다. 문자 인코딩이란 한글을 표시하기
위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.
http-equiv
HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.
http-equiv가 http 관련 정보를 지정하면, content가 그에 대한 정보(값)를 지정한다.
meta 에서도 name이 쓰인다
name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.
실습
실습(form)
실습(과제)
끝맺음
첫 수업에 2회차까지 강의를 다 봤다. 복습하면서도 늪에 빠지고 있는 1인..
계속 이해해보려고 노력중입니다.
