[FE기초] CSS 기초

2024. 4. 25. 02:06· FrontEnd
목차
  1. 1. CSS 스타일 규칙
  2. 2. CSS 적용 방법
  3. 3. CSS 출처
반응형

[FE기초] CSS 기초

이전포스팅을 마지막으로 HTML에 대한 기초 강의가 마무리되었다.

주로 사용하는 HTML 태그들에 대해서 알아보았고 이제 스타일을 담당하는 CSS에 대해서 한번 알아보자

백엔드 개발을 하며 직접 css 를 다루는 일은 많지 않지만 추후 FE 개발을 해야할 일이 있을 수도 그리고 협업이나 팀프로젝트에서는 서로의 코드를 확인해야하기도 하기에 css 에대한 개념도 함께 정리해보겠다.

 

 

[FE기초] Head 태그

[FE기초] Head 태그HTML 포스팅의 마지막 Head 태그이다.이전까지의 페이지의 Body에 해당하는 부분을 만드는 것이었다면 이번 시간에는 탭의 파비콘 등을 통해서 head를 구조화 하는 방법을 알아보

developer-dodo.tistory.com

 

 

1. CSS 스타일 규칙

위 그림은 css 사용 방법을 명시한 그림이다.

선택자 즉 디자인을 입힐 태그 또는 아이디를 정의한다.

선태자에 적용할 디자인 속성명을 정의하고 그 속성값을 등록하면 디자인이 적용된다.

 

위 예시를 해석하면 h1 태그의 color 를 파란색으로 하겠다 라고 명시할 수 있는 것이다.

즉 속셩명의 종류를 알고 이것을 적절하게 적용한다 라는게 핵심이다.

 

2. CSS 적용 방법

크게 3가지의 적용 방법이 있다.

1. Inline 적용 방법

태그에 style 속성을 이용해서 적용하는 방법이다.

태그에 바로 적용하는 방법이며 모든 태그를 적을 때 마다 해야하는 불편함이 있다.

절대 불변하지 않는 요소에서나 적용할 수 있으며 현업에서는 거의 사용하지 않는다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inline style</title>
  </head>
  <body>
    <h1 style="color: blue">제목</h1>
    <div style="width: 100px; height: 100px; border: 1px solid red"></div>
  </body>
</html>

 

2. Internal 적용 방법

인라인과 다르게 HTML Head 태그 내부에 style 태그를 통해서 설정한다.

이렇게 설정한 태그는 HTML 파일 내부에서 일괄적으로 적용된다.

기존 inline 방식 보다 개선된 상태

하지만 css 스타일의 재활용성이 매우 떨어진다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: blue;
      }
      .content {
        border: 2px solid red;
        background-color: yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>헬스</h1>
    <p class="content">오늘도 운동 완료 - 오운완</p>
  </body>
</html>

 

3. External 적용 방식

외부에 css 파일을 생성하고 이 css 파일을 link 하여 사용하는 방식

css 파일을 따로 관리하기에 유지보수에 용이하며 여러 html 파일에 css를 적용가능하여 재활용성이 높다.

아래 예시 처럼 HTML,CSS를 따로 관리

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>External</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>코딩</h1>
    <p class="article">우리는 CSS를 배운다</p>
  </body>
</html>
h1 {
  color: blue;
}
.article {
  border: 1px solid black;
  padding: 30px;
}

 

✅ CSS 주석

css 의 주석은 /* */ 로 주석이 사용 가능하며
시작을 /* 끝은 */으로 닫아준다고 생각하면 된다.

3. CSS 출처

CSS는 브라우저 기본 스타일, 브라우저 사용자 스타일, 제작스타일 3가지로 분류가 가능하다.

 

◼ 제작자 스타일

말 그대로 웹 사이트를 만든 제작자, 즉 개발자가 작성한 스타일 시트이다.

 

◼ 사용자 스타일

사이트를 방문하는 일반 사용자들이 구성한 스타일 시트

쉽게 설명하자면 저시력자가 화면을 잘 보기위해서 윈도우의 고대비를 설정하는 것과 같은 것

스타일이 시스템에 저장되고 이를 사용자 스타일 시트라고 한다.

 

◼ 브라우저 스타일

브라우저가 기본적으로 가지는 스타일

크롬,사파리, 파이어폭스, 엣지 등 브라우저 마다 기본으로 사용하는 스타일 시트가 상이할 수 있다.

 

👉CSS 적용 순위

 

사용자 ! important > 제작자! important > 제작자 > 사용자 > 브라우저 

여기서 ! important 는 이 적용 순위의 흐름을 깨고 우선순위를 차지하기 때문에 주의해서 사용해야한다.

 

CSS는 약어로 Cascading Style Sheet라는 의미를 가진다.

Cascading 은 폭포라는 단어로 RDB에서 삭제 조건에서 Cascading 이라는 말을 쓴다.

그처럼 순서의 흐름이 상단에서 하단으로 이어진다는 것인데 즉 스타일이 무작위로 설정되는게 아니라

어떤 우선순위에 따라서 연속적으로 적용된다는 의미이다.

 

CSS는 제작자 스타일 → 브라우저 사용자 스타일  →  기본 스타일 순서로 연속적으로 적용된다.

✔ 사용자 스타일은 일반적인 케이스는 아니다.

 

 

 

반응형

'FrontEnd' 카테고리의 다른 글

[FE기초]CSS폰트  (0) 2024.04.25
[FE기초]CSS 다루기  (0) 2024.04.25
[FE기초] Head 태그  (0) 2024.04.25
[FE기초] Form 태그  (0) 2024.04.24
[FE기초]HTML 시맨틱 태그  (1) 2024.04.19
  1. 1. CSS 스타일 규칙
  2. 2. CSS 적용 방법
  3. 3. CSS 출처
'FrontEnd' 카테고리의 다른 글
  • [FE기초]CSS폰트
  • [FE기초]CSS 다루기
  • [FE기초] Head 태그
  • [FE기초] Form 태그
김도도새
김도도새
1년자 주니어 개발자의 좋은 백엔드 개발자로 걸음을 기록하는 공간
반응형
김도도새
Stacking Devlop
김도도새
전체
오늘
어제
  • 분류 전체보기 (48)
    • 회고 (0)
    • Spring (13)
    • Java (3)
    • 잡동사니 (0)
    • 도서 (0)
    • 웹 Basic (5)
    • 개인프로젝트 (0)
    • 에러모음 (2)
    • 개발회고록 (0)
    • 알고리즘 (5)
    • Git (1)
    • 디자인패턴 (2)
    • FrontEnd (11)
    • JPA (3)
    • Build Tool (1)
    • DB (0)
    • 운영체제 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
김도도새
[FE기초] CSS 기초
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.