Language/Css

CSS 핵심 개념 문법 한 장 정리 - 선택자, 텍스트, 이미지, 박스모델, 디스플레이

재은초 2023. 10. 5. 16:33
반응형

CSS 기본 규칙

선택자1,
선택자2 {
  속성: 속성값;
  속성: 속성값;
}

 

CSS 선택자

전체 선택자

* {
  box-sizing: border-box;
}

태그 이름

h3 {
  font-size: 24px;
}

아이디

  • 맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 씁니다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 됩니다.
#hallasan {
  color: #f56513;
}

클래스

  • 아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용합니다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 씁니다. 
.place {
  font-size: 16px;
  font-weight: 400;
}

가상 클래스

  • 가상 클래스는 의사 및 가짜 클래스라고도 부르는데, 요소의 상태 같은 걸 선택할 때 사용하는 클래스입니다. 정해진 이름 앞에 콜론(:)을 붙여서 사용합니다. 대표적으로 :hover(마우스를 올렸을 때),  :active(클릭한 상태), :visited(방문한 적이 있는 링크), :focus(포커싱 됐을 때)등이 있습니다.
a:hover {
  text-decoration: underline;
}

n번째 자식 선택자

  • :nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임)
.gallery :nth-child(22) { ... }        /* .gallery의 22번째 자식 */

.gallery :first-child { ... }          /* 첫 번째 자식 */
.gallery :last-child { ... }           /* 마지막 자식 */

.gallery :nth-child(even) { ... }     /* .gallery의 짝수 번째 자식 */
.gallery :nth-child(2n) { ... }

.gallery :nth-child(odd) { ... }      /* .gallery 의 홀수 번째 자식 */
.gallery :nth-child(2n+1) { ... }

자식 결합자

  • 자식은 이후 1세대를 말하며, 오른쪽 꺾쇠로 선택자를 이어 줍니다.
.클래스 > 태그명 { }

자손 결합자

  • 자손은 이후 모든 세대를 말하며, 스페이스(띄어쓰기)로 선택자를 이어 줍니다. 
.클래스 태그명 { }

CSS 선택자 붙여쓰기

#아이디.클래스 { }
.클래스.클래스 { }
태그#아이디.클래스 { }

 

