TIL 2. CSS

신미영·2021년 4월 6일

CSS TIL

HTML & CSS

목록 보기

2/6

웹 문서의 디자인 요소를 담당하는 CSS(Cascading Style Sheets)의 텍스트와 배경을 위한 스타일과 박스 모델, 레이아웃에 관하여 정리해 본다.

CSS 기초

스타일 형식

Selector { Property: Value; }

Selector : 스타일 규칙을 적용할 대상

Property : 적용하고자 하는 스타일 속성

Value : 속성 값

스타일 시트

스타일 규칙들을 한 군데 묶어 놓은 것을 말하며 문서 내부의 태그 안에서 <style> 태그를 활용하여 작성하는 내부 스타일 시트와 같은 스타일 시트를 여러 웹 문서에 적용하기 편리하도록 외부 스타일 시트를 '.css'라는 파일 확장자로 저장하여 <link> 태그를 활용하여 HTML 파일과 연결하여 사용할 수 있다.

외부 스타일 시트의 기본형
<link rel="stylesheet" href="스타일 파일 경로">

인라인 스타일
간단한 스타일 정보일 경우 스타일을 적용하고 싶은 태그에 stlye 속성을 사용하여 스타일을 바꿀 수 있다.

<p style="color:red;">contents</p> <!---- <p>태그 contents의 폰트 색상 red 적용 ---->

선택자

단순한 태그, 클래스, 아이디 단위 외에 특정 속성 등을 선택자로 활용하여 스타일 적용이 가능하다.

* : 전체 선택자

tag : 태그 선택자

.class : 클래스 선택자

#id : 아이디 선택자

태그1, 태그2 : 태그1과 태그2 그룹 선택자

more css selector reference >

스타일 우선순위

스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되어 위에서 아래로 스타일이 적용된다.

중요도에 따른 우선순위

사용자 스타일 시트

제작자의 스타일 중 '!important'가 붙은 스타일

제작가의 일반 스타일

브라우저 기본 스타일 시트

적용 범위에 따른 우선순위

인라인 스타일

id 선택자 스타일

클래스 선택자 스타일

태그 선택자 스타일

스타일 레퍼런스

텍스트 관련 스타일

글꼴

글꼴 지정하기

font-family: "(글꼴이름)",(대체 글꼴1), (대체 글꼴2)

font-size: em / ex / px / pt / 절대 크기 / 부모 요소와 상대크기(백분율)

글자 굵기 지정하기

font-weight: normal / bold / bolder / lighter / 숫자 100~900

텍스트

글자 색 지정하기

color: (색상명) / (16진수 표기) / (rgb) / (hsl)

텍스트 줄 표시하기

text-decoration: none / underline / overline / line-through

그림자 효과 추가하기

text-shadow: none / (가로거리) (세로거리) (번짐정도) (색상)

문단

텍스트 정렬하기

text-align: start / end / left / right / center / justify / match-parant

정렬 시 공백 조절하기

text-justify: auto / none / inter-word / distribute

줄 간격 조절하기

line-height: normal / (숫자) / (크기) / (백분율) / inherit

배경 관련 스타일

배경

배경 색 지정하기
background-color: 색상명 / 16진수 표기 / rgb(a) / hsl(a)
배경 적용 범위 조절하기
background-clip: border-box / padding-box / content-box

배경 이미지

아래의 속성들은 background라는 하나의 속성으로 축약하여 사용할 수 있다.
(속성값이 다르므로 입력 순서는 상관없음)

이미지 넣기
background-image: url('파일경로')
이미지 반복 방법 지정하기
background-repeat: repeat / repeat-x / repeat-y / no-repeat
이미지 크기 조절하기
background-size: auto / contain / cover / (크기값) / (백분율)
이미지 위치 조절하기
background-position: (수평위치) (수직위치)
이미지 배치 기준 조절하기
background-origin: border-box / padding-box / content-box
이미지 고정하기
background-attachment: scroll / fixed

CSS 박스 모델

웹 문서에서 내용을 배치할 때 각 요소를 박스형태로 구성해야 한다. 이것을 박스 모델이라고 하며 실제 내용이 들어가는 컨텐츠와 테두리, 여백들로 구성된다.

박스모델의 나열 방법

블록 레벨(block-level)

요소의 너비가 100%이기 때문에 요소의 좌우에 다른 요소가 올 수 없는 요소이다.
<p>, <div>, <ul>, <ol>, <h1>~<h6>, <form>, <table> 등의 태그들이 해당된다.

인라인 레벨(Inline level)

화면에 표시되는 컨텐츠만큼의 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다.
<img>, <span>, <input>, <textarea>, <label>, <button> 등의 태그들이 해당된다.

레벨 요소의 속성

display 속성을 사용하여 각 레벨 요소의 성격을 바꿀 수 있다.

diplay: none
요소를 화면에 아예 표시하지 않음(공간 차지x)

display: inline / block
요소를 인라인 / 블록 레벨로 바꿔줌

display: inline-block;
요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고자 할 때 사용

박스 모델

박스 모델의 구성

