html의 DOM 이란 무엇인가 ?
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다.
HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다.
모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다.
HTML 전체 적인 구조와 필수 태그에 대해서 학습하기
- <div> 태그 : 제가 생각하기에 가장 중요한 태그는 바로 이 태그 입니다. div는 네모난 박스 처럼 생겼습니다. 모든 웹(레이아웃)은 이 div로 구성됩니다. 그러므로 모든 화면 단위를 이 네모들로 구성한다 생각하고 설계 합니다.
- <input> 태그 : 또한 중요한 것은 바로 인풋 태그 입니다. 사용자의 입력을 받아서 추후 자바스크립트와 연동하여 회원가입 등 사용자의 데이터가 필요한 로직에 사용합니다.
- <a> 태그 : 또한 중요한 것은 링크 태그 입니다. 자신이 만든 모든 태그에 감쌀 수 있고, 다른 페이지로 이동하거나 혹은 자바스크립트의 함수를 실행 시킬 수 있습니다.
- <span> 태그 : 부분적으로 css 혹은 js를 적용시키기 위한 태그라 보시면 됩니다. 예를 들어 한 문장에서 한 글자의 색만 바꾸고 싶거나, 혹은 추후 서버 통신을 해서 한 문장에서 숫자를 바꾸고 싶을때 등 사용할 수 있습니다.
- <head> 태그 : 웹페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
- <a> 태그 : 웹 페이지나 외부 사이트 연결
- <svg> 태그 : SVG는 Scalable Vector Graphics라는 뜻인데, 번역하자면 확장가능한 벡터 그래픽이다. 픽셀을 이용하여 그림을 그리는 png , jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다.
- <div>와 <span>의 차이점 :
- <span>은 <div>, <p>를 포함할 수 없다.
- 코끼리를 냉장고에 넣는 것 처럼 더 작은 영역의 요소인 <span>태그가 더 큰 영역을 가진 <div>, <p> 태그를 포함하려고 하니 레이아웃이 엉망이 된다.
- 먼저 두 태그의 차이점은 줄바꿈입니다.따라서 문자 정보를 줄바꿈을 하면서 작성해야 할 경우 <div>, <p>태그를 사용해야 한다. 반면 줄바꿈 없이 사용 영역만 작성하고 다른 블록 요소 등에 포함되어야 할 경우 <span>태그와 같은 인라인 요소를 사용하면 된다.
- div 태그의 경우 자동으로 줄바꿈이 되지만 span 태그의 경우네는 자동으로 줄바꿈이 되지 않는다.
- <ul> 와<ol>의 차이점:
- <ul> 태그는 순서가 없는 목록(unorder list)을 만들 때 사용되며, <ul> 내부에 <li> 요소(list item)를 포함하여 각 항목을 표시한다.
- <ol> 태그는 순서 있는 목록을 만들기 위해서 사용되며 <ul>과 같이 내부에 <li>를 포함한다. 대부분의 브라우저에는 리스트가 숫자(기본값)로 표현되며 속성을 지정하여 변경이 가능하다.
CSS 필수 속성에 대해서 학습하기
- position : html 요소를 자신이 원하는 위치에 배정할 수 있게끔 해주는 기능입니다. 자주쓰는 하위 속성은 relative, absolute, fixed 등이 있습니다.
- flex : 레이아웃의 핵심 입니다. flex는 div들을 가로 혹은 세로로 배치할 수 있게끔 만들어 줍니다. flex 관련 알아야할 핵심 개념은 flex, flex-direction, flex-grow, flex-basis 등이 있습니다.
- grid : 레이아웃의 핵심 입니다. grid는 flex보다 더 복잡한 레이아웃을 표현 가능합니다.
- text-align : -webkit-center
- 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 vertical-align 과 동일하나 세로가 아닌 가로 방향으로 동작
/* 블록 정렬 값 (비표준 구문) */
text-align: -moz-center;
text-align: -webkit-center;
- justify-content: right;
- 메인축 방향으로 아이템을들 정렬하는 속성
- 가로축-중심축
- align-items(세로축-교차축)
- gap
- 행과 열 사이의 간격(거터)을 설정
- float:left
- 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정
- width: fit-content;
- max-content 키워드와 auto 키워드의 하이브리드 모드처럼 작동합니다.
- 가용 너비가 부족하지 않는 경우에는 max-content 키워드처럼 담고 있는 컨텐트의 최대 너비를 엘리먼트의 width 속성값으로 사용합니다. 그러나 가용 너비이 부족하다면 auto 키워드처럼 가용 너비에서 여백(margin)을 제외한 너비를 엘리먼트의 width 속성값으로 사용합니다.
- flex-direction vs flex-flow
- flex-direction
- 배치 방향 설정
- flex-flow
- flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
- flex-direction
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: wrap; */
}
- align-items:center vs place-items:center
- align-items
- 그리드 아이템(Items)들을 수직(열 축) 정렬
- place-items
- **align-items**와 **justify-items**의 단축 속성
- justify-items: 그리드 콘텐츠를 수평(행 축) 정렬
- **align-items**와 **justify-items**의 단축 속성
- align-items