드디어 내일 집간다... 미치겠다 발 받침대 손목 받침대 노트북 거치대가 없는 이곳은... 버틸 수가 없다...
데스크탑도 샀다. 결국 사버렸다. 한 달 동안 이제 굶어야...
욕심 안 부리면 100만원대에 맞췄겠지만... 인간의 욕심은 끝이 없죠?
오늘은 html 기본 문법들을 한 번 더 정리해보려고 한다!
태그 : 태그는 규칙이다. 여는 태그, 닫는 태그로 이루어져 있다.
부모 태그, 자식 태그 : 태그는 들여쓰기를 이용해 중첩 관계로 만들 수 있다. 부모 태그 안에 자식 태그를 넣을 땐 tab을 사용해 들여쓰기를 하면 된다.
head 태그 내부
웹 문서의 인코딩 방식을 의미한다. UTF-8은 세계 표준 인코딩 방식이다.
사용자가 익스플로러를 사용한다면 엣지로 화면을 보여준다.
디바이스 종류별로 화면에 출력할 방식을 지정한다. 뷰포트가 있어야 반응형 웹 페이지를 제작할 때 모바일 화면에 결과물 출력이 가능하다.
시맨틱 태그
웹페이지를 만들기 위해서는 전체 구조를 미리 정해야 한다.
시맨틱 태그의 종류엔 8개가 있다.
| <header> | 머리말 (로고, 메뉴 포함) |
| <nav> | 메뉴 (링크 연결, 메뉴 그룹화) |
| <figure> | 동영상, 사진 등 다양한 멀티미디어를 담는 영역 (주로 메인 페이지 이미지 등) |
| <main> | 본문 컨텐츠 (중요한 콘텐츠 그룹화) |
| <aside> | 본문과 연관성 적은 외부 영역 (부가 콘텐츠 영역 지정, 팝업, 바로가기 등) |
| <section> | 웹 문서의 특정 영역 그룹화 (콘텐츠 여러 개 그룹화) |
| <article> | 기사, 개별 콘텐츠 담는 영역 (개별 콘텐츠 지정) |
| <footer> | 꼬리말 |
에디터에서는 이러함!
이제 기본적인 서식 태그를 알아보자.
| 종류 | 구분 | 설명 | |
| h1-h6 | 블록 |
제목 | 숫자가 작은 게 중요도 높음 |
| p | 문단 | 글을 묶어줌 | |
| div | 그룹화 | 콘텐츠를 묶어줌 | |
| strong, em | 인라인 | 강조 | 특정 문장, 단어 강조 (strong은 굵게, em은 기울어져서) |
| a | 링크 | 링크 설정 (+target 속성) | |
| span | 그룹화 | 인라인 요소 묶어줌 | |
| img | 이미지 | 이미지 삽입 (alt 속성 필요, 닫는 태그 없음) | |
| br | 줄바꿈 | 강제로 줄 바꿔줌 (다만, 신중하게 사용해야) | |
그 다음은 목록 태그다.
부모태그 ul을 먼저 써준 뒤,자식 태그 li 태그를 써줘야 한다.
처음엔 왜 ul 태그를 써야 하는지 이해를 못했었는데... 껄껄
참고로 ul 태그는 순서가 없는 목록을 만들 때 써야 한다!
순서가 있는 목록은 ol태그다.
이번엔 정의형 목록을 만들어 보는데.
사실 강의에서 잘 나오지 않아서 생소한 태그이기도 하다.
부모태그는 di이고, 각각 자식인 dt 태그에는 정의할 제목을, dd 태그에는 정의할 내용을 입력한다.
위 목록 태그와 다른 점이 있다면, 정의한 내용은 자동으로 들여쓰기가 된다.
이번엔 목록 태그를 중첩해 사용해본다.
먼저 ul 태그로 전체를 묶은 뒤, li 태그로 상위 목록을 만든다.
그리고 li 태그 내부에 다시 ul, li 태그를 만들어 하위 목록을 만든다.
이번엔 폼 태그!
먼저, 사용자가 입력한 정보를 받아와야 한다.
받아오는 역할은 input 태그다. input type을 다르게 지정해 다양한 입력 형태로 만들 수 있다.
| text | 말 그대로 텍스트를 받아온다. 이때 lable 태그를 사용해 어떤 내용을 입력받을지 명시한다. (lable 태그는 설명 태그라고 보면 된다.) |
| password | 비밀번호를 입력받을 수 있다. 입력한 정보가 안 보이게 바뀐다. |
| checkbox | 체크 박스를 선택할 수 있다. value 속성을 추가해 선택한 value 값을 서버로 전송 가능하다. * 여러 개 선택 가능! |
| radio | 여러 데이터 중 하나만 선택 가능!, 각 태그마다 name 값을 똑같이 입력해주면 된다. |
| file | 특정 파일을 첨부할 수 있게 창이 뜬다. |
| color | 특정 색상 값을 선택할 수 있도록 패널이 뜬다. |
| date | 날짜를 선택할 수 있다. |
| submit reset |
전송 버튼과 초기화 버튼이다. 버튼 이름을 다르게 지정하고 싶다면 value = '텍스트' 속성을 추가한다. |
select 태그
말 그대로 선택시 메뉴를 줄줄이 출력해 항목을 선택할 수 있게 도와준다.
선택할 요소는 option 태그로 삽입한다.
textarea 태그
텍스트를 여러 줄 입력 받을 수 있도록 해주는 태그다.
input type = 'text'가 간단한 텍스트를 입력 받을 수 있게 해준다면, textarea는 긴 문장의 텍스트를 입력받을 수 있도록 해준다.
form 태그
여러 가지 폼 요소를 그룹으로 만들어 백엔드 영역 위치로 전송해준다.
반드시 action, method 속성을 지정해줘야 하는데,
action은 특정 주소값, 파일 위치
method는 입력값의 전송 방식을 지정해준다.
비디오, 오디오 태그
audio 태그를 이용하면 오디오 파일을 삽입할 수 있다.
적용할 수 있는 속성은 4개다.
controls : 오디오 파일 재생 컨트롤 패널 생성
autoplay : 자동 재생
loop : 무한 반복
preload : 파일 재생 전 파일을 미리 불러옴
비디오 태그는 video 태그를 사용하는데, 속성은 오디오 태그와 같다.
2개가 더 추가되어 있긴 하다.
muted : 소리가 나지 않도록 함
poster : 영상 초기 화면에 보여줄 이미지 지정
이걸로 기본 문법은 다 정리했다.
아니 어제는 api 정리하다 갑자기 html 문법을 정리...? 한다고 하면 할 말이 없읍니다.
웹 기초 특강을 오늘 듣기도 했고... 그 내용을 정리하고 싶기도 했는데
정말 손목이 나갈 것 같아서 집에 가서 하기로 한다.