인터랙티브 웹 개발 - 바 영역 이론

CSS에서 display 부분을 배워볼 것이다.

 

" 요소를 어떻게 배치할 지 "

" 자식 요소를 어떻게 배치할 지 "

 

바깥쪽	안쪽
block	flex
inline	grid
	table
	flow-root
	flow
	ruby

 

1. display : 바깥쪽 영역

 

(1) block 

• 한 줄을 차지
• width, height, margi, padding 지정 가능
• <div>, <h1-6>, <header>등

(2) inline

• 컨텐츠 영역 만큼만 차지
• width, height 지정 붉단으
• margin 좌우에만 적용
• padding - 시각적 영역 (상하좌우), 실제영역 차지 (좌우) 
• <span>, <a>, <button> 등 

 

2. DOM : Document Object Model

1. 웹 문서의 객체모델 인터페이스
2. 자바스크립트 등에 의해 수정되기 위해 조작 가능한 API 제공
3. W3C 표준
4. window, document object로 접근 가능 

 

(1) document

document.querySelector(cssSelectors): Element	주어진 CSS 선택자를 만족하는 첫 번째 요소를 반환
document.getElementById(id): Element	주어진 id를 가진 요소를 반환
document.addEventListener(type, listener, options)	특정 이벤트 타입에 대해 이벤트 리스너를 등록

 

(2) element

element.setAttribute(name, value)	요소에 새로운 속성을 추가하거나, 기존 속성의 값을 변경 name : 문자열, 속성의 이름 value : 문자열, 속성의 값
element.attribute	요소의 속성을 나타내며, 특정 속성에 접근하거나 변경할 수 있음. 예로 id, class, disabled 속성들이 있음

 

 

3. Event 

" 시스템에서 일어나는 사건 또는 발생 "

• 클릭하거나
• 마우스를 누르거나
• 마우스를 떼거나
• 키보를 누르거나
• 키보드 키를 때거나
• 창의 크기를 조절하거나
• form이 제출되거나 
• 비디오가 재생되거나
• 멈추거나
• 끝나거나

-> EventListener Listened !

 

 

4. overflow : 컨테이너 요소의 콘텐츠가 그 요소의 크기를 초과할 때 어떻게 표시될지를 결정

 

※ 의미있게 동작하려면 컨테이너의 높이를 설정하거나, white-space를 nowrap으로 설정해준다.

 

overflow: visible;	기본값으로, 컨테이너의 콘텐츠가 초과하더라도 잘리지 않고 그대로 표시
overflow: hidden;	초과한 콘텐츠는 잘리고 보이지 않음
overflow: clip;	초과한 콘텐츠는 잘리고 보이지 않지만, 스크롤바는 표시되지 않습니다. hidden과 비슷하지만 더 명확하게 잘림
overflow: scroll;	초과한 콘텐츠가 있을 때 스크롤바가 항상 표시
overflow: auto;	초과한 콘텐츠가 있을 때만 스크롤바가 표시