TIL 12 | CSS - Basic

6904 단어 TILCSSWeCode위코드CSS

CSS의 기본

왜 스타일을 사용할까?

웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다.

1. 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다.

HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작이다. 이렇게 내용과 디자인이 구분되어 있을 때 내용을 수정하더라도 디자인에는 영향을 미치지 않아 편리하다.

2. 다양한 기기에 맞게 탄력적으로 바뀌는 문서을 만들 수 있다.

기존 HTML 문서는 출력하는 방식에 따라 그때그때 따로 문서를 만들어야 했지만 CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔서 같은 내용을 여러 기기에서 볼 수 있다. 이처럼 여러가지 웹 문서를 따로 만드는 것이 아니라 하나의 웹 문서에서 작동하도록 만드는 것이 바로 스타일의 역할이다.

스타일 시트


스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있다.

사용자 스타일

인라인 스타일

간단한 스타일 정보를 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 한다.

<p style="color : red;"> 빨간색 </p>

내부 스타일 시트

웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다. 모든 스타일 정보는 head 태그 안에서 정의하고 style태그 사이에 작성한다.

<head>
  <style>
    h1 {
    padding : 5px;
    background-color : red;
    color : white;
    }
  </style>
</head>
<body>
  <h1>내부 스타일 시트</h1>

외부 스타일 시트

여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하는 방식을 사용할때 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 하고 .css 라는 파일 확장자를 사용한다.

//CSS 파일
h1 {
	padding : 5px;
    background-color : red;
    color : white;
    }
//HTML 파일
//외부 스타일 시트를 연결할 때 사용하는 <link>태그
<link rel = "stylesheet" href = "css/style.css">

CSS 기본 선택자

전체 선택자

*{ margin:0; } -문서의 모든 요소에 스타일을 적용한다.

타입 선택자

p { font-style : italic; } - 특정 태그를 사용한 모든 요소에서 스타일을 적용한다.

클래스 선택자

.bg { background-color : #ddd; } - 특정 부분만 선택해서 문서 안에 여러 번 적용한다. 마침표(.)를 붙여서 사용한다.

id 선택자

#container { width : 500px } - 특정 부분만 선택해서 문서 안에서 한 번만 적용한다. #을 붙여서 사용한다.

그룹 선택자

h1, h2 { text-align : center; } - 여러 요소에 같은 스타일을 적용할 때 사용한다.

스타일 우선순위

중요도

사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일

적용 범위

스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아진다.
!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일

소스 작성 순서

나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.

태그와 요소는 어떻게 다른가?

태그는 말 그대로 태그 자체를 가리키고, 요소는 태그를 적용한 것을 가리킨다.

<p>텍스트 단락</p>

이 소스에서 <p>와 </p> 태그는 태그 자체를 말하는 것이고 태그를 포함해 <p> 태그를 적용한 '텍스트 단락' 부분을 p 요소라고 한다. 따라서 <p> 태그를 적용한 스타일이라는 표현은 태그 자체를 적용하는 스타일이 아니므로 틀린 말이다. p 요소에 적용하는 스타일로 표현하는 것이 맞다.

TIL 12 day
전체적인 내용을 다 보고 TIL을 작성하고 싶었는데 CSS에서 이해해야할 내용이 생각보다 많아서 며칠동안 TIL을 작성하지 못했다.
앞으로는 조금씩이라도 매일매일 공부한 내용을 복습하면서 정리하는 식으로 진행을 해야겠다.😭

[codeit] 꿈의 직장 전화번호 모으기 III
[2021/08/18 KATA NINJA] leet code #2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage