: HTML, CSS, JavaScript는 웹을 구성하는 3대 핵심 언어이다.
HTML vs HTTP
- HTML은 웹 문서를 의미.
- HTTP는 통신 규약을 의미.
DOM
HTML, XML 문서의 프로그래밍 인터페이스.
DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
-> 문서 구조, 스타일, 내용 등을 변경 가능하게 함.
- nodes와 objects로 문서를 표현한다.
- 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결 시켜주는 역할을 담당한다.
DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
1. div
Division의 약자로 웹사이트의 레이아웃을 만들 때 주로 사용. div는 웹페이지에서 논리적 구분을 정의하는 태그
1) style은 <div> 태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있음.
2) width는 <div>의 가로 크기. px(픽셀), %(비율)단위 가능
3) height는 <div>의 세로 크기. px(픽셀), %(비율)단위 가능
4) border은 <div>의 테두리의 굵기를 정해줌. 숫자가 클수록 굵기가 굵음.
5) background-color은 <div> 태그의 배경 색상을 정하는 속성.
6) float은 div의 정렬(좌,우)을 하는 속성. 가운데 정렬은 안됨.
7) margin은 div의 정렬 기준 끝에서부터 여백을 주는 속성.
2. img
문서에 이미지를 넣는 태그.
-
src특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정. -
alt특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가alt의 값을 읽어 사용자에게 이미지를 설명, 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌. 접근성 측면에선 필수!
3. input
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
입력 유형과 특성의 다양한 조합 가능성이 존재
- 가능한 유형
-button: 기본 행동을 가지지 않으며 value를 레이블로 사용하는 푸시 버튼.
-checkbox: 단일 값을 선택하거나 선택 해제할 수 있는 체크박스
-color: 색을 지정할 수 있는 컨트롤.
이외에, date, email, file, image, month, number, password, reset, search, tel, text 등 다양한 유형이 존재.
4. a
a(앵커 요소)는 href 특성을 통해 하이퍼링크를 만든다.
<a>안의 콘텐츠는 링크 목적지의 설명을 나타내야 하는데, 이 요소는 전역 특성을 포함.
5. span
구문 콘텐츠를 위한 통용 인라인 컨테이너, 본질적으로는 아무것도 아님.
스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용함. 적절한 의미를 가진 다른 요소가 없을 때에만 사용.
<span>은 <div>와 비슷한데, <div>는 블록 레벨 요소, <span>은 인라인 요소.
- id
- id 속성은 태그에 유일한 이름을 붙이고 싶을 때 쓴다.
- id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능.
- 우선 적용이 되며, 중복이 불가. - class
- 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 쓴다.
- 반복적으로 쓰이는 유형들을 동일한 class로 분류
- 중복 가능
6. Markup Language
문서나 데이터의 구조를 명기하는 언어의 한 가지
1) 태그
- 문서의 구조를 표현하는 역할
- 문서의 골격에 해당하는 부분을 작성
- 일반적으로는 데이터를 기술하는 정도로만 사용되기 때문에 프로그래밍 언어와는 구분됨
계속 추가할 예정)
