송희의 알찬 일기

[WEB] CSS 문법 정리 #2 본문

일상 일기

[WEB] CSS 문법 정리 #2

애쏭1004 2023. 8. 23. 11:44

CSS (Cascading Style Sheets)는 HTML 문서의 스타일을 정의하는 데 사용되는 언어다.

웹 페이지의 레이아웃, 색상, 폰트 및 기타 디자인 요소를 지정할 수 있다.

 

아래는 CSS의 주요 문법 및 개념에 대한 간략한 정리이다.:

선택자 (Selectors)

CSS에서 스타일을 적용할 HTML 요소를 선택하는 데 사용된다.

  • 타입 선택자: 태그 이름을 사용해 선택. 예: p, h1, div.
  • 클래스 선택자: .클래스명 형식. 예: .highlight.
  • ID 선택자: #ID명 형식. 예: #header.
  • 자손 선택자: 요소A 요소B 형식. 예: div p (div 내의 모든 p 선택).
  • 자식 선택자: 요소A > 요소B 형식. 예: ul > li (ul의 직접적인 li 자식만 선택).

속성 (Properties)

선택한 요소의 스타일을 정의합니다. 속성 이름과 값으로 구성되며 콜론(:)으로 구분된다.

p {
    color: red;
    font-size: 16px;
}

주요 속성

  1. 텍스트 관련
    • color: 텍스트 색상.
    • font-family: 폰트 종류.
    • font-size: 폰트 크기.
    • font-weight: 폰트 굵기.
    • text-align: 텍스트 정렬.
    • text-decoration: 밑줄, 취소선 등 텍스트 장식.
  2. 박스 모델 관련
    • width & height: 너비 및 높이.
    • padding: 패딩 (콘텐츠와 테두리 사이의 공간).
    • border: 테두리.
    • margin: 마진 (요소와 주변 요소 사이의 공간).
    • box-sizing: 박스의 크기 계산 방법.
  3. 배경 관련
    • background-color: 배경 색상.
    • background-image: 배경 이미지.
    • background-repeat: 배경 이미지 반복 방법.
    • background-position: 배경 이미지 위치.
  4. 레이아웃 관련
    • position: 요소의 위치 지정 방식 (static, relative, absolute, fixed, sticky).
    • top, right, bottom, left: position 속성과 함께 사용되어 위치 지정.
    • display: 요소의 표시 방식 (block, inline, inline-block, flex, grid, none).
    • float: 요소의 떠 있는 위치 (left, right, none).
  5. 기타
    • opacity: 투명도.
    • transform: 요소 변형 (회전, 확대, 이동 등).
    • transition: 속성 값 변화에 대한 전환 효과.

CSS 포함 방법

  1. 인라인 스타일: HTML 요소 내부에 직접 스타일 지정
<p style="color: red;">This is a red text.</p>
  1. 문서 내부 스타일시트: HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일 지정
<style>
    p {
        color: blue;
    }
</style>
  1. 외부 스타일시트: 별도의 .css 파일로 스타일을 지정하고 HTML 문서에 연결
<link rel="stylesheet" href="styles.css">

 

CSS는 복잡한 스타일링과 레이아웃을 지원하기 때문에 위의 내용은 기본적인 부분만 포함하고 있다.

실제로는 더 다양한 속성과 값, 고급 기능들이 있다.

'일상 일기' 카테고리의 다른 글

[독서] 역행자(저자 자청) 읽고 느낀 것  (1) 2023.08.26
[WEB] JavaScript 문법 정리 #3  (0) 2023.08.23
[WEB] HTML 문법 정리 #1  (0) 2023.08.22
[ChatGPT] 홈페이지 만들기 #1  (0) 2023.08.22
[보건증 발급] 시흥 보건소에서 보건증 발급 받기  (0) 2023.08.22
'일상 일기' Related Articles more