css 기본 (3-4회차)

728x90

css

css는 캐스케이딩 스타일시트( Cascading Style Sheet)를 의미함

Cascading : 폭포 같은, 계속 되는, 연속적인
Style : 멋을 내다
Sheet : (종이나 문서) 한장

=> 연속적으로 스타일을 정의하는 문서

css는 스타일을 정의하는 문서 형식이다. 태그와 태그가 중첩되어 연속적인 구조를 지닌 html문서에 스타일을 추가함

문법

css 코드는 다수의 '스타일 선언문'으로 구성됨

선택자 {
	속성명: 속성값;
}

선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
중괄호 {} : 선택한 요소에 적용할 스타일을 정의하는 영역
속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보
속성값 : 어떻게 정의하고 싶은지에 대한 정보

예)

p{
	color:red;
}

주석

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

/* 주석의 내용 */

css문서 사용하기

html 문서에 css 문서를 적용하고자 할 때는 다음과 같은 방식을 사용할 수 있음

인라인 스타일 : 태그에 직접 기술하기
스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술
문서 간의 연결 : 스타일시트 문서를 따로 작성하여 html문서와 연결

인라인 스타일

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식

따라서 선택자는 필요없음

웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

<p style = "color:blue;">
	글자가 파란색
</p>

스타일태그

html 문서에 <style></style> 태그를 추가하여 그 안에 css 코드를 작성할 수 있음

'내부 스타일시트'라 표현하기도 함

<style>
	p{
		color:red;
	}
</style>

문서간의 연결

확장자가 *.css인 스타일시트 파일을 생성해 그 안에 css 코드를 작성하고, html문서에 이를 연결해줄 수 있다. 이때는 <link> 태그를 사용해야한다.

<link href="./style.css" rel="stylesheet">

href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel : 현재 문서(html)와 외부 소스의 연관 관계를 기술하는 속성

=> <link> 태그는 Html문서의 <head></head> 내부에 사용

기본 선택자

선택자 유형

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다.이때 요소는 오직하나만 선택할 수도 있고 여러 개를 동시에 선택할 수도 있다.css는 다음과 같이 여러가지 유형의 선택자를 지원한다.

전체 선택자
태그 선택자
클래스 선택자
아이디 선택자
그룹 선택자

선택자	의미	사용기호
전체 선택자	문서 내 모든 요소를 선택	*
태그 선택자	특정 태그로 만들어진 모든 요소를 선택	태그명
클래스 선택자	특정 클래스 값이 지정된 모든 요소를 선택	.클래스값
아이디 선택자	특정 아이디 값이 지정된 모든 요소를 선택	#아이디값
그룹 선택자	여러 유형의 선택자를 한꺼번에 선택	선택자,선택자,선택자 ...

박스모델

브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간임. 따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가짐

박스 모델은 너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델

css로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며, css는 영역 별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공함

	바깥쪽 여백
	경계선
	안쪽 여백
	콘텐츠 영역 ↑ 콘텐츠 높이 ←콘텐츠 너비 →
	안쪽여백
	경계선
	바깥쪽 여백

영역	설명	관련 속성
콘텐츠 영역	요소 내에 포함된 콘텐츠를 표시하는 영역	width,height
안쪽 여백	테두리 안에서 콘텐츠 주변을 감싸는 여백	padding
경계선(테두리)	콘텐츠와 안쪽 여백을 둘러싸는 테두리	border
바깥쪽 여백	테두리 바깥에서 요소를 감싸는 여백	margin

*개발자 도구(f12)를 이용하면 박스모델 확인할 수 있음

콘텐츠 영역의 너비를 결정할 때는 width속성을, 높이를 결정할 때는 height 속성을 사용함

두 속성은 모두 크기를 결정하기 위해 사용하는 속성이므로, 속성값을 결정할 때는 수치와 단위를 함께 입력해주어야 함.

테두리 스타일

테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 유용한 영역

테두리 스타일을 정의할 때는 단축속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법을 사용

속성명	용도
border-width	테두리의 두께를 지정
border-style	점선, 실선, 겹선 등으로 테두리의 모양을 지정
border-color	테두리의 색상을 지정
border	테두리의 두께, 모양, 색상 등을 한번에 지정

border-radius

박스 모델의 테두리에는 네개의 모서리가 존재하는데, css의 border-radius 속성을 사용하면 모서리를 둥글게 만들 수 있다.

여백다루기

여백의 안쪽, 바깥쪽 여부는 테두리를 기준으로 정해진다.

<margin> | <padding> [콘텐츠 영역]

테두리

박스모델의 여백에는 네 개의 면이 존재하는데, 속성값 사용 갯수에 따라 네 면의 여백 크기를 달리 정할 수 있음

개수	설명	예
1	여백의 모든 면에 동일한 값을 지정	margin : 10px;
2	위 아래 여백과 왼쪽 오른쪽 여백의 값을 따로 지정 ↑,↓	margin: 10px 20px;
3	윗쪽,왼쪽오른쪽,아래쪽 여백 순서로 값을 지정 ↑,←→,↓	margin: 10px 20px 15px;
4	윗쪽,오른쪽,아래쪽,왼쪽 순서대로 각각 따로 지정↑,→,↓,←	maring: 10px 20px 30px 40px;