색상 단위

  • 색상이름: red, green, yellow 같은 영어로 된 색상 이름입니다.
  • 색상 코드: 샵(#)으로 시작하는 여섯 글자의 코드인데요. 빨강, 초록, 파랑 값을 0 ~ 255 사이 정수로 표현한 다음, 이걸 16진수로 만들어서 각각 두 글자씩, 총 여섯 글자를 연속으로 써놓은 값입니다. 
  • RGB: 빨강, 초록, 파랑 값을 우리가 평소에 쓰는 10진수로 써서 색상을 나타냅니다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값입니다.
  • RGBA: 빨강, 초록, 파랑, 알파 값을 순서대로 써서 색상을 나타냅니다. 빨강, 초록, 파랑은 0 ~ 255 사이 정수 값이고, 알파는 0 ~ 1 사이의 소수 값입니다. 알파 값은 1에 가까울수록 불투명해지고, 0에 가까울수록 투명해집니다.

 

크기 단위

  • 픽셀 px: 절대적인 단위입니다. 화면을 표시하는 기준이 되는 크기입니다.
  • 퍼센트 %: 부모 태그의 크기에 상대적으로 지정할 때 씁니다.
  • em: em은 전통적으로 인쇄술에서 대문자 M의 크기를 나타내는 단위입니다. CSS에서 em은 부모 태그 font-size의 크기인데요.
  • rem: rem은 루트(root) em이라는 의미의 단위입니다. CSS에서 rem은 <html> 태그의 font-size  크기입니다.

 

주석

/* 주석 */

 

텍스트

color: #F23030;                                         /* 글자색 */
font-size: 16px;                                        /* 글자 크기 */
font-weight: 600;                                       /* 글자 굵기 */
line-height: 1.5;        /* 16px * 1.5 = 24px */        /* 줄 사이의 간격 */
text-decoration: line-through;                          /* 텍스트 꾸미기 */
font-family: Poppins, "Noto Sans KR", sans-serif;       /* 글꼴 */

 

배경 이미지

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

배경 위치

background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;

배경 반복

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

배경 크기

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

그라디언트

  • 기본 방향의 각도는 위에서 아래로 내려오는 방향의 180도인데요. 이 각도를 바꾸고 싶다면 맨 앞에다가 각도 deg를 써 주면 됩니다.
background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

그림자

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: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */

 

박스 모델

  • HTML/CSS에서 요소는 기본적으로 박스 형태인데요. 밖에서부터 차례대로 바깥 여백인 마진, 테두리인 보더, 테두리와 실제 내용 사이의 여백인 패딩, 그리고 실제 내용이 들어가는 콘텐트 박스가 있습니다.

Margin

  • Margin은 영역 바깥쪽 여백을 넣을 때 사용했습니다.
  • 특히 좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있는데, 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있습니다.
width: 520px;

margin: 8px;                  /* 상하좌우 */
margin: 16px 8px;             /* 상하, 좌우 */
margin: 16px auto;            /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px 8px 24px;        /* 상, 좌우, 하 */
margin: 16px 8px 24px 10px;   /* 상, 우, 하, 좌 */
margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;
  • 일반적으로 세로 마진은 서로 겹쳐서 화면에 나타나는데요. 서로 이웃한 태그에서는 세로로 마진을 겹쳐서 적용하고, 부모 자식 관계인 태그에서도 세로로 마진을 겹쳐서 적용합니다. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않습니다.
/* 서로 이웃한 태그: #a와 #b의 마진을 겹치면 둘 사이의 마진은 30px */

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}
/* 부모자식 태그 */
/* #b와 #c는 부모 자식 관계.
   #b에는 따로 경계가 없으니까 둘의 마진을 겹쳐서 위쪽 마진은 40px.
   이 마진 값을 이웃한 #a와 겹치면, #a와 #b 사이의 마진은 40px. */

#a {
  margin: 30px;
}

#b {
  margin: 20px;
}

#c {
  margin: 40px;
}

Padding

  • Padding은 영역 안쪽에 여백을 넣을 때 사용했습니다.
  • Padding 숫자의 순서는 시계 방향으로 0시 → 3시 → 6시 → 9시 순서로
padding: 8px;                      /* 상하좌우 한 번에 */
padding: 16px 8px;                 /* 상하, 좌우 각각 */
padding: 16px 8px 24px;            /* 상, 좌우, 하 */
padding: 16px 8px 24px 10px;       /* 상, 우, 하, 좌 */
padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

Border

border: 2px solid #ededed;      /* 주로 굵기, 테두리 종류, 색상 순서로 */
border-radius: 16px;            /* 모서리를 둥글게 만들 때 */
border-radius: 50%;             /* 동그라미 만들 때 */
border-radius: 9999px;          /* 알약 형태 */

Box-sizing

/* #box 요소의 실제 너비는 100 + 30 + 30 = 160 */
#box {
  margin: 20px;
  padding: 30px;
  width: 100px;
}
/* 기본 값인 content-box 대신에 border-box를 사용하면
   테두리까지 모두 합친 영역의 크기가 100px */
#box {
  margin: 20px;
  padding: 30px;
  width: 100px;
  box-sizing: border-box;
}

Overflow

  • 박스의 크기를 지정했을 때 가끔 안에 있는 내용이 많아서  삐져나올 때가 있습니다. 이런 걸 오버플로우라고 하는데요. 이때 박스에 스크롤이 되도록 하거나 삐져나온 걸 감춰줄 수 있습니다.
overflow: hidden;                        /* 넘치는 것 감추기 */
overflow: auto;                          /* 넘치면 스크롤 하게 만들기 */
overflow: scroll;                        /* 항상 스크롤 하게 만들기 */

 

