[CSS] 스타일시트 Tips 101

CSS 스타일링 101
지금 시작합니다.

1. Box Model 이해하기

  margin, border, padding, content를 명확히 구분.

div {
  margin: 10px;
  border: 5px solid black;
  padding: 20px;
  width: 200px;
}

2. CSS Resets 사용하기

  기본 스타일을 재설정하여 일관성 있는 디자인 유지

/* reset.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. Flexbox 배우기

  레이아웃을 쉽게 잡기 위한 유연한 박스 모델

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

4. Grid Layout 사용하기

  복잡한 레이아웃을 간단하게 구현.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

5. 반응형 디자인

  media queries를 사용해 다양한 화면 크기에 대응.

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

6. Custom Properties (CSS Variables)

  변수 사용으로 코드 재사용성 증가

:root {
  --main-color: #3498db;
}
.element {
  color: var(--main-color);
}

7. Animations 사용하기

  @keyframes와 animation 속성으로 동적인 요소 만들기

@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slidein 1s ease-out;
}

8. Transitions

  transition 속성으로 부드러운 상태 전환 구현

.element {
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: #3498db;
}

9. Pseudo-classes & Pseudo-elements

  :hover, :before, :after 등으로 인터랙티브한 요소 추가.

.element:hover {
  color: red;
}

.element::before {
  content: ">> ";
  color: green;
}

10. 브라우저 호환성 체크

  각 브라우저에서 스타일이 동일하게 보이는지 확인

11. CSS Modules

  클래스 이름 충돌을 방지하기 위한 방법

/* styles.module.css */
.container {
  background-color: #f0f0f0;
}

12. Preprocessors 사용하기 (Sass 예시)

  Sass, LESS 등을 사용해 코드 효율성 증대

$primary-color: #3498db;

.element {
  color: $primary-color;
}

13. BEM Methodology

  블록, 엘리먼트, 모디파이어 명명 규칙

/* BEM Naming Convention */
.block {
  /* Styles */
}

.block__element {
  /* Styles */
}

.block--modifier {
  /* Styles */
}

14. 컴포넌트 기반 스타일링

  각각의 컴포넌트를 독립적으로 스타일링

/* 각 컴포넌트별로 분리된 스타일링 */
.component {
  background-color: #f0f0f0;
  padding: 10px;
}

15. 가독성 있는 코드 작성

  들여쓰기, 주석 등으로 코드 가독성 향상

/* 주석과 들여쓰기 사용 */
.element {
  color: #333;
  padding: 10px; /* Padding inside the element */
}

16. Reset vs Normalize

  두 방법의 차이점을 이해하고 상황에 맞게 선택

/* Normalize.css example */
@import-normalize; /* Import from npm or CDN */

17. Typography 이해하기

  폰트 선택, 크기, 행간 등 텍스트 스타일링

body {
  font-family: 'Arial, sans-serif';
  font-size: 16px;
  line-height: 1.5;
}

18. 웹 접근성 (a11y)

  모두가 접근할 수 있는 웹을 만들기 위한 스타일링

a:focus {
  outline: 2px solid #3498db;
}

19. Cascading and Specificity

  스타일 우선순위 이해

/* Specificity example */
#idSelector .classSelector {
  color: red;
}

20. 이동 요소의 고정

  position: sticky를 활용해 특정 요소를 화면에 고정

.sticky-element {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
}

21. 이미지 반응형 처리

  width: 100%와 height: auto를 사용해 이미지 크기 조절.

img {
  width: 100%;
  height: auto;
}

22. Viewport Units 사용하기

  vw, vh 단위로 화면에 맞게 요소 크기 설정

.container {
  width: 80vw;
  height: 50vh;
}

23. 백그라운드 이미지 최적화

  background-size, background-position 등을 사용해 배경 이미지 조정

.background {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

24. SVG 스타일링

  CSS를 사용해 SVG 요소의 색상, 크기 등을 변경

svg {
  width: 50px;
  height: 50px;
  fill: #3498db;
}

25. CSS Grid Template Areas

  그리드 레이아웃을 간편하게 설정

.container {
  display: grid;
  grid-template-areas: 
    'header header header'
    'sidebar content content'
    'footer footer footer';
}

26. CSS Shapes

  clip-path를 사용해 독특한 형태의 요소 만들기

.shape {
  clip-path: circle(50%);
  background-color: #3498db;
  width: 100px;
  height: 100px;
}

27. Custom Fonts 사용하기

  웹 폰트 삽입과 최적화

@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
}