box-sizing

width나 height를 사용하면 콘텐츠 영역의 크기를 결정할 수 있다. 여기에 padding 속성을 추가 정의하면 여백이 생기면서 요소가 기존보다 커지게 되는데, 이를 원치 않을 경우에는 box-sizing 속성을 사용할 수 있다.

배경속성

콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있다. 박스 모델에 배겨으로 추가된 색상이나 이미지 등은 박스 모델의 바깥쪽 여백을 제외 한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침 한다.

background

접미사	설명	속성값 유형
-color	요소의 배경 색상 지정	색상
-clip	요소 내 배경의 적용 범위	별도의 키워드
-image	요소의 배경 이미지 지정	이미지 Url
-origin	요소 내 배경의 시작 위치	별도의 키워드
-size	배경 이미지의 크기	수치와 단위
-position	배경 이미지의 위치	수치와 단위
-repeat	배경 이미지의 반복 패턴	별도의 키워드

색깔 지정

color

글자 색을 지정할 때는 color 속성을 사용하며, 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일하다.

색상을 나타내는 키워드(영단어)를 입력한다.
rgb 함수 : rgb 함수에 수치를 입력해 색상을 결정한다.
hsl 함수 : hsl 함수에 수치를 입력해 색상을 결정한다.
16진수 값 : 빨강, 초록, 파랑의 비율을 16진수로 표현해 색상을 결정한다.

RGB 함수 사용법

rgb란 빛의 3원색인 red, green, blue의 줄임말임. css는 빨강, 초록, 파랑 각 색상의 비율을 지정해 결정할 수 있는 rgb 함수와 투명도를 추가 지정할 수 있는 rgba 함수를 각각 지원하는데, 두 함수의 사용법은 다음과 같음

rgb(값1, 값2, 값3)
rgba(값1, 값2, 값3, 값4)

HSL 함수 사용법

hsl 함수는 색조(Hue)와 채도(saturation), 그리고 조도(lightness)를 각각 지정해 색상을 결정하는 함수다. 투명도를 추가로 지정하고자 할 때는 Hsla 함수를 사용한다. 사용법은 위와 동일

16진수 값 사용법