contents : 실제 표시되는 내용

padding : 박스와 컨텐츠 영역 사이의 여백

border : 박스의 테두리

margin : 여러 박스모델 사이의 여백

박스모델의 속성

:: contents

컨텐츠 영역의 크기를 지정하기 위해 width, height속성을 사용한다.

width: (크기) / (백분율) / auto <!---- 가로 ----> 
height: (크기) / (백분율) / auto <!---- 세로 ---->

** 박스 모델 전체의 너비 = content width+padding+border

:: padding

padding: (크기) / (백분율) / auto

** padding 속성의 활용 
padding: 20px; <!---- top의 여백만 20px로 표시 / left, right, bottom도 별도 표시 가능 ---->
padding: 10px 20px; <!---- top과 bottom은 10px, left와 right는 20px 여백 표시 ---->
padding: 5px 6px 7px 8px; <!---- 순서대로 top, right, bottom, left 다르게 여백 표시 ---->

:: border

텍스트 단락뿐만 아니라 그림, 표 등에도 적용 가능하며 테두리 두께, 스타일, 색상, 그림자 등에 변화를 줄 수 있다.

스타일 지정하기

border-style: none / hidden / dashed / dotted / double / groove / insert / solid

두께 지정하기

border-width: (크기) / thin / medium / thick

** border-width 속성의 활용 
border-top-width: 1px; <!---- top의 테두리만 1px로 표시 / left, right, bottom도 별도 표시 가능 ---->
border-width: thin thick; <!---- top과 bottom은 가늘게, left와 right는 굵게 표시 ---->
border-width: 1px 2px 3px 4px; <!---- 순서대로 top, right, bottom, left 다르게 표시 ---->

색상 지정하기

border-color: (색상명) / (16진수 표기) / (rgb) / (hsl)

** border-color 속성의 활용
border-top-color: red; <!---- top의 테두리만 빨간색 표시 / left, right, bottom도 별도 표시 가능 ---->

border로 스타일, 두께, 색상 속성을 묶어 표현할 수 있다.

border: 3px solid gray; <!---- 3px굵기의 회색 실선 ---->
border-top: 1px dotted red; <!---- top 1px굵기의 빨간색 점선 ---->

모서리 라운딩 변화주기

border-radius: (크기) / (백분율) <!---- 원형 ---->
border-raidus: (가로크기) (세로크기) / (가로 백분율) (세로 백분율) <!---- 타원형 ---->

** border-radius 속성의 활용
border-top-right-radius: 10px;
<!---- top-right의 모서리만 10px 만큼 라운딩 / top-left, bottom-right, bottom-left도 별도 표시 가능 ---->

그림자 효과내기

box-shadow: none / (수평거리) (수직거리) (흐림정도) (번짐정도) (색상)

:: margin

margin: (크기) / (백분율) / auto

** margin 속성의 활용 
margin: 20px; <!---- top의 여백만 20px로 표시 / left, right, bottom도 별도 표시 가능 ---->
margin: 10px 20px; <!---- top과 bottom은 10px, left와 right는 20px 여백 표시 ---->
margin: 5px 10px 20px <!---- top 20px, left와 right 10px, bottom 20px 여백 표시 ---->
margin: 5px 6px 7px 8px; <!---- 순서대로 top, right, bottom, left 다르게 여백 표시 ---->

*margin overlap

세로로 배치된 요소들 사이의 margin은 서로 중첩 된다.
아래와 같이 margin이 20px 일때 box1과 box2 사이의 margin은 40px이 아닌 20px이 된다.

CSS 레이아웃

:: box-sizing

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

box-sizing: content-box / border-box

:: float

웹 요소를 문서 위에 '떠 있게' 만든다는 뜻으로 요소를 오른쪽, 왼쪽, 어느 쪽도 아닌 곳에 배치한다. 배치 된 요소는 컨텐츠를 표시할 때 필요한 만큼의 공간만 차지한다.

float: left / right / none

:: clear

float 속성을 사용하면 다음 요소들에게도 동일하게 속성이 전달 된다. 따라서 더 이상 float 속성을 사용하지 않을 때 무효화 시키기 위해 사용한다.

clear: none / left / right / both

:: position

요소들을 자유자재로 배치해 주는 속성으로 텍스트나 이미지를 나란히 배치하거나 여러 개의 요소를 가로나 세로로 원하는 위치에 배치할 수 있다.

position: static / relative / absolute / fixed

** static 속성을 제외한 나머지 속성 값에서는 좌표를 이용하여 각 요소의 위치를 조절

:: visibility

특정 요소를 화면에 보이게 하거나 보이지 않게, 겹치게 설정하는 속성이다.

visibility: visible / hidden / collapse

** hidden 속성의 경우 display:none;과 다르게 요소가 차지하는 공간이 남아있음

:: z-index

요소가 서로 겹쳐질 때 쌓는 순서를 지정한다.

z-index: (숫자) <!---- 값이 작을수록 아래에 쌓임 ---->

신미영

Hello World!

이전 포스트

TIL 1. HTML

다음 포스트