CSS 핵심 개념

Notice

Recent Posts

Recent Comments

Link

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

JiYoung Dev 🖥

CSS 핵심 개념 본문

full stack/HTML, CSS

CSS 핵심 개념

Shinjio 2023. 3. 3. 17:41

2023.03.01 ~ 2023.03.03 코드잇 학습내용

🔎 CSS 규칙

HTML태그에 스타일 속성을 추가하여 스타일을 입힐 수 있었음. 그러나 이 방법은 동일한 속성을 주고 싶은 태그가 여러 개일 때 스타일을 입히는 게 번거로워짐. 따라서 관심사의 분리(seperation of concerns)를 진행함. 즉, 내용과 스타일을 분리하는 것. 관심사를 분리하면 내용과 스타일을 따로 고치기 편하고, CSS 파일을 따로 저장하기 편함. 따라서 CSS 속성을 하나하나 태그에 넣기보다는 CSS 규칙을 정해 놓고 사용하는 것을 권장함

기본 문법:
선택자 {
속성: 속성값;
속성: 속성값;
}

작성 예:
h3 {
color: #ffffff;
font-size: 20px
}

🔎 CSS 선택자

규칙에서 요소를 선택하는 데 사용되는 부분으로 태그 이름, id, class로 구분할 수 있음

📖 태그이름

h1, div 같은 태그를 선택자로 쓰면 그 태그에 해당하는 요소 전체에 모두 스타일을 적용함

h3 {
font-size: 24px
}

📖 아이디(id)

맨 앞에 샾을 붙여서 #아이디_이름과 같은 문법으로 사용. 아이디는 한 페이지 안에서 중복해서 사용할 수 없음(태그 하나밖에 선택할 수 없음)

html 코드
<h3>우도</h3>
<h3 id="hallasan">한라산 국립공원</h3>
<h3>성산 일출봉</h3>
<h3>군산 오름</h3>

CSS 코드
#hallasan{
color: #f56513;
}

📖 클래스(class)

태그를 여러 개 선택하여 스타일을 적용하고 싶을 때 사용. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 씀.

HTML 코드
<h3 class="place">우도</h3>
<h3 class="place" id="hallasan">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>

CSS 코드
.place{
font-size: 16px;
font-weight: 400;
}

🔎 CSS 파일 저장하는 법

HTML 파일에 CSS 코드를 작성하면 보기 어려움. 따라서 CSS파일을 따로 저장함.

① 파일명.css 이름으로 파일을 생성하고 코드를 작성하여 저장

② html 문서에서 <link> (현재 문서 바깥에 있는 파일을 불러오는 태그) 활용해 CSS 코드 html에 적용

<link rel="stylesheet" href="파일명.css">

rel은 relation의 약자로 불러오는 파일과 html 파일과의 관계를 뜻함

href는 경로 (만약 같은 폴더에 있으면 파일명만 작성하면 됨. 다른 폴더에 있으면 경로 작성해야 함)

🔎 색상, 크기 단위

📖 색상을 나타내는 방법

⚙ 색상 이름 (color names)

red, yellow, white 등과 같이 표현

세세한 색깔을 나타내기 힘들어 잘 사용 안 함

⚙ 색상 코드 (color codes)

css에서 가장 많이 사용하는 방식

#으로 시작하고 숫자와 문자(a~f)로 조합한 여섯 자리

색상을 만드는 방법에는 2가지가 있음. CMYK방식(물감)과 RGB(빛) 방식
CMYK 안료의 삼원색은 yellow, cyan, magenta
RGB 방식의 삼원색은 red, green, blue

CSS에서는 모니터에서 보이는 색상을 만드는 것이므로 빛의 삼원색인 RGB를 사용
RGB 3원색 중 red는 rgb(255, 0, 0)
green은 rgb(0, 255, 0)
blue는 rgb(0, 0, 255)
red와 green을 섞으면 yellow가 되므로 yellow의 RGB는 rgb(255, 255, 0)
red, green, yellow를 모두 섞으면 white가 되므로 white의 RGB는 rgb(255, 255, 255)

이렇게 rgb의 값을 16진수로 표현한 것을 색상코드라 함
0 → 00
64 → 40
128 → 80
192 → c0
255 → ff

이를 이용하여 RGB 색상을 색상 코드로 표현하면
red는 ff0000
green은 00ff00
blue는 0000ff
yellow는 ffff00
white는 ffffff

⚙ RGB

빨강, 초록, 파랑 값을 10진수로 써서 색상을 나타낸 것

⚙ RGBA

RGB에 알파(불투명도)를 추가한 것

