CSS 언어 정리

HTML, CSS, JS 기초 정리

HTML, CSS, JS 역할

• HTML : 마크업 언어 → 사람 뼈대
• CSS : 스타일 언어 → 사람 옷
• JS : 객체지향 언어 → 사람 동작/이벤트

---

CSS (Cascading Style Sheets)

특징

1. 위에서 아래로 꾸미기 시트를 덮는다 (대상은 마크업)
2. 주로 HTML 언어를 꾸미는 목적
3. CSS는 HTML 종속형 스타일 언어, 즉 HTML 안에서 실행됨

CSS 적용 방법

• 방법1 (인라인)
  <마크업명 style="속성명:값; 속성명:값;" />
• 방법2 (내부 스타일)
• 방법3 (외부 파일, 협업/유지보수용)
  <style.css>
  선택자 { 속성명:값; 속성명:값; }
  </style.css>

브라우저 임시 테스트

• F12 → 개발자 도구

CSS 주석

• CSS : / 주석 /
• HTML :

---

CSS 구조

선택자 {
속성명 : 값 ;
}

CSS 선택자

1. • : 전체 선택자 (공통 CSS 적용)
2. 마크업명 : 마크업 선택자
3. .클래스 : 클래스 선택자 (복수 적용 가능)
4. #아이디 : 아이디 선택자 (단일 적용)

우선순위 : #id > .class > 마크업명 > *
중복 시 코드 작성 순으로 마지막 속성 적용
관례 : 최대한 클래스 선택자 활용, 특정 부분에서 id 사용

• 여러 선택자 적용 : , 로 구분
  선택자A, 선택자B { 속성명:값; }
• 자식 선택자 : >
  부모 > 자식 { }
• 자손 선택자 : 띄어쓰기
  부모 자손 { }

---

CSS 텍스트 속성

1. font-family

   • 글꼴 지정. 여러 글꼴을 콤마로 구분하여 우선순위 설정 가능
   • 예: font-family: "Arial", "Helvetica", sans-serif;

2. font-size

   • 글자 크기 지정. px, em, rem, % 등 단위 사용 가능
   • 예: font-size: 16px;

3. font-style

   • 글자 스타일 지정 (normal, italic, oblique)
   • 예: font-style: italic; → 글자 이탤릭체

4. font-weight

   • 글자 굵기 지정 (normal, bold, 100~900)
   • 예: font-weight: bold; → 글자 굵게

5. color

   • 글자 색상 지정
   • 예: color: #333333; 또는 color: red;

6. word-spacing

   • 단어 사이 간격 조정
   • 예: word-spacing: 10px;

7. letter-spacing

   • 글자 사이 간격 조정
   • 예: letter-spacing: 2px;

8. line-height

   • 줄 높이 지정. 글자와 글자 사이 간격 조정
   • 예: line-height: 1.5; 또는 line-height: 24px;

9. text-align

   • 텍스트 정렬 (left, right, center, justify)
   • 예: text-align: center; → 가운데 정렬

10. text-decoration

    • 텍스트 장식 (none, underline, overline, line-through)
    • 예: text-decoration: underline; → 밑줄

11. text-shadow

    • 텍스트 그림자 지정
    • 예: text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
      (수평, 수직, 블러, 색상)

---

CSS 박스 속성

12. border

    • 테두리 설정 (두께, 스타일, 색상)
    • 예: border: 1px solid #000;

13. border-radius

    • 테두리 둥글기 조절
    • 예: border-radius: 10px;

14. box-shadow

    • 요소 그림자 지정
    • 예: box-shadow: 3px 3px 6px rgba(0,0,0,0.3);

15. width

    • 요소 너비 지정
    • 예: width: 200px;

16. height

    • 요소 높이 지정
    • 예: height: 100px;

17. padding

    • 내부 여백 (content와 border 사이)
    • 예: padding: 10px;

18. margin

    • 외부 여백 (요소와 요소 사이)
    • 예: margin: 20px;
    • 가운데 정렬 : margin: 0 auto; (가로 가운데 정렬)

19. background-color

    • 배경 색상 지정
    • 예: background-color: #f0f0f0;

20. display

    • 요소 표시 방식 지정
      • inline : 줄 안에 요소 배치
      • block : 블록 요소, 줄 바꿈 발생
      • inline-block : 줄 안에서 블록처럼 크기 지정 가능
      • none : 화면에서 숨김
      • flex : 플렉스 박스로 자식 요소 배치

21. box-sizing

    • 요소 크기 계산 방식
      • content-box : width/height에 padding, border 제외 (기본값)
      • border-box : width/height에 padding, border 포함
    • 예: box-sizing: border-box;

---

Flexbox 속성

• 하위 요소들의 배치 방법
• flex-wrap
  • nowrap (기본값) : 하위 요소 크기 자동 맞춤
  • wrap : 하위 요소 크기 더 크면 줄바꿈
• flex-direction
  • row (기본값) : 가로 방향 배치
  • column : 세로 방향 배치
• justify-content
  • flex-start (기본값) : 가로 왼쪽 정렬
  • flex-end : 가로 오른쪽 정렬
  • center : 가로 가운데 정렬
  • space-between : 양 끝 여백 없이 균등 정렬
  • space-around : 양 끝 여백 50% + 균등 정렬
  • space-evenly : 양 끝과 사이 균등 정렬
• align-items
  • stretch (기본값) : 하위 요소 높이 고정 아니면 부모 높이만큼 늘어남
  • center : 세로 가운데 정렬
  • flex-end : 세로 밑변 정렬
  • flex-start : 세로 윗변 정렬