웹 페이지는 다음과 같은 요소들로 구성되어 있다.
- HTML: 하이퍼텍스트 구현이 가능한 마크업 언어, 뼈대
- CSS: 태그를 꾸밈
- JS: 이벤트 처리
위의 세 가지로 만드는 것을 바닐라라고 하지만 이것만으론 SPA 웹 페이지를 만들기 힘들다. 때문에 SPA를 만들고자 React, Angular, Vue 같은 다양한 라이브러리와 프레임워크를 사용한다. 그런 것들을 다루기 전에 기본이 되는 HTML, CSS, JS를 배우는 것이 8일간의 과정이다.
HTML
HTML은 element(=tag)로 되어 있으며 이는 시작 태그와 끝 태그의 쌍으로 사용된다. 태그 내부의 것은 content 혹은 tag body라고 하며, tag body에 다른 tag를 넣을 수 있다. 중첩 불가능한 태그를 쓸 땐 attribute만 넣어서 태그를 끝낸다.
- 큰 구조
- <!DOCTYPE html>: document type을 HTML5로 지정해주는 역할.
- <head>: html 페이지에 대한 메타 정보.
- <body>: 실제 표시되는 부분.
기타 태그에 관하여
- 웹 표준을 달성하고 싶다면 모든 input 양식마다 label을 달아줘야 한다.
- <p> 태그 등엔 여러 공백이 인식되지 않는다. 로 공백 넣을 수 있다.
- <a href="링크 혹은 #id">로 이동
- 순서 없는 목록 ul, 순서 있는 목록 ol
- check box 속성으로 checked만 해도 체크는 되지만, 공식적으론 checked="checked"라고 써야 한다.
- Radio는 name이 다르면 다른 그룹으로 인식한다. checkbox와 같이 사용자가 선택하는 것이기 때문에 값을 써야 한다.
- Select: 내부에 option을 써서 사용자가 고를 수 있도록 한다. size: 한번에 보여줄 개수 지정 / multiple: 복수 선택 가능 / selected: 미리 선택
- table: 틀 지정 / caption: 테이블 제목 / tr: table row / th: table header / td: table data / attribute 중 colspan: 열 병합 / attribute 중 rowspan: 행 병합 / colgroup: tr 전에 쓰며 column style을 한번에 지정
미디어
이미지
- src: 소스 경로
- alt: 대체 텍스트
- 너비와 높이를 주면 최소 픽셀을 기준으로 사이즈를 맞춘다. (관련 설정이 있을 거임)
오디오
- src: 소스 경로
- preload: 재생 전에 모두 불러올 것인가
- autoplay: 자동으로 재생할 것인가
- loop: 루프
- controls: 재생 도구를 표시할 것인가
비디오
- src: 소스 경로
- video 태그 안에 <source> 태그를 사용해 형식 차이의 문제를 해결할 수 있다. type attribute 생략 가능.
- HLS라는 기술을 이용해 영상을 더 빠르게 이용할 수 있다.
폼
입력 양식들을 감싸는 태그. (요즘에 쓰긴 하려나 싶긴 하지만...)
- action: 입력 데이터가 전송될 URL. 생략하면 데이터는 자기 자신에게 돌아온다.
- method: 입력 데이터 전달 방식 지정. (GET, POST, PUT, DELETE 외 3가지 정도/이후 서술)
내부에서 input으로 값을 입력받는다. text, password, file 등 일반적인 입력 타입 말고도 date, color 등 다양한 것이 있다.
기타 자료
꾸며진 요소를 한번에 제공하는 사이트가 있다. https://www.w3schools.com/ , bootstrap 등등.
react는 bootstrap보단 직접 만들어쓰거나 tailwind를 활용하는 추세.