DevLog__[CSS: 필수지식 총정리]

Jaewon Lee·2021년 4월 14일

CSS

HTML&CSS

목록 보기

3/9

On.

CSS 기본 개념

1) 선택자와 속성

Selector
선택자(selector) : 스타일 적용하려하는 html 요소를 선택하는 역할
id 선택자 : #

class 선택자 : .

전체 선택자 : *

Text property
속성(property) : 지정할 스타일의 속성
font-family : 폰트 종류

font-style : 폰트 스타일, normal(기본) / italic(이탤릭체) / oblique(기울임꼴)

font-weight : 폰트 굵기

text-align : 폰트 위치, left / center / right

line-height : 문장 사이 간격

letter-spacing : 글자 사이 간격

text-indent : 들여쓰기 지정

Size
값(value) : 키워드나 특정 단위를 이용해 원하는 스타일 적용
px : 절대 크기

em : 상대 크기, 현재 스타일이 지정된 요소의 font-size 기준

rem : 상대 크기, 최상위 요소의 font-size 기준

% : 상대 크기 : 현재 창의 크기를 기준

fr : 현재 요소를 일정 비율로 나누는 기준

2) display

화면의 배치 방법을 나타낸다. "block"과 "inline"을 필요에 따라 변경 할 수 있고, "flex", "grid"와 같은 레이아웃을 사용하는데에 정의 내릴 수 있다.

1. display : block
해당요소를 block으로 지정, 한 줄을 모두 차지하기 때문에 세로로 나열된다.

대표적인 block -level 요소 태그
<p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>

2. display : inline
해당요소를 inline으로 지정, 한줄을 차지하지 않기때문에 가로로 나열된다.

대표적인 inline-level 요소 태그
<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

3. display : inline-block
해당요소를 inline으로 배치하면서 내용은 블록 레벨 속성을 지정하고 싶을때 사용한다.

예) 한 줄에 여러 요소를 배치할 수 있지만, 너비나 높이, 마진 등의 값을 적용시킬때 사용

4. display : none
화면에 표시를 하지 않을때 사용

visibility 속성의 hidden과 비슷한 역할을 하지만 visibility는 화면에서 보여지지만 않을 뿐 공간은 그대로 차지하지만 display : none은 공간조차 차지하지 않는다.

3) box-model (box-sizing)

박스모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법

content : 태그가 차지하는 공간
padding : 컨텐츠와 border 사이 공간
border : 테두리
margin : 다른 태그 사이의 공간 사이의 공간

box-sizing

박스의 너비 기준을 정한다.

웹 문서에 여러 요소를 배치할 때 각 요소이 너비를 계산해야 한다.
CSS의 컨텐츠 영역의 너비를 나타내는 width속성은 해당요소에 적용된 패딩이나 테두리 크기는 따로 계산해서 배치해야 했다.

box-sizing속성을 사용하면 컨텐츠 영역의 너비에 패딩/테두리 크기까지 합쳐서 width속성을 지정할 수 있다.

ex)
▪️ box-sizing : content-box : width속성 값을 컨텐츠 영역 너비값으로 사용(기본값)
▪️ box-sizing : border-box : width속성 값을 컨텐츠 영역에 테두리까지 포함된 박스 모델 전체 너비 값으로 사용

📍주의!
박스모델의 마진(margin)속성은 포함되지 않는다.

4) Layout

layout을 잡는 방법은 여러가지가 될 수 있다고 생각한다. 그래서 나는 layout 잡는게 더 어렵다...
위에 box-model을 토대로 position을 적절하게 잡아가며 layout을 구성해도 되고, flex를 사용해도 되고, grid를 사용해도 되고...천차만별이다.

나는 개인적으로 flex와 grid가 편하지만, position도 잘 다루고 싶다. 각각의 기술들을 어떤 상황에서 사용해야하는지 알아보고, 사용법을 익히는 것이 가장 중요할 것 같다.

아무튼 layout은 다음 글에서 소개할거니깐, 이만 STOP!ㅎㅎ

👉 "CSS : Layout" 편으로 이동!