프론트엔드/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;  적용하면 가운데 놓임 */
}