션냥의 개발일지

[CSS] 웹페이지의 디자인 담당, css의 기초 개념 다지기 본문

웹 개발

[CSS] 웹페이지의 디자인 담당, css의 기초 개념 다지기

션팡 2024. 6. 19. 21:46

안녕하세요 오늘은 css의 기본 개념에 대해 알아보겠습니다.
바로 시작할게요.

먼저, 웹의 기본 뼈대인 html에 살을 붙이는 느낌인 css는 웹의 디자인을 담당해요.
저번 시간에 풀어본 문제에 조금의 css를 붙여서 그나마 괜찮아보였지만,
html으로만 웹을 만든다면 그림이나 글자의 정렬도 잘 맞지 않고 어설퍼 보일 수 있어요.
지난 문제에서 html으로만 구성된 웹과 css를 조금 첨가한 것을 비교해볼게요.

위와 같이 html으로만 구성한다면 색을 입힐 수도 없고,
마지막 버튼을 보시면 정렬도 내 맘대로 할 수 없는 것을 볼 수 있어요.
그러니 웹개발을 하시려면 css는 필수!!라고 할 수 있습니다.
css의 기본 개념을 하나하나 살펴볼게요.

🎨스타일 입히기

html의 기본 구조를 보시면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

웹페이지를 구현하는 코드는 html 태그가 가장 최상위 태그에 위치하며 모든 태그를 감싸고 있어요.
그리고 head 태그와 body 태그로 나뉘어져 있고 html에 대한 코드는 body 태그에서 이뤄지죠.
그럼 css는 어디에 작성해야 될까요?
css를 작성하는 위치는 총 세 가지로 나눌 수 있습니다.

📝css를 정의하는 방식

스타일은 보통 <style> 태그로 감싸는데요.

이렇게 세 가지로 나뉘게 됩니다.

  1. 외부 스타일 시트: <style> 태그로 감싼 css를 외부 파일로 분리하여 작성하는 것입니다.
    만약 index.html파일이 있다면 그 곳에 적용할 파일(index.css)을 따로 만듭니다.
    그리고나서 html파일에 <link> 태그를 사용해 연결합니다.

🌟 장점

  • 재사용 가능: 링크만 걸어주면 되기 때문에 여러 html 파일에 적용시킬 수 있습니다.
  • 유지보수 용이: 파일을 두개로 나누어 크기를 줄여주기 때문에 로드 속도가 빨라질 수 있습니다.

⚠️ 단점

  • 복잡성: 큰 프로젝트에서는 스타일 시트 관리가 복잡해질 수 있습니다.
  1. 내부 스타일 시트: 하나의 파일 안에 html과 css를 모두 작성합니다.
    위에서 말했듯이, body 태그 안에서 html을 작성하게 되는데요.
    css는 head 태그 안에 <style> 태그로 감싸주고 작성하게 됩니다.

🌟 장점

  • 한 문서 안에서 스타일을 관리할 수 있어 작은 프로젝트에 용이합니다.

⚠️ 단점

  • 재사용 불가, 파일 크기 증가, 유지보수 어려움
  1. 인라인 스타일 시트: body 안에 있는 html 태그들에 각각의 스타일을 속성으로 정의합니다.

🌟 장점

  • 빠른 적용: 스타일을 html 요소에 직접 추가하므로 즉시 적용됩니다.

⚠️ 단점

  • 유지보수 어려움, 재사용 불가

여기에서 스타일 시트의 정의를 좀 더 살펴볼게요.

🗃️스타일 시트

  • 스타일: html의 웹 문서에 글꼴이나 색상, 정렬방법 등에 대한 디자인적 요소를 정의하는 것입니다.
  • 스타일 시트: 이렇게 정의한 스타일들을 관리하기 편하게 한 곳에 모아서 관리하는 것입니다.

추가적으로 css는 Cascading이라는 중요한 속성을 가지고 있습니다.

🌊Cascading이란?

Cascading은 위에서 아래로 흐른다는 뜻을 가지고 있는데요.
이것을 CSS에서는 크게 두 가지 의미를 가지고 있어요.

  1. 상속: 부모태그에 적용한 것은 자식태그에게도 적용된다는 상속의 의미를 가져요.
    쉽게 말해, 부모태그에 노란색 배경색을 입히는 속성을 주었다면 그 자식태그에게도 자동적으로 적용된다는 뜻이죠.
    ❗예외: 보통 위치,구조,크기에 관한 스타일 속성들은 상속이 되지 않아요.
  2. 스타일 우선순위에 따라 적용된다.
    만약에 같은 태그에 한번은 노란색 배경 속성값을 주고
    그 다음에 똑같은 태그에 빨간색 배경 속성값을 주었다면,
    맨 마지막에 입힌 스타일이 적용된다는 뜻이에요.

이 의미는 스타일 시트 간에서도 적용되어요.
만약에 외부 파일(외부 스타일 시트)로 CSS를 작성하고 동시에 내부 스타일 시트도 작성했는데,
두 스타일 시트 안에서 위와 같이 같은 태그에 다른 색상을 주었다면
가장 나중에 적용되는 스타일 시트의 값만 남게 된다는 거예요.
스타일 시트 우선 순위는 아래와 같으니 알아두시면 좋아요.
스타일 시트 적용 순서: 인라인> 내부> 외부

인라인이 가장 먼저 적용되고 외부가 가장 마지막에 적용돼요.

오늘은 가볍게 스타일 시트에 관한 개념만 알아봤는데요.
지금은 이해가 가지 않는 부분이 있으셔도, css를 작성하다 보시면 이해가 되실거에용
그러니 너무 이해하려고 하지 마시고 구냥 해봅시다요..

'웹 개발' 카테고리의 다른 글

[CSS] 텍스트 관련 style 활용, 텍스트 꾸미기 2  (0) 2024.06.21
[CSS] 텍스트 관련 style 활용, 텍스트 꾸미기  (0) 2024.06.20
[HTML] 총정리, html을 이용해 자기소개서 만들어보기  (0) 2024.06.18
[HTML] form 태그 응용해보기!! feat.좋아하는 음식..  (1) 2024.06.16
[HTML] 웹페이지에 빠질 수 없는 태그?! form태그 알아보기  (2) 2024.06.14
'웹 개발' Related Articles more