TIL - CSS 개요 (기본 문법 / 선택자 / 폰트 / 박스모델 / inline vs block)

myong·2023년 8월 2일

CSS TIL 코드캠프부트캠프

TIL

목록 보기

4/11

CSS란?

Cascading Style Sheet
웹 페이지의 스타일 & 레이아웃을 담당하는 문서
웹 브라우저가 읽을 수 있는 언어는 HTML,CSS,JS 세가지 언어 뿐이다.
세 가지 언어 중 HTML은 문서 구조를 담당하고
CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할을 한다.

(왼) CSS 없이 HTML만 있을 경우 / (오) HTML + CSS

이렇게 CSS는 페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며,
요소 하나하나를 개성있고 사용이 편리하도록 꾸며주는 역할을 한다.

CSS 기본 용법

CSS 작성하는 방법

CSS 구문은 선택자(Selector) , 선언(Declaration) 로 구분된다.
그리고 선언은 다시 속성(property) , 속성값(property value) 의 구조를 가지고 있다.
선택자는 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정한다.
선언은 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정한다.
이 선언은 속성과 속성 값으로 이루어져 있는데, 속성은 적용하고자 하는 스타일의 종류를,
속성 값은 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정한다.

CSS 적용 방식

CSS 사용방법 3가지

HTML 태그 속성에 입력
- 태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 기록이 필요하지 않음
- 태그가 많아질수록 가독성 떨어짐, 수정 번거로움, 한번에 하나씩만 수정 가능
  → 유지보수 측면에서 굉장이 비효율적
<style> 태그에 입력
- 태그와 CSS 속성 HTML 내에서 분리되어 있어 어떤 태그에 CSS 속성을 적용할 지 연결해주어야 함
- 선택자를 이용해서 한번에 여러 영역의 스타일을 지정하거나 수정 가능
  → 유지보수 측면 유리 but 관심사 분리 안됨
css 파일 만들어 불러오기
- 태그와 CSS 속성이 파일로 분리되어 있어 어떤 태그에 CSS 속성을 적용할 지 연결해주어야 함
- 실무에서 가장 많이 사용되고 있는 방법 → 유지 보수 매우 유리
- HTML파일, CSS 파일 따로 만든 뒤 <link>태그를 이용해 연결해주는 방식
- 링크 태그는 head태그 안에 있어야 한다.
```
<head>
    <link href="style.css" rel="stylesheet" />
</head>
```
  - <link> 태그
  - href : 참조할 css파일 경로를 지정
  - rel : 해당 태그로 연결시켜줄 파일과의 관계(relation)이며, "stylesheet"라고 적는다.
  - type : link태그로 연결되는 파일이 무엇인지 알려주며 "text/style" 를 적는다.

CSS 사용방법 3가지 비교

html 태그 직접 입력
- css 파일 생성 후 불러오기
- 한번에 하나의 태그에만 적용 가능
- 전체 코드 가독성 떨어짐
- 관심사 분리 X
<style> 태그 입력
- 전체 코드 가독성 향상
- 유지보수 용이
- 태그와 CSS 연결 필요
- 관심사 분리 X
css 파일 생성 후 불러오기
- 전체 코드 가독성 향상
- 유지보수 용이
- 관심사 분리 O
- 태그와 CSS 연결 필요

CSS 선택자

선택자는 CSS에서 꾸밀 대상 즉, 속성을 줄 대상을 뜻한다.
선택자에는 tag → class → id 순으로 우선 순위가 적용

**** : 전체 선택자
tag : 태그 선택자
.class : 클래스선택자
#id : 아이디선택자
선택자:가상상황 : 가상선택자

태그, id, class 선택자

CSS 선택자 중 가장 기본이 되는 것은 태그, id, class 선택자입니다.

💡 태그 선택자
앞에 붙여 무언갈 따로 붙여줄 필요없이 태그명만 적는다.

<div>
		<h1>제목입니다.</h1>
		<p>내용입니다.</p>
</div>

div {
	background-color: red;
}

h1 {
	font-size: 12px;
}

p {
	color: blue;
}

💡 id 선택자
id 선택자는 앞에 #을 붙인 뒤 id명을 적어주시면 됩니다. 중복 이름 안됨, 하나의 고유의 선택자

<div>
		<h1 id="title">제목입니다.</h1>
		<p>내용입니다.</p>
</div>

#title {
    font-size : 24px;
}

💡 class 선택자
class 선택자는 앞에 .을 붙인 뒤 class명을 적어주시면 됩니다. 중복 이름 가능.

<div>
		<h1 id="title">제목입니다.</h1>
		<p class="contents">내용입니다.</p>
</div>

.contents {
    font-size : 24px;
}

부모 자식 선택자, 다중 선택자

선택자 사이의 공백 유무에 따라 자손 선택자와 다중 선택자로 나뉜다.

💡 자손 선택자
HTML 문서에는 부모 자식 개념이 존재한다

여러 개의 선택자를 공백으로 연결해서 작성하면 자손 선택자가 된다.
자손 선택자를 이용하면 특정 부모 요소 안에 있는 자식 요소만 선택할 수 있습니다.

/* 자손 선택자 사용방법 - 선택자1 안에 있는 선택자 2를 선택한다. */
.parents .child {
    property: value;
}

/* 자손 선택자 사용예시 - .box 안에 있는 #title을 선택한다. */
.box #title {
    color : red
}

💡 다중 선택자
여러 개의 선택자를 공백 없이 연결하면 다중 선택자로 사용할 수 있습니다.
다중 선택자는, 중첩된 선택자들을 모두 만족하는 요소를 선택합니다.

폰트 기본 스타일

font-size : 글자 사이즈
font-weight : 글자 두께
font-style : 글자 기울임
test-decoration : 글자 꾸밈(장식용 선)
color : 글자 색상

박스모델

HTML의 각각의 태그들은 모두 ‘박스모델’ 형태로 구성되어 있다.
다만, 몇몇 태그들은 배경색이 없고, 테두리가 없어서 박스처럼 보이지 않을 뿐!

margin: border를 기준으로 박스의 바깥 여백
border: 박스의 기준이 되는 바깥 테두리 선, 선의 두께 설정
padding: 박스의 안쪽 여백
contents: 박스의 실질적인 내용 부분

CSS 박스모델에는 content-box, border-box 가 있다.

1) border가 고정되고 contents 크기가 변합니다. (박스가 고정)

2) contents가 고정되고 border의 크기가 변합니다. (박스가 커짐)

❗️실무에서는 박스 크기를 디자이너가 전달해준 화면과 일치시켜야 하기 때문에
바깥 테두리(박스 전체)를 고정시키는 border-box 사용을 권장

💻 직접 코딩 해보자!

각각 box-sizing 속성 값을 content-box / border-box를 주면 박스 사이즈가 달라진게 보임

그러므로 전체 선택자(*)에게 border-box를 주면 박스 사이즈가 일정하게
(디자이너가 원하는 값으로) 설정된다.

inline 요소 vs block 요소

div, p, span, h1, h2 등 수많은 HTML 태그는 전통적으로 블록 요소와 인라인 요소 두 가지로 분류된다.

block 요소 :
- 블록 요소를 여러개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
- 좌우 양 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.

inline 요소 :
- 여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
- 태그에 할당된 공간 만큼의 너비만 차지한다.

참고

[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui

myong

Carpe diem

이전 포스트

TIL - HTML 기술스택 이해하기

다음 포스트