티스토리 뷰
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 태그 선택 가능
'JAVA' 카테고리의 다른 글
| 반응형 웹사이트 제작 (미디어쿼리) (0) | 2023.10.19 |
|---|---|
| 움직이는 웹사이트 제작(Transition, Animation) (0) | 2023.10.17 |
| CSS 주요 속성 (1) | 2023.10.07 |
| 캐스케이딩 (0) | 2023.10.07 |
| CSS 속성의 상속 (0) | 2023.10.07 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 머신러닝
- 코딩
- plot
- 보안
- 데이터
- 자바
- mysql
- 코드
- 코테
- sql
- 그래프
- 파이썬
- 데이터분석
- 클래스
- Programming
- 스마트워치
- 영어
- SW
- 코딩테스트
- 경제
- 경제신문
- 프로그래머스
- 함수
- R
- 개발
- 금리
- python
- 프로그래밍
- 모듈
- 영어회화
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
글 보관함