스크립트 기본 구조
헤더
<!DOCTYPE html> 이라는 헤더로 시작한다. HTML 5로 쓰인 웹 페이지라는 것을 의미한다.
<!DOCTYPE html>
<html>
...
</html>헤드(Head)
<head>
<title>나의 웹 페이지</title>
</head>- 보통 헤더에는 페이지의 정보가 들어간다. 개발자의 영역.
- Style 태그(=CSS)가 주로 헤드 안에 들어간다.
바디(Body)
<body>
<p>Hello Web Programming World!</p>
</body>- 보통 바디에는 사용자에게 보여지는 페이지의 모습이 나타난다. 유저가 보는 영역.
페이지 레이아웃(Page Layout)
CSS의 박스 속성(width, height, margin, padding)과 HTML 문법의 div 태그와 연계된다.
Block 간의 관계
동위 관계 블럭(Block;such as div, p) 간 배치는 페이지의 한 너비를 다 먹는다.
하지만 부모-자손 관계처럼 계층 구조일 경우, 부모 영역 안에서 놀게 된다.
Overflow 발생과 해결
자손들의 공간이 부모의 크기를 넘어서는 경우, 부모 밖까지도 나가버리는 overflow가 발생하게 된다.
이를 해결하기 위해서는 position : relative와 overflow 속성에 대해 알아야 한다.
Position
[[CSS 사용 방식과 문법#페이지 레이아웃||position 속성 참조]]
결론은 부모에 position: relative를 적용하고, height 속성 값을 지정해 주면 된다(크기 주기)
'Computer Science > 웹 프로그래밍' 카테고리의 다른 글
| JS에서의 객체(Object in Javascript) (0) | 2024.07.09 |
|---|---|
| HTML의 DOM 구조 (0) | 2024.07.09 |
| Javascript 문법 (0) | 2024.07.07 |
| 외부 JS 파일 HTML에 넣기 (0) | 2024.07.07 |
| HTML 문법과 태그들 (0) | 2024.06.29 |