태그의 특징
- HTML에 존재하는 모든 태그들은 각자의 사이즈를 가지고 있다
- block / inline 태그 종류마다 영역(범위)가 다르다.
block페이지의 가로, 넓이 전체를 차지하는 요소inline자신의 크기만큼만 차지하는 요소
종속 태그
- 다른 태그와 함께 상호작용을 해야 작동하는 태그
- 혼자 있으면 아무것도 할 수 없는 태그
- 선택, 목록, 표 태그 등이 속한다.
select(선택)태그
- select, option등 단독으로 사용할 수 없다.
- 부모 / 자식 존속 관계, 서로 의존해야 사용 가능
- 목록 태그
HTML 문서구조
- 문서마다 양식이 모두 다르다면 해석하는 것 부터 복잡해진다
→ 따라서 개발자들은 최소한의 문서 구조를 통해 체계화 시킴
→! + enter를 누르면 기본 구조 세팅
<title></title>태그에 입력한 내용은 사이트의 좌측 상단 제목 부분에 표시<meta name="description" />태그에 입력한 내용은
구글, 네이버 등 검색엔진에서 사이트 검색 시 상세 설명 내용 부분에 표시<meta property="og:" />태그에 입력한 내용은
검색엔진이 아닌 여러 서비스들(카카오톡, 슬랙, 페이스북 등)에서 주소를 직접 입력하는 경우,
og 태그에 입력된 정보를 보여줌
💻 직접 코딩 해보자!
- DOCTYPE html → 이게 최신 버전의 HTML문법으로 작성된 것임을 알려줌
- html lang → en일 경우 chrome에서 ‘번역할까요?’ 문구가 나옴 → ko로 바꿔주자
❗️상단 파일 제목 탭에 하얀 동그라미가 떠 있을 경우 저장이 되어있지 않은 상태 → command + s 저장
👥 회원가입 만들어보기~!
input
- 폼 안에 기본적인 컨트롤을 생성
- type : 필수 속성
- text : 단일행 텍스트 입력필드
- password : 비밀번호 입력필드,감춰져서 출력된다.
- placeholder: 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시
select
- 선택목록 생성
- 셀렉트메뉴 = 드롭다운메뉴 = 풀다운메뉴
- 한 개 이상의 option요소를 포함하고 있어야 함
option
- select요소의 자식 요소로 각 항목을 정의
- disabled : boolean 속성, 옵션 요소를 비활성화
- selected: boolean 속성, 기본으로 선택된 상태
input
- 폼 안에 기본적인 컨트롤을 생성
- type : 필수 속성
- radio : 라디오 버튼 생성. 복수 선택 불가능
- checkbox : 체크박스 생성. 복수 선택 가능
- name="이름"(필수 속성) : 컨트롤의 이름 지정
type의 속성이 checkbox나 radio일 경우
name 속성이 같은 값으로 지정되면 하나의 그룹으로 취급한다.
button
- 버튼 생성
- input 요소로 생성하는 버튼과 같지만,
이미지나 텍스트등을 포함하고 있어 유연한 디자인이 가능
input
- 폼 안에 기본적인 컨트롤을 생성
- button : 범용버튼 생성, 다양한 스타일 적용하기 어려움
주석
- 줄을 선택하고 command + / 또는 control + /
- 사용하지 않는 코드, 또는 메모용도로 사용
참고
[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui
Carpe diem