불투명도는 0~1 사이의 소수점 숫자 (0 완전 투명 0.5 반투명 1 불투명)

📖 다양한 크기 단위

⚙ 절대적인 단위 : 픽셀

화면을 표시하는 기준이 되는 가장 작은 정사각형

PPI(picxel per inch) : 모니터에서 1인치 정사각형 안에 픽셀이 몇 개나 들어가는지를 나타내는 단위로 촘촘한 모니터일수록 해상도가 높음

⚙ 상대적인 단위 : 퍼센트(%), em, rem

퍼센트(%)

부모 태그에 대한 상대적인 크기. 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨

em, rem

글자 크기를 기준으로 상대적인 크기

- em

인쇄에서 전통적으로 대문자 M의 크기

CSS에서 1em = 부모 태그의 font-size

- rem

1rem = <html> 최상위 태그의 font - size

글자 크기에 맞춰 여백을 주고 싶을 때에 자주 사용

※ CSS에서 코멘트 달기 : /* 내용 */

🔎 자주 쓰이는 CSS 속성

📖 배경 이미지 넣기

url 안에는 파일 주소나 경로를 넣고, 따옴표는 없어도 괜찮지만 특수 문자가 있는 경우 따옴표가 필요함

배경이미지는 기본적으로 타일 형태로 깔림

또한, 배경 이미지를 여러 개 넣을 수도 있음

기본 문법:
background-image: url('파일명');

배경 이미지를 여러개 넣을 때:
background-image:
url('a.png'), /* 제일 위에 보이는 이미지 */
url('b.png'),
url('c.png');

⚙ 배경 이미지를 꽉 차게 하는 방법 : 배경의 반복

background-repeat: no-repeat; /* 반복 안 함*/
background-repeat: repeat; /*기본값*/
repeat-x는 가로만 반복
repeat-y는 세로만 반복

⚙ 배경의 위치

이미지를 어떤 위치를 기준으로 정렬할지

background-position: center;
bottom, left, right, top 등 위치 기준을 바꿀 수 있음

⚙ 배경의 크기

background-size: cover;
background-size: 40px 30px /* 가로 40px, 세로 30px */

cover - 비율을 유지하면서 꽉 차게. 이미지가 잘릴 수 있음
contain - 비율을 유지하면서 최대한 크게. 이미지가 잘리지 않음

📖 그라디언트(gradient)

background-image 속성 사용

위에서 아래로 갈수록 투명해짐
background-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)

각도를 추가하고 싶으면 색상 앞에 각도 추가
background-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0)

