css 핵심 개념 정리

* 코드잇 css 핵심 개념을 보고 정리한 글입니다 

 

 

📌 css 핵심 개념 정리

 

 

 

<기본 개념>

 

css 규칙 

 

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

 

 

 

css 선택자 

 

규칙에서 요소를 선택하는 데 사용하는 부분 

 

 

• 태그 이름

 

h3 {
  font-size: 24px;
}

 

 

• 아이디(id)

 

#을 붙여서 사용한다

아이디는 한 페이지 안에서 중복으로 쓰면 안된다 

 

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


#hallasan {
  color: #f56513;
}

 

 

• 클래스(class)

 

아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용한다.

맨 앞에 마침표를 붙여서 .클래스이름 과 같은 문법으로 사용한다 

 

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


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

 

 

• 색상 단위 

 

색상 코드

#FFFF00

 

RGB 

빨강,초록,파랑 순

rgb(255, 255, 0)

 

RGBA 

불투명도를 추가한 코드  1에 가까울수록 불투명해짐 

rgba(255, 255, 0, 0.5)

 

 

• 크기

 

절대적인 크기 단위: 픽셸(px)

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

 

퍼센트

-> 부모태그의 크기에 상대적으로 지정할 태 사용 

 

em

-> 부모태그 글자크기 기준 

 

rem

-> 최상위태그 글자크기 기준 

 

 

• 기본 코드 

 

글자 색 color

 

글자 크기 font-size

 

글꼴 font-family

 

글자 굵기 font-wegiht

 

줄 높이 line-height

 

텍스트 꾸미기 text-decoration 

 

* 텍스트에 밑줄을 넣거나 취소선을 넣거나 하는데 사용하는 속성 

 

 

---

<추가적인 css 속성>

 

• 배경 이미지 background-image

 

url(...)이라는 문법으로 배경 이미지를 넣는다 

 

background-image: url('flowers.png');

 

 

배경 이미지는 여러 개 넣을 수 있다

a,png아래에 b.png가 깔리고 맨 밑에 c.png가 깔린다 

background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');

 

 

• 배경의 반복 background-repeat

 

기본값은 repeat이고 no-repeat으로 하면 반복되지 않게 할 수 있다 

 

background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */

 

 

• 배경의 크기 background-size

 

직접 가로 세로 크기를 정할 수 있고 비율을 유지하면서 영역에 꽉 차게(cover)하거나, 영역 안에서 최대한 크게(contain)할

수도 있다

 

background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

 

 

• 그라디언트 linear-gradient()

 

기본적으로 시작 색상과 종료 색상으로 사용할 수 있다 

 

 background-image: linear-gradient(#000000, #ffffff);

 

기본 방향의 각도는 180도(위에서 아래로 내려오는 방향)

각도를 바꾸고 싶으면 맨 앞에다가 각도를 써주면 된다 (단위는 deg)

 

background-image:
linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

 

 

• 그림자 box-shadow

 

가로,세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread) 색상의 순서로 쓴다 

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/

 

 

• 불투명도 opacity 

 

요소 전체의 불투명도를 조절할 때 사용한다

opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */

 

 

📌gradient랑 box shadow는 코드를 만들어주는 사이트가 따로 있음 

 

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

https://cssgenerator.org/box-shadow-css-generator.html

Box Shadow CSS Generator

 

---

 

< 박스 모델 >

 

 

밖에서부터 차례대로 바깥 여백 마진, 테두리인 보더, 테두리와 실제 내용사이의 여백인 패딩, 실제 내용이 들어있는 콘테트 박스로 이루어져있다

 

 

• border 속성

 

주로 굵기 , 테두리  종류, 색상 순서로 쓴다 

 

border: 2px solid #ededed;

 

 

• border-radius 속성

 

박스 모델의 모서리를 둥글게 만들 때 사용한다

 

9999px로 하면 알약모양이 되고 50%로 하면 타원이된다

border-radius: 16px;

 

 

• box-sizing 속성

 

테투리까지 합친 영역의 크기를 구하고 싶으면 border-box를 사용하면 된다 

 

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

 

 

• overflow 속성

 

박스의 크기보다 내용이 많아서 넘칠 때 설정한다

 

hidden: 넘친 내용을 감춘다

auto: 넘치면 스크롤하게 만든다

scroll: 항상 스크롤 하게 만든다 

 

 

---

 

<Display>

 

 

 

 

• block

<h1..6>, <p> ,<div>

위에서부터 아래로 배치됨

너비와 높이를 지정할 수 있다

 

 

 

• inline

<a>,<span>

평소에 글 쓰는 방향 

화면에 꽉 차면 다음 줄로 넘어감

너비나 높이를 지정할 수 없음

(예외적으로 <img>같은 건 가능)

여백은 가로로(글 쓰는 방향)만 가능 

 

• inline-block 

인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성

 

 

 

• float 

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

 

 

 

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

 

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

 

 

 

---

 

<선택자> 

 

CSS 선택자

 

CSS 규칙에서 맨 앞에 적어주는 걸 CSS 선택자라고 부른다

선택자를 사용해서 이 규칙을 어떤 요소들에 적용할 지 선택할 수 있다 

선택자 {
  선언;
  선언;
  선언;
}

 

 

 

선택자 목록 

 

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

 

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

 

 

 

선택자 붙여쓰기 

 

여러 조건을 동시에 만족하는 요소를 선택하고 싶을 땐 선택자를 붙여서 사용한다 

 

 

• 아이디+클래스 

#mongolia.title

 

 

• 클래스+클래스 

.large.title

 

 