Display

블록(Block)

  • 위에서 아래로 차례대로 배치되는 요소입니다. 크기를 지정할 수 있습니다.
  • <h1> … <h6>, <p>, <div>

인라인(Inline)

  • 글을 쓰는 방향으로 줄이 바뀌면서 배치됩니다. 블록과 달리 크기를 지정할 수 없습니다.
  • 참고로 이미지 같이 외부 데이터를 보여 주는 태그는 인라인이지만 크기를 지정할 수 있습니다.
  • <a>, <br>, <img>, <span>

인라인 블록 (Inline-block)

  • 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 display 속성입니다.
display: block;
display: inline;
display: inline-block;

 

Float

  • float 속성은 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있습니다.
float: left;
float: right;
float: initial;            /* 기본값으로 설정 */
float: inherit;            /* 부모 요소로부터 상속 */

 

Position

  • 기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치됩니다.
  • relative 포지션은 요소의 원래 위치를 기준으로 배치합니다.
  • absolute 포지션은 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치됩니다.
  • fixed 포지션은 브라우저 화면을 기준으로 고정된 배치입니다.
  • sticky 포지션은 static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됩니다.
position: static;
position: relative;
position: absolute;
position: fixed;

 

z-index

  • 앞뒤 순서를 정할 때 쓰는 값입니다. 순서기 때문에 단위 없이 씁니다. 값이 높을수록 화면에서 앞쪽입니다. 값이 같으면 코드에서 아래 줄에 있는 요소가 앞쪽에 보입니다.
z-index: 1;

 

Flexbox

display: flex;                     /* 플렉스박스 만들기 */
display: inline-flex;              /* 인라인 안에서 플렉스박스를 만들고 싶을 때 */

플렉스 요소의 크기 설정

width: 100px;                        /* width 속성으로 시작 크기를 지정 */
flex-basis: 100px;                   /* flex-basis 속성으로 시작 크기를 지정 */

배치 방향

flex-direction: row;             /* 기본값, 가로 방향 */
flex-direction: column;          /* 세로 방향 */

기본 축 정렬

justify-content: flex-start;        /* 시작 위치에 정렬 */
justify-content: flex-end;          /* 끝 위치에 정렬 */
justify-content: center;            /* 중앙 정렬 */
justify-content: space-between;     /* 같은 공백 너비로 정렬 */

교차 축 정렬

align-items: stretch;            /* 늘려서 배치 */
align-items: center;             /* 중앙 배치 */
align-items: flex-start;         /* 시작 위치에 배치 */
align-items: flex-end;           /* 끝 위치에 배치 */

간격 추가

gap: 20px                /* 모든 방향의 간격 */
gap: 20px 10px           /* 세로, 가로 간격 */

요소가 넘칠 때

flex-wrap: wrap;             /* 교차 축 방향으로 넘어감 */

요소 늘려서 채우기

flex-grow: 0;                 /* 기본 값, 변화 없음 */
flex-grow: 1;                 /* 각각 1:2 비율로 늘어남 */
flex-grow: 2;

요소 줄여서 채우기

  • 만약 요소들의 크기가 커서 넘치는 경우, 요소의 크기를 줄여서 플렉스박스 안에 가득 채웁니다. 
  • flex-shrink의 기본 값이 1이기 때문에 기본적으로 요소를 줄여서 배치하고, 0으로 지정하면 크기가 줄어들지 않습니다. 그리고 flex-shrink 값이 클수록 상대적으로 많이 줄어듭니다.
flex-shrink: 0;                    /* 그대로 */
flex-shrink: 1;                    /* 기본값, 줄여서 채움 */
flex-shrink: 2;                    /* 1보다 더 많이 줄어듬 */

 

Grid

  • display 속성을 grid 로 하고 grid-template-columns 속성으로 컬럼을, grid-template-rows 속성으로 로우를 나눌 수 있습니다. 
display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 150px 200px;

