CSS 간단 정리

팡긍·2022년 6월 23일
CSShtml
0

HTML / CSS

목록 보기
1/4

이번에 토이 프로젝트로 크롬 확장 프로그램을 개발해 보면서 CSS로 인해 엄청 골머리 앓아서 이번 기회에 제대로 정리하면서 공부해보려 한다. 사실 잘 알고 있다고 생각했었는데, 막상 직접 해보니 아는 게 아는 것이 아니었다. iOS를 개발할 때는 화면이 작아서 그런지 어렵지 않게 금방 익혀서 활용 했는데, 웹은 화면이 크다 보니 체감상 더 어렵게만 느껴진다.

🎨 CSS 란?

그래서 CSS가 뭘까. 웹 개발을 한다면 꼭 알아야 할 지식이며, 기초라는데 도대체 그게 뭔데?
CSS는 Cascading Style Sheets의 약자이다. 즉, documents가 사용자에게 어떤 스타일로 보일 수 있을지에 대해 코드를 작성한다. 여기서 말하는 documents는 흔히 우리가 알고 있는 html이라고 생각하면 된다.

CSS는 다음과 보통 같은 방식으로 사용된다. React에서의 styled-component나 emotion, scss와 같은 다른 것들은 다음에 정리할 예정이다.

<html>
  <head>
    <link rel="stylesheet" href="style.css">
      <style>
        h1 {
        	color: red;
        }
      </style>
  </head>
  
  <body>
    <h1 style="color: red;">CSS</h1>
  </body>
</html>

선택자

CSS는 선택자, 선언, 속성으로 이루어져 있다. 제일 중요한 것이니 잊지 말자.

p {
	color: blue
}

위의 코드에서 p는 선택자(selector)이며, p를 기준으로 {}로 감싸져 있는 것이 선언 블록(Declaration block)이다. 블록 안에 color가 속성(property)을 뜻하며, red는 속성 값(property-value)를 뜻한다.