• 태그+아이디+클래스

h2#mongolia.large.title

 

 

 

자식 결합자 

 

오른쪽 꺾쇠 > 로 선택자를 이어준다 

 

 

.article > img {
  width: 100%;
}

 

 

자손 결합자

 

스페이스로 선택자를 이어준다 

 

.article img {
  width: 100%;
}

 

 

 

 

가상 클래스 

 

:hover (마우스 올렸을 때)

:active(클릭한 상태)

:visited(방문한 적이 있는 링크)

:focus(포커싱 됐을 때)

 

 

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

 

 

 

전체 선택자

* 로 모든 요소를 선택할 수 있다 

* {
  box-sizing: border-box;
}

 

 

n번째 자식선택자 

 

:nth-child()를 사용한다 

(1부터 시작한다) 

 

.gallery :nth-child(3) { ... } 
.gallery :nth-child(even) { ... }
.gallery :nth-child(2n) { ... }
.gallery :nth-child(odd) { ... }
.gallery :nth-child(2n+1) { ... }

.gallery :first-child { ... }
.gallery :last-child { ... }

 

 

 

 

모든 곳에서 border-box를 쓰고 싶을 때 

박스 모델의 크기는 기본적으로 content-box를 기준으로 정해지나 모든 요소의 크기를 테두리(border-box)를 기준으로 하고 싶을 때 * 선택자를 사용한다 

 

* {
  box-sizing: border-box;
}

 

 

클래스를 넣어 줄 태그가 너무 많을 때

 

자손 조합자는 적용해야할 태그가 많아서 일일이 적용하기 어려울 때 사용하면 좋다 

 

 

<div class="info">
  부엉이는
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EB%AA%A9" title="올빼미목">올빼미목</a>
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EA%B3%BC" title="올빼미과">올빼미과</a>의
  <a href="/wiki/%ED%95%9C%EA%B5%AD" title="한국">한국</a>에 서식하는
  <a href="/wiki/%EB%A7%B9%EA%B8%88%EB%A5%98" title="맹금류">맹금류</a> 중
  <a href="/wiki/%EC%86%94%EB%B6%80%EC%97%89%EC%9D%B4" title="솔부엉이">솔부엉이</a>,
  <a href="/wiki/%EC%88%98%EB%A6%AC%EB%B6%80%EC%97%89%EC%9D%B4" title="수리부엉이">수리부엉이</a>,
  <a href="/wiki/%EC%B9%A1%EB%B6%80%EC%97%89%EC%9D%B4" title="칡부엉이">칡부엉이</a>,
  <a href="/wiki/%EC%87%A0%EB%B6%80%EC%97%89%EC%9D%B4" title="쇠부엉이">쇠부엉이</a> 등을 통틀어 이르는 통칭이다.
  <a href="/wiki/%EA%B7%80%EA%B9%83" title="귀깃">귀깃</a>(우각)의 차이로
  <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8" title="올빼미">올빼미</a>와
  구분한다고도 하지만 솔부엉이와 쇠부엉이는 귀깃이 없기 때문에 이는 정확한 구분법은 아니다.
  주로 밤에 활동하는 야행성이다.
</div>

.info a {
  color: #379379;
  text-decoration: none;
}

 

 

가로 마진을 일정하게 하고 싶을 때 

세로 마진은 겹친다 (가로 마진은 안 겹친다)

 

chip과 chip사이에 일정하게 가로 마진을 주고 싶다면 margin-right 와 margin-left를 활용하면 된다 

 

<span class="chip">섬</span>
<span class="chip">해변</span>
<span class="chip">오두막</span>

 

.chip {
  background-color: #dedede;
  text-align: center;
  display: inline-block;
  width: 100px;
  padding: 16px;
  margin-right: 24px;
  border-radius: 9999px;
}

.chip:first-child {
  margin-left: 24px;
}

 

 

 

 

 

 

---

 

 

<스타일 계산하기 > 

 

캐스케이드(Casecade)

 

•  최종적으로 적용할 css 속성들을 결정할 때 계단식 폭포처럼 css 규칙을 순서에 따라 합쳐서 적용하는 것을 말함

•  우선순위가 높은 규칙일 수록 우선적으로 속성을 적용 

•  브라우저에서 기본으로 제공하는 스타일시트는 똑같은 선택자를 쓰고 있다면 직접 작성한 코드보다 우선순위가 낮다 

 

코드 상의 순서

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

 

 

명시도 

선택자마다 명시도 점수가 있다

아이디 개수, 클래스 개수, 태그 개수를 적어서 점수를 비교 

 

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

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

 

 

상속 

부모 태그에 적용된 CSS 규칙은 자손에게도 상속된다 (다만 모든 속성이 상속 되는 것은 아니다) 

 

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

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

 

 

상속된 속성의 우선순위 

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

<body>
    <div id="info">
      <p class="description">
        ...<a class="order" ...>주문</a>
      </p>
    </div>
</body>

body {
  color: #000000;
}

#info {
  color: #aaaaaa;
}

.description {
  color: #bbbbbb;
}

.order {
  color: #cccccc;
}

 

a.order 태그에 적용되는 속성들은 캐스케이딩의 우선순위가 높은 순으로 나열

.order {
  color: #cccccc;
}


/* p.description 태그(부모 태그)에서 상속받은 속성 */
{
  color: #bbbbbb;
}

/* div#info 태그(조부모 태그)에서 상속받은 속성 */
{
  color: #aaaaaa;
}

/* body 태그(증조부모 태그)에서 상속받은 속성 */
{
  color: #000000;
}