[Web] CSS

Cascading Style Sheet

웹페이지 스타일 정의

선택자(Selector)
CSS 셀렉터는 스타일을 적용할 HTML 요소를 식별하는 데 사용 (ID, CLASS)
속성과 값(Proporties & Value)
선택한 요소에 적용할 스타일은 (속성 : 값)으 정의함
ex) color : red;
선언 블록
한 개 이상의 CSS 코드를 {중괄호}로 감싼 것
속성과 값으로 이루어진 값들이 들어있음
Rule set
셀렉터와 선언 블록을 합친 것
특정 HTML 요소에 여러 CSS요소를 적용할 때 사용
상속(Inheritance)
부모 요소와 자식 요소로 상속됨
우선순위(Specificity)와 캐스캐이딩(Cascading)
여러 스타일을 같은 요소에 적용할 때, 우선순위와 Cascading 규칙에 따라 어떤 스타일이 먼저 적용될지 결정함
박스 모델(Box Model)
모든 HTML 요소는 사각형 박스로 간주
이 박스는 공백(margin), 테두리(border), 여백(padding), 내용(content) 영역으로 구분되어 있음
레이아웃(Layout)
페이지 내부 레이아웃을 설정 (어떻게 배치할 것인가(템플릿))
미디어 쿼리(Media Queries)
특정 조건에 따라 다른 스타일을 적용하여, 반응형 웹 디자인을 할 수 있음
애니메이션과 전환(Animation & Transition)
상태 변경을 부드럽게 표현할 수 있도록 제공

CSS를 사용하면 개별 HTML요소에 직접 적용하는 대신 한 곳에서 스타일을 전부 관리할 수 있음

1. External Stylesheet 외부 스타일 시트

별도의 .css 파일에 CSS 코드를 작성하고 HTML 문서에서 <link> 태그를 통해 파일을 참조하는 방식

이렇게 사용하게 되면 여러 HTML에서 같은 CSS파일을 적용 가능 함

<head>
   <link rel="stylesheet" href="파일명.css">
</head>

2. Internal Stylesheet 내부 스타일 시트

HTML 문서 내부에 <style> 태그를 사용하여 직접 CSS코드를 작성함

이 방법은 해당 HTML 문서에서만 필요한 특정 스타일이 있을 때 주로 사용

<head>
   <style>
      body{ background-color: blue; }
   </style>
</head>

3. Inline Styles 인라인 스타일

HTML 요소의 style속성 내부에 직접 CSS코드를 작성

<body>
    <p style="color: red; font-size: 20px;">This is a red, 20px text.</p>
</body>

JJoa Develog