CSS 스타일 레퍼런스 자주 쓰는 주요 기능들 모음

CSS 배울 때 왜 이리 헷갈렸는지 모르겠어요!
스타일이 뭔지, 레퍼런스가 뭔지도 모르던 시절 그냥 노가다 했습니다 ㅠ
당시는 유튜브 자료도 별로 없고 책에 의존하던 시절이라 그냥 샘플 예제만 따라 성공해도 기쁘고 그러다 코드를 까먹으면 책을 뒤짚어 보던가 구글 검색을 찾아 헤맸는데 요즘은 많이 좋아진 것 같아요.
최근은 AI 코딩이 활성화 되면서 아이디어와 실행 능력이 중요해진 듯합니다.
언제, 어디에, 어떻게 써먹는지 방법이랄까요?
뭐든지 배워야 하는 세상이 왔습니다 ^^

이 CSS(캐스케이딩 스타일 시트)는 배울 때 은근 헷갈리는데 벽에 부딪힐 땐 패스하고 앞으로 나갔다가, 여유 될때 다시 뒤로 돌아오는 학습 방법도 좋을 듯싶어요. Html이 너무 어려울 때 Css로 갔다가 다시 돌아오면 쉽게 보입니다. 또 Css는 JavaScript로 일단 넘어갔다 돌아오면 '아아~'하고 쉬어집니다. 안되면 일단 되는 거 해라 뭐 이런 취지입니다.
그럼 오늘의 주제대로 자주 쓰는 주요 기능들 모음을 알려드립니다.

CSS 스타일 레퍼런스

1. 색상 및 배경

color : 텍스트 색상 지정

background-color : 배경 색상 지정

opacity : 요소의 투명도 설정 (0~1 값 사용)

background-image : 배경 이미지 설정

background-size : 배경 이미지 크기 (cover, contain, auto 등)

background-position : 배경 이미지 위치 (center, top, left 등)

2. 글꼴 및 텍스트 스타일

font-family : 글꼴 지정 (Arial, sans-serif 등)

font-size : 글자 크기 설정 (px, em, rem 등)

font-weight : 글자 두께 (normal, bold, lighter, bolder)

text-align : 텍스트 정렬 (left, center, right)

text-decoration : 밑줄, 취소선 (underline, none, line-through 등)

letter-spacing : 글자 간격 조절

line-height : 줄 간격 조절

3. 박스 모델

width / height : 요소의 가로, 세로 크기 지정

margin : 바깥 여백 (px, auto 등)

padding : 내부 여백 (px, % 등)

border : 테두리 스타일 (solid, dashed, none 등)

box-shadow : 그림자 효과 (h-offset v-offset blur spread color)

4. 디스플레이 및 정렬

display : 요소 표시 방식 (block, inline, flex, grid 등)

position : 위치 지정 (static, absolute, relative, fixed, sticky)

top, bottom, left, right : 위치 조정

z-index : 요소의 쌓임 순서 지정

5. 플렉스박스(Flexbox)

display: flex : 플렉스 컨테이너 설정

justify-content : 주 축 정렬 (flex-start, center, space-between, space-around, space-evenly)

align-items : 교차 축 정렬 (flex-start, center, flex-end, stretch)

flex-wrap : 아이템 줄바꿈 설정 (nowrap, wrap, wrap-reverse)

6. CSS 그리드(Grid)

display: grid : 그리드 컨테이너 설정

grid-template-columns : 컬럼 크기 및 개수 설정 (1fr 2fr, repeat(3, 1fr) 등)

grid-gap : 행과 열 간격 설정

align-items / justify-items : 내부 아이템 정렬

7. 애니메이션 및 변환

transition : 부드러운 변화 효과 적용 (property duration ease-in-out)

transform : 요소 변형 (rotate, scale, translate, skew)

animation : 애니메이션 효과 적용 (@keyframes 와 함께 사용)

8. 반응형 디자인 (Responsive Design)

media queries : 특정 화면 크기에서 다른 스타일 적용 (@media screen and (max-width: 768px) { ... })

vw, vh : 뷰포트 기준 크기 지정

max-width, min-width : 크기 제한 설정

솔직히 위 기능들만 활용해도 홈페이지 뚝딱 나옵니다.
이중에서 중요한 건 플렉스, 그리드, 포지션을 이용한 레이아웃 잡기 같아요.
원하는대로 상단, 중단, 하단, 사이드 레이아웃을 잡는 순간 Html과 Css는 끝났다고 생각해도 될 것입니다.

굳이 CSS 스타일 레퍼런스를 올린 건 제 블로그를 새롭게 단장도 할겸, 지나가시는 분들 재미삼아 쭉 읽어보시면 좋은 것 같아서 올립니다. 방문 감사드려요!

2025.03.05 - [개발노트/html · css · javascript] - HTML 태그 레퍼런스 자주 쓰는 주요 기능들 모음