자주 쓰는 CSS 정리 / CSS 문법

2023-04-12

자주 쓰는 CSS

CSS 선택자 및 의사 클래스

https://0songha0.github.io/web-dev/2023-04-15-1

요소 클릭 이벤트 비활성화

pointer-events: none;

요소에서 클릭, 드래그, 호버 등 모든 커서 옵션을 비활성화합니다.

요소 클릭 이벤트 활성화

pointer-events: auto;

none으로 비활성화 했던 클릭 이벤트를 다시 활성화합니다.

div 테두리 모서리 둥글게 처리

border-radius: 10px;

줄바꿈 표시

white-space: pre;

태그 내 텍스트의 개행문자(\n) 등 줄바꿈을 있는 그대로 적용합니다.

CSS 삼각형 만들기

width: 0;
height: 0;
border-bottom: solid #000000;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

div에 위와 같은 스타일을 주면 위로 향하는 작고 검은 사각형(▲)이 됩니다.
네모를 대각선으로 나누어, Bottom에만 색상을 주고 나머지는 투명으로 설정하는 원리입니다.

배경 이미지 설정

background-image: url("https://이미지경로/파일명.png");
background-position: center;
background-repeat: no-repeat;

배경 이미지를 반복하지 않고, 가운데 정렬하여 삽입합니다.

세로 스크롤 생성

max-height: 50px;
overflow-y: auto;

현재 영역의 크기가 max-height를 벗어난 경우 자동으로 세로(y축)에 스크롤을 생성합니다.

가로, 세로 스크롤 생성

overflow: auto;

스크롤바 디자인 변경

요소::-webkit-scrollbar { // 스크롤바 영역 디자인 변경
    width: 10px;
    // 가로 사이즈를 설정해줘야 커스텀 디자인이 적용됩니다.
    // 사이즈 설정 안하면 모바일에서 사이즈가 작게 나올 수 있습니다.
    // width는 세로 스크롤의 너비, height는 가로 스크롤의 높이입니다.
}

요소::-webkit-scrollbar-thumb { // 스크롤바 막대 디자인 변경
    background: rgba(51,61,75,0.16) !important; // 회색 계열 색상을 부여합니다.
    border-radius: 100px; // 위, 아래 모서리가 둥근 막대로 만듭니다.
}

요소::-webkit-scrollbar-track { // 스크롤바 영역 배경 디자인 변경
    background: rgba(33, 122, 244, .1);
    border-radius: 100px;
}

딱딱한 스크롤바 디자인을 CSS로 커스텀하여 이쁘게 바꿀 수 있습니다.

자식 요소 정렬 설정

display: flex; // 부모 컨테이너에 flex를 적용합니다.
flex-direction: row; // 자식 요소들을 가로로 정렬합니다. (기본값)
flex-direction: column; // 자식 요소들을 세로로 정렬합니다.

display: flex; 시 자식 요소들은 부모 컨테이너의 높이를 가지고 본인의 width 만큼 차지하며 가로 정렬됩니다.

text input 설정

color: #ffffff; // 텍스트 색을 흰색으로 설정합니다.
background-color: transparent; // 배경 색을 투명으로 설정합니다.
border-color: transparent; // 배경 테두리 색을 투명으로 설정합니다.
font-size: 30px; // 텍스트 크기를 30px로 설정합니다.
text-align: center; // 텍스트를 가운데 정렬합니다.

요소에 마우스 오버 시 커서 모양 변경

cursor: default; // 커서를 기본 모양으로 변경합니다.
cursor: pointer; // 커서를 클릭 가능한 손 모양으로 변경합니다.
cursor: wait; // 커서를 로딩중 모양으로 변경합니다.
cursor: move; // 커서를 이동 가능한 화살표 모양으로 변경합니다.
cursor: url('https://URL/폴더경로/파일명.확장자'), auto; // 커서를 커스텀 이미지로 변경합니다. 128px 이하 작은 이미지만 가능합니다.
cursor: url('https://URL/폴더경로/파일명.확장자') 20 30, auto; // 커서의 좌측 위가 아니라, 중앙에서 클릭할 수 있도록 합니다.

좌측 테두리 설정

border-left: 1px solid #000000;

좌측에만 1px 두께의 검은색 실선 테두리를 적용합니다.

커스텀 좌측 테두리 설정

.spanClass명 {
    border-left: 1px solid #dde3e8;
    border-left-width: medium;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
    margin-left: 10px;
    margin-bottom: 3px;
}

빈 span에 중간 두께의 회색 실선 테두리 CSS를 입히면 텍스트 구분자로 쓸 수 있습니다.

모달 팝업 뒤 어둡게 설정

width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);

모달 팝업 div를 감싸고 있는 div에 투명한 검은색을 입히면 됩니다.

position:absolute 가운데 정렬

width: 100px;
position: absolute;
left: 50% !important;
transform: translate(-50%, 0);

부모의 가로 50% 만큼 좌측에서 이동하고, 요소의 가로만큼 50% 반대로 이동하여 가운데 정렬합니다.

책 넘김 하려는 효과

transform-origin: left;
transform: rotateX(-10deg) rotateY(15deg);
animation: page 1s;

다음 페이지 버튼 함수에서 현재 페이지 이미지에 위 CSS의 클래스를 부여해주면 됩니다.

들여쓰기 탭 사이즈 조정

code {
  tab-size: 4;
}

<code> 태그 내용의 들여쓰기 탭 사이즈를 CSS로 조정하는 예시입니다.

공통 CSS 적용

공통 CSS 파일 생성

@charset "UTF-8";

// CSS 예시
.loading-cnt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

위와 같이, 유니코드 언어셋을 적용한 .css 파일을 생성합니다.

공통 CSS 파일 적용

<link rel="stylesheet" href="${pageContext.request.contextPath}/inc/css/파일명.css">

HTML 헤더 안, 스크립트 위쪽에 공통 CSS 파일 적용 코드를 작성합니다.
경로를 /부터 시작하면, src/main/webapp 내부에 css 폴더를 만들고 파일을 위치시키면 됩니다.

미디어쿼리 적용

미디어쿼리 적용 CSS 예시

/* 모든 해상도 CSS 적용 */
.floating-banner {
  position: absolute;
  top: 58px;
  right: -125px;
  z-index: 10;
}

/* PC 해상도가 아니면 CSS 적용 */
@media screen and (max-width: 1530px) {
  .floating-banner {
    display: none;
  }
}

/* 태블릿 이하 해상도에만 CSS 적용 */
@media screen and (max-width: 1023px) {
  .floating-top {
    width: 38px;
    height: 38px;
    background-size: 10px 14px;
  }

  .error-cnt, .loading-cnt {
    width: 100%;
    padding: 0 20px;
  }
}

/* 모바일 이하 해상도에만 CSS 적용 */
@media screen and (max-width: 767px) {
  [class^=tablet-] {
    display: none !important;
  }
  [class^=mobile-only-] {
    display: block !important;
  }
}

/* 프린트(인쇄) 될 때만 CSS 적용 */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body {
    width: 310mm;
    height: 397mm;
  }
  .pop-wrap.full-type {
    position: relative;
  }
}