그라디언트의 단계마다 비율을 다르게 하고 싶다면 중간에 40% 이런 식으로 적어주면 됨
background-image: linear-gradient(90deg, rgba(0,0,0,1), 40%, rgba(0,0,0,0)

그라디언트는 이렇게 직접 작성하는 것보다는 css gradient generator를 사용하면 편하게 작성할 수 있음

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

이미지 위에 반투명한 그라디언트 겹치는 방법

background-image:
linear-gradient(90deg, rgba(0,0,0,1), 40%, rgba(0,0,0,0),
url('pizza.png');

📖 그림자 (box-shadow)

box-shadow: 10px 15px rgbs(0, 0, 0, 0.4)
그림자가 가로로는 10px, 세로로는 15px 생김

흐림 효과 넣기
box-shadow: 10px 15px 20px rgbs(0, 0, 0, 0.4)

그림자가 얼마나 퍼질지 (퍼지는 크기)
box-shadow: 10px 15px 20px 5px rgbs(0, 0, 0, 0.4)

📖 불투명도

값이 1에 가까울수록 불투명, 0에 가까울수록 투명

요소 전체가 반투명해짐

배경색만 반투명하게 만들고 싶다면 rgba를 활용하면 됨

opacity: 0.5

🔎 박스 모델 (box model)

웹페이지에서 모든 요소들은 박스 모델을 따름. 밖에서부터 차례대로 바깥 여백인 마진, 테두리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제 내용이 들어가는 콘텐츠 박스가 있음

📖 padding : 영역 안쪽에 여백을 넣을 때 사용

padding: 16px 8px 24px 10px;

<padding 속성> - 위와 동일한 코드
padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

📖 margin : 영역 바깥쪽 여백을 넣을 때 사용

margin은 너비를 설정해 주고 가로 여백을 auto로 작성하여 바깥 여백을 자동으로 채우는 설정을 할 수 있음

margin: 16px 8px 24px 10px;

<margin 속성> - 위와 동일한 코드
margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

📖 border와 border-radius

주로 굵기, 테두리 종류(solid, dotted, dashed), 색상 순서로 작성

border-radius 속성을 사용하여 박스 모델의 모서리를 둥글게 만들 수 있음. border 속성이 없어도 사용 가능. 값이 커질수록 둥글어짐

border: 1px solid #dedede
border-radius: 8px

📖 box-sizing

기본적으로 width와 같이 요소에 크기를 지정하는 그 크기는 박스 모델에서 콘텐트 영역의 크기를 의미함.

border와 padding을 포함한 크기는 box-sizing: border-box (border를 기준으로 박스 사이즈를 지정)를 사용하면 됨

#box {
margin:20px;
padding:30px;
width:100px;
box-sizing: border-box;
}

모든 요소에 같은 스타일 적용하려면 * 사용

* {

}

📖 overflow

박스의 크기를 지정했을 때 내용이 많아서 박스 밖으로 넘치는 경우가 있음. 이를 오버플로우라고 함.

이럴 때는 내용을 감추거나 스크롤을 적용해 주면 됨

overflow: hidden; (넘치는 내용 숨기기)
overflow: auto; (넘치면 스크롤)
overflow: scroll; (넘치는 내용 항상 스크롤)

가로 스크롤 적용
white-space: nowrap; 작성

📖 마진 상쇄

일반적으로 세로로 마진값이 들어갔을 때 마진 상쇄가 일어남. 이웃하는 요소들끼리에는 마진 상쇄가 일어나고, 부모 자식 사이에도 마진 상쇄가 일어날 수 있음. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치치 않음

🔎 디스플레이 (Display)

디스플레이 속성에는 블록과 인라인이 있음

📖 블록(block)

위에서 아래로 차례대로 배치되는 요소로 크기를 지정할 수 있음

📖 인라인(inline)

글을 쓰는 방향으로 줄이 바뀌면서 배치되며 블록과 달리 크기를 지정할 수 없음. (단, img는 예외적으로 크기 지정 가능)

📖 인라인 블록(inline block)

배치는 인라인처럼 되지만 블록처럼 크기가 있는 요소

display: inline-block;
display: none → css에서 html 코드를 안 보이게 하고 싶을 때 사용

📖 float

요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있음

float: right; 블록 맨 오른쪽에 배치하고 나머지 인라인들이 자리를 비켜줌
float: left; 블록 맨 왼쪽에 배치하고 나머지 인라인들이 자리를 비켜줌

블록, 인라인 블록, 인라인 비교

	블록	인라인블록	인라인
기본 크기	좌우로 꽉 참	콘텐트에 딱 맞게	콘텐트에 딱 맞게
배치	위에서 아래로	글 쓰는 방향	글 쓰는 방향
width와 height	O	O	X
margin과 padding	O	O	인라인 진행 방향(=가로)만 제대로 사용 가능

🔎 선택자 (selector)

📖 선택자 목록 (selector list)

콤마( , )로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있음

선택자1,
선택자2 {
...
}

📖 선택자 붙여쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶을 때 사용

html에서 여러 클래스 작성하기
<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2>
- 여러 클래스를 만들려면 띄어쓰기를 하면 됨

css에서 여러 조건을 동시에 만족하는 요소 선택하여 스타일 입히기
1. 아이디 + 클래스
#mongolia.title
2. 클래스 + 클래스
.large.title
3. 태그 + 아이디 + 클래스
h2#mongolia.large.title

📖 자식 결합자 (child combinator)

오른쪽 꺾쇠로 선택자를 이어줌.

<div class="article">
<img src="...">
...
</div>

부모 선택자 article 아래 자식 선택자 img를 선택하려면 아래와 같이 자식 결합자 사용 가능

.article > img {
width: 100%;
}

📖 자손 결합자 (descendant combinator)

스페이스(띄어쓰기)로 선택자를 이어주면 됨. 보통 자식 결합자보다 자손 결합자를 많이 사용.

<div class="article">
<img src="...">
...
</div>

부모 선택자 article 아래 자손 선택자 img를 선택하려면 아래와 같이 자손 결합자 사용 가능

.article img {
width: 100%;
}

※ 자식과 자손의 차이

자식은 부모 바로 밑에 있는 자손 태그를 말하며, 자손은 부모 밑에 있는 모든 하위 태그를 말함. 따라서 자손 > 자식으로 자손의 범위가 더 큼. 즉, 어떤 태그의 모든 하위 태그에 적용하고 싶으면 자손 선택자를, 어떤 태그의 자식 태그에만 적용하고 싶으면 자식 선택자를 사용

※ n번째 자식 선택자 (n-th child selector)

:nth-child() 사용하여 괄호() 안에 몇 번째 자식을 선택할 것인지 넣으면 됨. even, odd, 2n 값도 들어갈 수 있음

세 번째 자식
.gallary :th-child(3)

짝수 번째 자식
.gallary :nth-child(even)
.gallary :nth-child(2n)

홀수 번째 자식
.gallary :nth-child(odd)
.gallary :nth-child(2n+1)

첫 번째 자식
.gallary :first-child

마지막 자식
.gallary :last-child

📖 가상 클래스 (pseudo-class)

요소의 상태를 선택할 때 사용하는 클래스로 대표적으로 :hover (마우스를 올렸을 때), :active (클릭한 상태), :visited (방문한 적이 있는 링크), :focus (포커싱 되었을 때) 등이 있음.

예. 마우스를 올렸을 때 밑줄이 생기게 하는 코드

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

🔎 캐스케이드 (cascade)

최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용함.

📖 캐스케이드 순서

⚙ 스타일 시트의 종류에 따른 순서

우리가 작성한 CSS 스타일 시트 > 브라우저에서 기본으로 제공하는 스타일시트 (user agent stylesheet)

⚙ 코드 상의 순서

코드에서 아래쪽에 쓴 코드일수록 우선순위가 높음

⚙ 명시도 (specificity)에 따른 순서

명시도란 아이디의 개수, 클래스 개수, 태그 개수를 적어 점수를 비교한 값으로 점수가 높을수록 우선순위가 높음

a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
...
}

