공부/HTML, CSS

[HTML, CSS] 웹사이트 레이아웃에 영향을 미치는 요소

yaebb_82 2022. 9. 13.

1. 박스 모델

박스 모델 구조 (4가지)

- margin

- border

- padding

- content

(참고) https://www.w3schools.com/css/css_boxmodel.asp

margin과 padding 차이

- border 기준 : 밖 = margin / 안 = padding

margin과 padding 작성 방법

- margin/padding: top right bottom left ; 순으로 한 줄로 작성 O (시계방향)

margin: 14px;  /* 상하좌우 모두 다 적용 */

margin: 5% auto;  /* 상하  좌우 */

margin: 10px auto 30px;  /* 상  좌우  하 */

margin: 10% 5px 20% 2em;  /*  상 좌 하 우 */

2. Block 요소와 Inline 요소

(이전 글 참고)

3. 마진 병합 현상

- 형제지간 마진 병합 (같은 level 상)

: box1 = margin-bottom: 150px / box2 = margin-top:100px 을 사용하게 되면 → box1과 box2 사이는 ~~250px?~~

: margin-bottom과 margin-top 중 큰 값 적용 (150px 적용)

: 둘 다 100px 이면, 100px 적용

- 부모 자식간 마진 병합

: 자식 속성으로 margin-top: 100px을 주면 → ~~자식만 밑으로 내려갈까?~~

: 자식 뿐만 아니라 부모도 같이 영향을 받음 (같이 margin-top 적용됨)

cf.) 해결방법

→ position: absolute; 작성

4. 레이아웃에 영향을 미치는 속성

1. display : block / inline 성격 change

- p {display: inline;} : block → inline 변경

- a {display: block;} : inline → block 변경

- a {display: inline-block;} : inline → inline-block(inline + block) 변경

cf.) inline-block은 내비게이션 버튼 만들 때 많이 사용된다.

2. float : 정렬 : 띄워서 새로운 레이어층 만드는 것

- float: left : 왼쪽 정렬

- float: right : 오른쪽 정렬

- 겹쳐지지 않고 계속 왼쪽 정렬 시키고 싶을 때 → float: left; 를 계속 써주기

+) none / inline-end, inline-start (inline-end, -start 는 글자처럼 취급 생각해면 이해 easy)

cf.) 주의점!

: 부모 크기가 자식과 같거나 커야 적용됨

: 자식의 크기가 더 크게 되면 레이아웃이 틀어짐

3. clear : float 속성 제어

- float 사용 시 자동으로 사용

- float을 마지막으로 사용한 태그의 그 다음 태그에 clear 사용

- float를 꺼준다고 생각

- clear: left / right / both 존재 (both 많이 사용!)

+ 브라우저와 공간 사이의 공백 제거하기

<!-- 방법1 -->
<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>

<!-- 방법2 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

- 방법1 : <html>, <body> 태그를 margin, padding 0으로 초기화

- 방법2 : * 를사용해서 전체를 margin, padding 0으로 초기화

cf.) 가운데 정렬

1) margin

margin: auto;
margin: 0 auto;

width: 300px;  /* width 값 필요! */

- Block 요소 가운데 정렬 (수평)

2) text-align

text-align: center;

- 부모 요소에 해당 속성을 주면 → 자식 요소 중 Inline 요소 가운데 정렬 (수평)

3) absolute + translate

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

- position: absolute; = 부모 요소를 기준으로 잡기

- top: 50%; left: 50%; = 부모 요소를 기준으로 위쪽, 왼쪽 50%씩 이동

- transform: translate(-50%, -50%); = 요소를 정 가운데로 조정

(요소의 기준이 왼쪽 꼭짓점이기 때문에, 정 가운데로 맞추기 위해서는 별도로 translate나 margin을 사용하여 조정한다.)

4) text-align + line-height

text-align: center;
line-height: 100px;  /* 부모 요소의 높이로 설정 */

- 글자 가운데 정렬

(단, 한 줄인 글에서만 사용해야 함)

5) flex + justify-content

display: flex;
justify-content: center;

- flex 요소의 가운데 정렬 (수평)

6) flex + align-items

display: flex;
align-items: center;

- flex 요소의 가운데 정렬 (수직)

저작자표시

'공부 > HTML, CSS' 카테고리의 다른 글

[HTML, CSS] Flex (0)	2022.10.01
[HTML, CSS] 모바일에 대응되는 웹사이트 (0)	2022.09.16
[HTML, CSS] Transform, Transition, Animation (0)	2022.09.16
[HTML, CSS] HTML, CSS 태그 살펴보기 (0)	2022.09.15
[HTML, CSS] 웹 사이트의 정보와 디자인 (0)	2022.09.13