body {
  font-family: 'CustomFont', sans-serif;
}

28. CSS Counters

  counter-reset, counter-increment로 자동 번호 매기기

.counter {
  counter-reset: section;
}

.counter h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

29. 탭 인터페이스 만들기

  CSS만으로 탭 인터페이스 구성

.tab {
  display: none;
}

.tab:checked + .tab-content {
  display: block;
}

30. 스크롤바 스타일링

  ::-webkit-scrollbar로 맞춤형 스크롤바 디자인

/* Custom scrollbar for WebKit browsers */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #3498db;
  border-radius: 10px;
}

31. 폰트 아이콘 사용

  Font Awesome, Material Icons 등으로 아이콘 추가

32. 필터 효과

  filter 속성으로 이미지와 요소에 다양한 필터 적용

img {
  filter: grayscale(100%);
}

33. Flexbox 정렬

  justify-content, align-items 속성으로 정렬

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

34. Grid Gap

  gap 속성으로 그리드 아이템 간격 조절

.container {
  display: grid;
  gap: 20px;
}

35. 모달 창 스타일링

  모달 창의 기본 스타일링과 애니메이션

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal.show {
  display: block;
}

36. 토글 스위치 만들기

  CSS만으로 토글 버튼 디자인

.toggle {
  position: relative;
  width: 50px;
  height: 25px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

37. 폼 요소 스타일링

  인풋, 셀렉트, 텍스트에어리어 등 폼 요소의 커스터마이징

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

38. Card UI 디자인

  카드 레이아웃과 그림자 효과

.card {
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

39. 미디어 객체 만들기

  이미지와 텍스트를 나란히 배치하는 디자인 패턴

.media {
  display: flex;
}

.media img {
  margin-right: 20px;
}

.media-body {
  flex: 1;
}

40. Tooltips

  간단한 툴팁 디자인과 애니메이션

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

41. 네비게이션 바

  반응형 네비게이션 바 디자인

.navbar {
  display: flex;
  background-color: #333;
  justify-content: space-around;
  padding: 10px;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 14px 20px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

42. Breadcrumbs

  탐색 경로를 나타내는 브레드크럼 스타일링

.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}

.breadcrumb li {
  margin: 0 5px;
}

.breadcrumb li+li:before {
  content: "/";
  margin-right: 5px;
}

43. Sticky Footer

  페이지 하단에 고정된 푸터 만들기

html, body {
  height: 100%;
}

.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
}

44. CSS Functions

  calc(), min(), max() 등 함수 사용

.container {
  width: calc(100% - 50px);
  margin: min(10%, 50px);
}

45. 자연스러운 그림자 효과

  box-shadow, text-shadow 사용.

.element {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

46. 반응형 폼

  모바일에서의 폼 요소 스타일링

@media (max-width: 600px) {
  form {
    flex-direction: column;
  }
}

47. CSS Sprites

  스프라이트 이미지를 사용해 로딩 시간 단축

.sprite {
  background: url('sprite.png') no-repeat;
}

.icon1 {
  background-position: 0 0;
  width: 50px;
  height: 50px;
}

.icon2 {
  background-position: -50px 0;
  width: 50px;
  height: 50px;
}

48. Image Sprites

  여러 아이콘을 하나의 이미지로 병합해 사용

/* 동일한 예시로 사용 가능 */

49. 메이슨리 레이아웃

  불규칙한 격자형 레이아웃

.container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  break-inside: avoid;
  margin-bottom: 1em;
}

50. 아코디언 메뉴

  CSS만으로 아코디언 스타일 메뉴 만들기

.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.accordion.active + .panel {
  display: block;
}

51. CSS Grid Auto Placement

  자동 배치 기능으로 레이아웃 구성

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

52. Hover 효과

  다양한 호버 효과 디자인.

.button:hover {
  background-color: #3498db;
  color: white;
}

53. 클릭 애니메이션

  버튼 클릭 시 애니메이션 추가

.button:active {
  transform: scale(0.95);
}

54. 브라우저 개발자 도구 활용

  실시간으로 스타일 조정 및 디버깅

55. Visibility 속성

  visibility: hidden과 display: none의 차이 이해

.hidden {
  visibility: hidden; /* 차지하는 공간 유지 */
}

.none {
  display: none; /* 차지하는 공간 제거 */
}

56. CSS Variables 다크 모드

  다크 모드를 위한 변수 설정

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme='dark'] {
  --background-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

57. Content Visibility

  content-visibility로 성능 최적화

.lazyload {
  content-visibility: auto;
}

58. 정적 사이트 제네레이터 스타일링

  정적 사이트에서 CSS 적용

59. CSS Grid 템플릿 활용

  자주 사용하는 레이아웃 템플릿 저장

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

60. CSS-in-JS

  자바스크립트 내에서 CSS 사용

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3498db;
  color: white;
  padding: 10px;
`;

61. 레이아웃 격자 만들기

  그리드 레이아웃으로 복잡한 페이지 구성.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

62. 투명도 조절

  opacity 속성으로 요소 투명도 설정

.transparent {
  opacity: 0.5;
}

63. 이미지 캡션 스타일링

  이미지와 캡션의 조화로운 디자인

figure {
  margin: 0;
}

figcaption {
  text-align: center;
  font-size: 14px;
  color: #555;
}

64. 다단 레이아웃

  column-count, column-gap으로 여러 칼럼 구성

.container {
  column-count: 3;
  column-gap: 20px;
}

65. 로딩 애니메이션

  페이지 로딩 시 사용자에게 시각적 피드백 제공

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 4px solid rgba(0,0,0,0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

66. 3D 변환

  transform 속성을 사용해 3D 효과 적용

.element {
  transform: rotateY(180deg);
}

67. Custom Scroll Animations

  스크롤 시 애니메이션 적용

.scroll-animation {
  transition: transform 0.3s ease-in-out;
}

.scroll-animation:hover {
  transform: translateY(-10px);
}

68. Skeleton Screens

  콘텐츠 로딩 시 스켈레톤 화면 제공

.skeleton {
  background-color: #ddd;
  height: 100%;
  width: 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -100%; }
  100% { background-position: 100%; }
}

69. 프린트 스타일 시트

  인쇄 시 최적화된 스타일 적용

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
}

70. 서브그리드 사용하기

  CSS Grid의 서브그리드 기능 활용

/* 아직 모든 브라우저에서 지원하지 않음 */

71. Background Blend Modes

  배경 이미지와 색상의 혼합 효과

.element {
  background: url('image.jpg') center/cover, linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
  background-blend-mode: overlay;
}

72. Object-fit

  이미지와 비디오의 크기 조절

img {
  object-fit: cover;
  width: 100%;
  height: 200px;
}

73. Clip-path 애니메이션

  clip-path를 사용한 다이나믹한 모양 변경

@keyframes clip-animation {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(100% at 50% 50%); }
}

.element {
  animation: clip-animation 1s ease-in-out forwards;
}

74. 사용자 정의 체크박스와 라디오 버튼

  기본 스타일을 대체하는 디자인

input[type="checkbox"], input[type="radio"] {
  display: none;
}

input[type="checkbox"] + label, input[type="radio"] + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
}

input[type="checkbox"] + label:before, input[type="radio"] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
}

input[type="checkbox"]:checked + label:before {
  background-color: #3498db;
}

input[type="radio"]:checked + label:before {
  background-color: #3498db;
  border-radius: 50%;
}

75. 웹 폰트 최적화

  font-display 속성을 사용해 로딩 최적화

/* font-display 속성을 통해 로딩 최적화 */
@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

76. 세로 정렬

  Flexbox나 Grid로 세로 정렬 구현

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

77. Viewport Units

  vw, vh 단위를 활용한 반응형 디자인

.container {
  width: 100vw;
  height: 100vh;
}

78. SVG 애니메이션

  CSS를 사용한 SVG 요소 애니메이션

@keyframes draw {
  0% {
    stroke-dasharray: 0, 200;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 200, 200;
    stroke-dashoffset: -200;
  }
}

svg {
  width: 100px;
  height: 100px;
}

path {
  fill: none;
  stroke: #3498db;
  stroke-width: 4;
  stroke-dasharray: 0, 200;
  stroke-dashoffset: 0;
  animation: draw 2s infinite;
}

79. 커스텀 커서

  CSS로 커서 모양 변경

.custom-cursor {
  cursor: url('cursor.png'), auto;
}

80. 부드러운 스크롤

  scroll-behavior 속성을 사용해 스크롤 애니메이션 추가

html {
  scroll-behavior: smooth;
}

81. 리본 스타일링

  요소에 리본 효과 추가

.ribbon {
  position: relative;
  background: #3498db;
  color: white;
  padding: 10px 20px;
}

.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  bottom: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #3498db transparent transparent transparent;
}

.ribbon::before {
  left: 0;
}

.ribbon::after {
  right: 0;
}

82. CSS Grid Reordering

  그리드 아이템의 순서 변경

.container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

83. 레이아웃 안정성

  contain 속성으로 레이아웃 안정성 향상

.container {
  contain: layout;
}

84. 분할 레이아웃

  화면을 두 부분으로 나누는 디자인

.split {
  display: flex;
}

.split .left {
  flex: 1;
  background-color: #3498db;
}

.split .right {
  flex: 1;
  background-color: #2ecc71;
}

85. 가로 스크롤

  가로로 스크롤되는 콘텐츠

.horizontal-scroll {
  display: flex;
  overflow-x: auto;
}

.horizontal-scroll .item {
  min-width: 200px;
  margin-right: 10px;
}

86. 시차 효과

  배경 이미지에 시차 효과 적용

.parallax {
  background-image: url('background.jpg');
  height: 500px;
  background-attachment: fixed;
  background-size: cover;
}

87. 고정 너비/높이 요소

  반응형 디자인 시 고정된 너비와 높이 설정

.fixed-size {
  width: 200px;
  height: 200px;
}

88. 고정 배경 이미지

  background-attachment 속성을 사용해 배경 이미지 고정

.fixed-background {
  background-image: url('background.jpg');
  background-attachment: fixed;
  background-size: cover;
}

89. Custom Media Queries

  사용자 정의 미디어 쿼리 설정

@custom-media --small-viewport (max-width: 600px);

@media (--small-viewport) {
  .container {
    flex-direction: column;
  }
}

90. CSS Grid Media Queries

  반응형 그리드 레이아웃

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

91. CSS Grid Lines Naming

  그리드 라인에 이름을 붙여 사용

.container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-middle] 1fr [col-end];
}

.item1 {
  grid-column: col-start / col-middle;
}

.item2 {
  grid-column: col-middle / col-end;
}

92. 타입 스케일

  타이포그래피의 일관성을 위한 타입 스케일 설정

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem; /* 32px */
}

h2 {
  font-size: 1.5rem; /* 24px */
}

h3 {
  font-size: 1.25rem; /* 20px */
}

93. Animation Direction

  애니메이션의 방향 제어

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.element {
  animation: slide 1s ease-in-out alternate infinite;
}

94. 그라디언트 배경

  linear-gradient, radial-gradient를 사용한 배경 디자인

.gradient-background {
  background: linear-gradient(to right, #3498db, #2ecc71);
}

95. Focus 스타일링

  포커스 상태의 스타일 커스터마이징

a:focus {
  outline: 2px solid #3498db;
}

96. 다중 백그라운드 이미지

  여러 배경 이미지를 겹쳐서 사용

.element {
  background-image: url('background1.jpg'), url('background2.jpg');
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
}

97. 정렬된 리스트 스타일링

  순서 있는 리스트의 커스텀 스타일링

ol.custom-list {
  counter-reset: item;
}

ol.custom-list li {
  counter-increment: item;
  list-style-type: none;
}

ol.custom-list li::before {
  content: counter(item) ". ";
  font-weight: bold;
}

98. 텍스트 오버플로우 처리

  text-overflow 속성으로 긴 텍스트 처리

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

99. Responsive Typography

  뷰포트 크기에 따라 폰트 크기 조정

html {
  font-size: calc(1rem + 1vw);
}

100. 접근성 높은 폼

  시각장애인을 위한 접근성 향상 폼 스타일링

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

이 샘플 코드들을 바탕으로 매일 연습하여 CSS 스타일링 기술을 향상시킬 수 있습니다. 필요에 따라 이 예제들을 수정하고 실험해보세요.