유연한 크기 단위

  • fr 이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있습니다. 
  • repeat()으로 반복할 횟수와 값을 쓰면 코드를 깔끔하게 쓸 수 있습니다.
display: grid;
grid-template-columns: repeat(3, 1fr);    /* 1fr 1fr 1fr와 동일 */
grid-template-rows: 150px 200px;
display: grid;
/* 컬럼 너비가 최소 200px, 넓어지면 컬럼 너비 1:1:1 비율로 */
grid-template-columns: repeat(3, minmax(200px, 1fr)); 
grid-template-rows: 150px 200px;

간격 추가

gap: 20px                /* 모든 방향의 간격 */
gap: 20px 10px           /* 세로, 가로 간격 */

배치하기

  • 컬럼 라인은 왼쪽에서부터 오른쪽으로 1, 2, 3, … 이렇게 번호를 붙이고, 로우 라인은 위에서부터 아래로 1, 2, 3, … 이렇게 번호를 붙입니다. 이때 테두리도 그리드 라인에 포함된다는 점에 주의하세요. 테두리부터 1번입니다.
  • span 이라는 키워드를 쓰면 시작하는 라인 번호와 차지할 크기를 적어 줄 수 있습니다. 
grid-column: 2/4;           /* 2번 컬럼 라인에서 시작해서 4번 컬럼 라인에서 끝 */
grid-row: 1/3;              /* 1번 로우 라인에서 시작해서 3번 로우 라인에서 끝 */
grid-column: 2/span 2;         /* 2부터 2칸 */
grid-row: 1/span 2;            /* 1부터 2칸 */

  • grid-area 로 영역에 이름을 붙이고, grid-template-areas 로 이름을 사용해 배치할 수 있습니다. 참고로 셀을 비워놓고 싶다면 이름 대신 마침표(.)를 쓰면 됩니다.
body {                             /* 2 x 2 그리드 */
  grid-template-areas:
    's m'
    'p p';
}

.sidebar {
  grid-area: s;
}

.main {
  grid-area: m;
}

.player {
  grid-area: p;
}

 

CSS 우선순위

  • 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 캐스케이드(Cascade)라고 말하는데요. 한국어로는 "종속"이라고 번역하기도 합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.
  • 브라우저에서 기본으로 제공하는 스타일시트(User Agent Stylesheet)는 우리가 작성한 코드보다 우선순위가 낮으므로, 똑같은 선택자를 쓰고 있다면 우리가 작성한 스타일시트(Author Stylesheet)의 속성이 먼저 적용됩니다.
  • 코드에서 아래 쪽에 쓴 코드일수록 우선순위가 높으므로, 똑같은 선택자라면 아래쪽 속성이 적용됩니다.
  • 아이디 개수, 클래스 개수, 태그 개수의 점수를 비교한 명시도 점수에 따라 우선순위가 적용됩니다. 아이디, 클래스, 태그 점수가 높을수록 명시도가 높으므로, 먼저 적용됩니다.
  • 부모 태그에 적용된 CSS 규칙은 자손에게도 상속되는데요. 모든 속성이 상속되는 건 아니고, 상속되는 속성들이 정해져 있습니다. 가까운 조상에게 물려받은 속성일수록 우선순위가 높습니다.

 

Reference

반응형
저작자표시 비영리 변경금지

'Language > Css' 카테고리의 다른 글

[Css] Float 설정 이후 아무것도 안 될 때, Clear 속성  (0) 2023.10.23
[Css] 전환 변형 - 트랜지션과 애니메이션, 트랜스폼  (0) 2023.06.19
[Css] 글자 속성 - 스타일, 간격, 공백  (0) 2023.06.19
[Css] 웹 폰트 속성 - 사용 방식, 종류  (0) 2023.06.19
[Css] 이미지, 그래디언트 속성  (0) 2023.06.19

'Language/Css'의 다른글

  • 현재글CSS 핵심 개념 문법 한 장 정리 - 선택자, 텍스트, 이미지, 박스모델, 디스플레이

관련글

티스토리툴바