선택자의 종류는 3가지가 있다.

  • 태그 선택자 (tag) : 태그 선택자는 html 태그에 관한 것이며 노멀하게 p 혹은 h1 등으로 쓴다.
  • 클래스 선택자 (.class) : 클래스 선택자는 해당 태그의 클래스에 관한 선택자이며, 클래스 이름 앞에 .을 붙여 .class 와 같이 표현한다.
  • 아이디 선택자 (#id) : 아이디 선택자는 아이디에 관한 선택자이다. 이 선택자는 앞에 #을 붙여서 표현한다.

부모 자식 선택자

CSS 코드를 보면 여러 선택자가 함께 있는 것을 볼 수 있다. 그건 도대체 뭘까?

  • 부모 자식 { ... } : 태그 이름 사이에 공백을 넣으면 부모 태그 하위에 있는 자식 태그에 스타일을 적용시킨다.
  • 부모>자식 { ... } : 태그 사이에 >를 넣으면 부모 바로 밑에 있는 자식에만 스타일 적용
  • 부모,자식 { ... } : 태그 사이에 ,를 넣으면 부모와 자식 모두 스타일 적용
  • 부모.자식 { ... } : 태그 사이에 .을 넣으면 부모 안에 있는 자식 Class만 스타일 적용

가상 클래스 선택자

가상 클래스 선택자는 또 뭘까.. 이건 클래스 선택자는 아닌데, 클래스 선택자처럼 여러가지 element를 선택하는 것이다. 즉, 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정할 수 있다.

  • :link - 방문한 적이 없는 링크
  • :visited - 방문한 적 있는 링크
  • :hover - 마우스를 위에 올렸을 때
  • :active - 마우스를 클릭했을 때
  • :focus - 포커스가 되었을 때 (input 등)
  • :first - 첫 번째 요소
  • :last - 마지막 요소
  • :first-child - 첫 번째 자식
  • :last-child - 마지막 자식
  • :nth-child(2n+1) - 홀수 번째 자식

🏷 CSS 필수 속성

CSS 속성이 진짜 여간 많은게 아니다. 개인적인 생각인데 속성 이름들도 직관적이면서도 전혀 아닌거같다. 처음부터 무작정 다 외울 수는 없으니 일단은, 많이 사용되는 것들 먼저 알아보자.

width, height

각각 가로 길이와 세로 길이를 의미한다.
값을 정의할 때는 100px 처럼 숫자와 단위를 표시하며 적는다.

📏 CSS 단위

CSS 단위에 대해서 정리하자면 너무 길기에 이 부분은 따로 나중에 자세히 다룰 것이다. 여기선 간단하게 정의만 하자.

절대 단위상대 단위
cmem
mmex
inch
pcrem
ptlh
pxvh
vw
vmin
vmax
%

margin, padding

margin과 padding은 각각 바깥 여백과 안쪽 여백을 의미한다.
width, height와 마찬가지로 숫자 + 단위로 표시하며,
margin과 padding을 나누는 경계는 border이다.

다 그리고 보니 너무 형편없이 그렸나 싶지만 나름 표현 잘 한 것 같기도 하다. (뿌듯)

방향

방향마다 여백을 다르게 설정할 수 있다. 방향은 위에서부터 시계방향으로 회전하며 설정한다.

  • margin: 20px : 상하좌우 모두 20px
  • margin: 30px 10px : 상하 30px, 좌우 10px
  • margin: 30px 10px 20px 50px : 상 30, 우 10, 하 20, 좌 50
  • margin: 30px 10px 40px : 상 30, 좌우 10, 하 40

box-sizing

element의 width와 height를 지정할 때 내가 원하는대로 적용되지 않을 때가 있는데 이는 border나 padding, margin 때문일 것이다.

왜냐하면 width, height는 content의 크기를 정하는 것이기 때문에, content-box의 크기는 padding과 border-width까지 더해져서 그려진다.

box-sizing: content-box가 기본값인데, border의 경계선까지 크기를 지정하고 싶으면 box-sizing: border-box로 설정하면 된다.


font

말 그대로 글자의 폰트를 설정하는 속성이다.

  • font-style : 글꼴의 스타일 지정
  • fon-size : 글자 크기
  • font-height : 줄 간격
  • font-weight : 글자 두께
  • font-family : 글꼴 설정

color

color 속성은 text의 색상을 의미한다.

  • red, blue, green 등과 같이 이미 정의된 색
  • #000, #FFF 등 hex 색상 코드
  • rgb(0, 0, 0) rgb 색상
  • rgba(0, 0, 0, 0.5) alpha(투명도)가 적용된 rgba 색상

display

display는 element를 어떻게 보여줄지 결정한다.

  • none : element를 렌더링하지 않는다. 즉, 영역을 차지하지 않는다.
  • block : div, p, h, li 등이 해당되며, 기본적으로 가로 영역을 모두 채운다. 그리고 그 다음에 등장하는 태그들은 줄바꿈되어 나타난다.
  • inline : span, b, i, a 등이 여기에 해당되고, 줄바꿈되지 않으며, width와 height 지정이 불가능하다. 줄바꿈은 되지 않고, 태그 바로 옆에 표시된다.
  • inline-block : block과 inline의 합친 형태로 생각할 수 있다. 줄바꿈은 되지 않지만, 크기 조절은 가능하다.
  • flex : flexible-box를 사용할 수 있는 속성이다. 각 요소들을 item으로 보고 이 item들을 효과적으로 정렬하고 배치할 수 있도록 도와준다. 반응형 페이지를 만든다면 이 부분은 무조건 필수적으로 잘 활용할 줄 알아야 한다고 생각한다. 이 부분도 굉장히 중요하다고 생각하기에 따로 글을 정리하자.

align

  1. text-align
    block 안에 존재하는inline 요소들을 정렬한다.
    • left : 왼쪽 정렬
    • right : 오른쪽 정렬
    • center : 중앙 정렬
    • justify : 양쪽 정렬
  2. margin
    margin: 0 auto 를 사용하면 상하는 0px, 좌우는 auto로 설정된다. 즉, 중앙 정렬을 할 수 있다. 생각해보면 당연하게도 inline 요소에는 먹히지 않는다.

position

포지션은 태그를 어떻게 위치시킬지를 정의한다.

  • static : 기본값이며, 다른 태그와의 관계를 통해 자동 배치된다. 그렇기에 위치를 임의로 설정할 수 없다.
  • absolute : 절대 좌표를 이용해서 위치를 지정할 수 있다.
  • relative : 원래 있던 위치(부모)를 기준으로 좌표를 지정한다.
  • fixed : 스크롤과 상관없이 항상 문서의 좌측 상단을 기준으로 좌표를 고정한다. (웹 페이지를 만들 때 페이지의 header를 생각하면 이해하기 쉽다.
  • inherit : 부모 태그의 속성값을 상속받는다.

좌표를 지정할 때에는 left, right, top, bottom과 함께 사용된다.

( absolute나 fixed로 설정하면 block태그의 특징이 사라지니 알아두자)


마무리

나중에 다시 정리해야 할 개념 Todo List

  • CSS 단위
  • Flex 정리
profile
팡긍
다음 포스트

HTML TAG 정리

0개의 댓글