a#info { /* 아이디 1, 클래스, 태그 1 = 명시도 1 0 1 */
....
}

a#info.order { /* 아이디 1, 클래스 1, 태그 1 = 명시도 1 1 1 */
....
}

📖 상속

부모 태그에 적용된 CSS 규칙은 자손에게도 상속됨. 모든 속성이 상속되는 건 아니고, 상속되는 속성이 정해져 있음

가까운 조상에게 물려받은 속성일수록 우선순위가 높음

상속되는 속성들 : color, font-family, font-size, font-weight, line-height, text-align, ...

'full stack > HTML, CSS' 카테고리의 다른 글

WEB & HTML 정의와 역사 / HTML 태그 (2023.04.21) (1)	2023.04.23
CSS 레이아웃 : Position, Flex (0)	2023.03.08
HTML 핵심 개념 (0)	2023.03.06
[웹퍼블리싱] CSS 시작하기 / 페이지끼리 연결하기 (0)	2023.02.28
[웹퍼블리싱] HTML 시작하기 (0)	2023.02.28

'full stack/HTML, CSS' Related Articles

JiYoung Dev 🖥

CSS 핵심 개념 본문

CSS 핵심 개념

🔎 CSS 규칙

🔎 CSS 선택자

📖 태그이름

📖 아이디(id)

📖 클래스(class)

🔎 CSS 파일 저장하는 법

🔎 색상, 크기 단위

📖 색상을 나타내는 방법

⚙ 색상 이름 (color names)

⚙ 색상 코드 (color codes)

⚙ RGB

⚙ RGBA

📖 다양한 크기 단위

⚙ 절대적인 단위 : 픽셀

⚙ 상대적인 단위 : 퍼센트(%), em, rem

🔎 자주 쓰이는 CSS 속성

📖 배경 이미지 넣기

⚙ 배경 이미지를 꽉 차게 하는 방법 : 배경의 반복

⚙ 배경의 위치

⚙ 배경의 크기

📖 그라디언트(gradient)

📖 그림자 (box-shadow)

📖 불투명도

🔎 박스 모델 (box model)

📖 padding : 영역 안쪽에 여백을 넣을 때 사용

📖 margin : 영역 바깥쪽 여백을 넣을 때 사용

📖 border와 border-radius

📖 box-sizing

📖 overflow

📖 마진 상쇄

🔎 디스플레이 (Display)

📖 블록(block)

📖 인라인(inline)

📖 인라인 블록(inline block)

📖 float

🔎 선택자 (selector)

📖 선택자 목록 (selector list)

📖 선택자 붙여쓰기

📖 자식 결합자 (child combinator)

📖 자손 결합자 (descendant combinator)

📖 가상 클래스 (pseudo-class)

🔎 캐스케이드 (cascade)

📖 캐스케이드 순서

⚙ 스타일 시트의 종류에 따른 순서

⚙ 코드 상의 순서

⚙ 명시도 (specificity)에 따른 순서

📖 상속

'full stack > HTML, CSS' 카테고리의 다른 글

티스토리툴바