JAVA
웹사이트 레이아웃
코린이도이
2023. 10. 8. 13:43
margin과 padding의 차이
- margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦
- padding-left: border 안쪽에서 왼쪽에 여백을 만듦, 공간이 여백을 포함한 크기도 변경되는 점 유의
- top right bottom left 순서로 한 줄에 작성 가능
Block 요소와 Inline 요소
- block 요소
- <p> 태그가 대표적
- 줄바꿈 현상이 나타남
- width / height 값 사용 가능 -> 공간 만들기 가능
- margin과 padding 값 사용 가능 -> 상하 배치 작업 가능
- Inline 요소
- 줄바꿈 현상 없음
- width / height 값 적용 불가
- margin / padding / bottom 값 적용 불가 -> 좌우 배치 작업은 가능
마진 병합 현상
- 형제지간의 마진 병합: margin-bottom과 bottom-top 중 숫자가 큰 값으로 적용
- 부모 자식간의 마진 병합: 자식인 <article> 뿐만 아니라 부모인 <main>에도 영향을 미침
레이아웃에 영향을 미치는 속성
- display: Block과 Inline 요소의 성격을 바꿀 때 사용, inline-block을 사용하면 두 요소의 성격을 모두 가짐
- float
- 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
- 이름 그대로 선택자를 띄워 새로운 레이어 층을 만드는 것
- 레이어가 겹쳐지지 않는 상태로 왼쪽에서부터 정렬시키고 싶은 경우 float: left;을 연속적으로 입력
- clear: float에 대한 속성을 제어하고자 할 때
- 브라우저와 공간 사이의 공백 제거하기
- <html>과 <body>태그는 margin과 padding값을 가지므로 초기화를 해주어야 함
- 혹은 *로 모든 html 태그 선택 가능