색상을 지정할 때는 해시(#)기호로 시작하는 여섯자리 16진수 값을 입력하는 방법을 사용하기도 한다. 이때 입력하는 16진수 값을 'RGB 색상 코드' 라 부르기도 함

#RRGGBB

#RRGGBBAA

글꼴 속성 적용

Font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성이다.

P{
	font-family:Arial, Helvetica, sans-serif;
}

font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있다. 입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값을 지정하는데, 이 경우 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용된다.

웹 폰트 사용하기

웹 폰트란 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용할 수 있는 '웹 전용 글꼴'을 뜻한다. 앞서 font-family를 이용한 글꼴 적용시 잘못 입력된 글꼴이거나 시스템에 설치되어 있지 않은 글꼴인 경우에는 요소에 적용되지 않지만 웹 폰트를 이용하면 그러한 문제가 발생하는 것을 방지할 수 있다.

텍스트 속성

텍스트에도 크기, 색상, 정렬 방식 등의 다양한 속성이 존재한다.

속성명	설명	속성값 유형
Font-size	글짜 크기 지정	수치와 단위
font-weight	글짜 두께 지정	별도의 키워드
line-height	행 높이 지정	수치와 단위
text-align	텍스트 정렬 방식 지정	별도의 키워드
text-decoration	텍스트 줄 긋기	별도의 키워드

텍스트 단위

크기를 지정할 때는 수치와 함께 단위를 지정하곤 한다. 이는 글자 크기에 대해서도 마찬가지이다.

단위	용도
rem	루트 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
em	부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위

*루트 요소란 문서의 시작 부분을 뜻하는 것으로, html태그를 의미한다.

요소의 유형

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다

(ex : div, p, h1 등)

인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.
(ex : span, a 등)

display

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다. 즉, 요소의 유형을 변경할 수 있다.

div{
	display:inline;
}
블록 레벨 요소인 div 요소를 인라인으로 처리하고싶을경우 

a{
	display:block;
}
인라인 요소인 a 요소를 블록 레벨로 처리하고 싶을경우

속성명	설명
none	요소를 화면에 표시하지 않는다
block	요소를 블록 레벨 요소로 만든다
inline	요소를 인라인 요소로 만든다
inline-block	요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가한다.

float

css의 float 속성은 요소를 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경한다.

선택된 요소가 문서의 흐름에서 제어되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치되도록 하는 특징을 가지고 있다.

사용 가능한 속성값으로는 왼쪽을 뜻하는 left, 오른쪽을 뜻하는 right, 그리고 float을 적용하지 않음을 뜻하는 none이 있다.

float 속성을 적용한 요소를 '부동 요소'라 부르기도 한다. 부동 요소는 위치를 이동하면서 다른 요소의공간에까지 영향을 주는데, 이는 잘 활용하면 유용하지만 float을 적용하지 않은 요소의 공간에 영향을 주어 때로는 역효과를 가져온다.

이러한 상황에 대응하기 위해 사용하는 속성으로는 clear가 있다.

*요즘은 float 대신 flex를 많이 활용한다

position

position은 문서상에 요소를 배치하는 방법을 정의한다.

position이 요소의 배치방법을 결정하면 top,bottom,right,left가 최종 위치를 결정하는 방식이다.

position : 이렇게 배치할거임;
top : 윗면에서 얼만큼 떨어뜨릴거임;
right : 오른쪽면에서부터 얼만큼 떨어뜨릴거임;
bottom : 아랫면에서부터 얼만큼 떨어뜨릴거임;
left: 왼쪽면에서부터 얼만큼 떨어뜨릴거임;
=> 상하좌우 위치 지정은 필요에 따라 선택적으로 사용함

position 속성

속성값	설명
static	기본값으로, 요소를 인반적인 문서의 흐름에 맞게 배치함
relative	문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동시킴
absolute	position이 지정된 상위 요소를 기준으로 요소를 이동시킴 이때 요소는 문서의 흐름에서 제외됨
fixed	화면을 기준으로 요소의 위치를 고정함

z-index

z-index 속성은 요소의 쌓임 순서 (stack order)를 정의할 수 있다.

정수 값을 지정하여 쌓임 맥락(staking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

=> 위치 지정 요소(positioned element)란 postion 속성이 정의 되어있는 요소를 말한다.

동일한 위치에 요소들이 배치되면, 요소들은 z-축에서 쌓이게 된다.

z-index의 기본 값은 auto이며, 정수 값으로 각 요소의 쌓임 순서를 결정한다. auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.

overflow

요소는 텍스트 또는 다른 요소를 자신의 콘텐츠로 가질 수 있고, 요소 내부의 콘텐츠 양이 많아질수록, 요소는 콘텐츠에 맞게 크기를 조절한다. 그러나 요소의 크기가 정해져있는 상태에서 내부 콘텐츠의 크기가 요소보다 커지는 상황이 발생하면, 콘텐츠가 요소의 영역밖으로 벗어나 버리는 '넘침 현상'이 발생하기도 한다. 이러한 문제를 해결하기 위해서는 overflow 속성을 사용해야한다.

속성값	설명
visible	기본값으로, 영역을 벗어난 콘텐츠를 그대로 보여줌
hidden	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함
scroll	영역을 벗어난 콘텐츠를 잘라내어 보이지 않게하고, 잘려진 콘텐츠 진행방향으로 스크롤을 만드
auto	웹 브라우저의 설정 값을 따름 데스크톱 브라우저애서는 주로 scroll 처리함

선택자

css에는 요소가 가진 다양한 특성을 토대로 스타일을 적용할 수 있는 여러가지 방법이 존재함

속성 선택자
하위 요소 선택자
자식 요소 선택자
인접 형제 선택자
형제 요소 선택자

선택자	의미	사용 기호
속성 선택자	특정 속성을 명시하여 요소를 선택	[속성명]
하위 요소 선택자	상위 요소에 포함된 하위 요소를 선택	공백
자식 요소 선택자	상위 요소의 바로 한 단계 하위 요소를 선택	>
인접 형제 선택자	형제 요소 중 첫 번째 형제 요소를 선택	+
형제 요소 선택자	형제 요소를 선택	~

의사 클래스(가상클래스)

의사클래스는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

선택자:의사클래스{
	속성명: 속성값;
}

↓

h1:hover{
	color:red
}

=> h1 요소에 마우스 커서가 올라오면(hover) 글자를 빨간색으로 바꾸겠음

속성값	설명
hover	마우스 포인터가 요소에 올라가 있다.
active	사용자가 요소를 활성화했다(클릭 다운)
focus	요소가 포커스를 받고 있다
disabled	비활성 상태의 요소이다
nth-child	형제 사이에서 순서에 따라 요소를 선택한다.

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

선택자::의사요소{
	속성명:속성값;
}

↓
li::first-letter{
	font-size:20px;
}

=>li 요소의 첫 번째 글자만 크기를 20px로 하겟음(기본값 16px)

자주 사용되는 의사요소

속성값	설명r
after	요소의 뒤에 의사 요소를 생성 및 추가
before	요소의 앞에 의사 요소를 생성 및 추가
first-line	블록 레벨 요소의 첫 번째 선에 스타일을 적용
marker	목록 기호의 스타일을 적용
placeholder	입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다.

강의 느낀점

사실,, css 강의들만 해도 4번째이다,, 들을때마다 강사님들 마다 알려주는 속성들이 조금씩 달라서 신기하다

오랜만에 css만 계속 하니까 재밌다.. 뭔가 까먹고 있던 이론들을 다시 알게 되니까 새로 배우는 기분,,,

'css' 카테고리의 다른 글

Vanilla Extract란 (0)	2024.05.07