프론트엔드/CSS
20240116 CSS 선택자, display, 여백, position 내용 정리
빌럽스
2024. 1. 16. 17:42
CSS 선택자의 우선순위
1순위: css속성: 속성값 !important;
2순위: inline-style 속성 (요소에 직접 작성되는 style속성)
3순위: 아이디 선택자(#아이디 속성명)
4순위: 클래스 선택자(.class 속성명)
5순위: 태그 선택자 (태그명)
* 알아둬야 할 것
1) 동일한 우선 순위로 css 속성이 설정된 경우
-> 제일 마지막에 작성된 css 속성이 반영된다
2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
지정되는 css 속성이 다르면 모두 반영된다.
화면 배치 방법(형식) : display 속성
요소가 화면에 어떻게 보여질지 형식을 지정하는 속성
- block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능
- inline : 화면을 수평 분할 + width / height 속성 사용 불가능
- inline-block : inline의 수평분할 + block 크기 조정
- none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태
- flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 형식
div를 inline 요소로 바꾸거나 span을 inline으로 바꿀 수 있음
inline-block 통해 div 두개를 가로로 나열하려면, html 코드 div 사이에 엔터/띄어쓰기 없이 한줄에 있어야 함
요소의 영역(여백) 관련 속성
HTML 요소는 총 4가지의 영역으로 구성되어 있다.
1. content 영역
- 요소의 내용이 작성되는 영역
(시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨)
- "width"와 "height"는 content 영역을 지정하는 속성
2. padding 영역
- content 영역과 border 영역 사이
3. border 영역
- 요소의 테두리가 지정되는 영역
- content보다 바깥쪽에서 content를 감싸고 있음
4. margin 영역
- 다른 요소와의 간격을 나타내는 영역
배치 관련 스타일(position)
position은 요소의 위치를 지정하는 속성
position : relative; (상대적인)
- 지정된 요소 내부에 다른 요소가
상대적인 위치를 지정할 수 있도록
기준이 되게 만드는 속성.
- 내부에 작성되는 요소에 위치 지정 시
top, bottom, left, right 속성을 사용할 수 있음.
position : absolute; (절대적인)
- 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함.
position : fixed; (고정된)
- 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)
* 요소를 정가운데 배치하는 방법 예시
.center {
position: absolute;
width: 50px;
height: 50px;
background-color: pink;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
/* 공식: 네 방향에서 서로 0 지정하여 땡겨가는 상황에서
margin: auto; 적용하면 가운데 놓임 */
}