CSS 기초 사전

j·2022년 5월 5일

TIL

목록 보기

7/14

: Cascading Style Sheet

selector {
  property: value;
}

❗️ 세미콜론(;) 빼먹지 말기

Selectors 선택자

Type

:html 태그 직접 지칭해서 쓰는 것

h1 {
  color: blue;
}

Class

: 여러개를 같은 속성으로 묶을 때 class 사용한다. class="box1 box2" 처럼 클래스명 여러개 부여 가능

.box1 {
  color: white;
}

.box1.box2 {
  color: red;
}

ID

: 아이디는 단 한개만 존재한다. 고유명사

#test-id {
  color: black;
}

Child Combinator

: parend > child

Descendant Combinator

: parent descendants

Sibling Combinators

: parent + sibling : 다음 한개 형제선택자만 선택할때
parent ~ sibling : 다음부터 여러개의 형제선택자를 선택할때

Structural Pseudo-classes

: 구조적 가상 클래스!

:first-child

: element:first-child

:last-child

: element:list-child

:nth-child(n)

: element:nth-child(n)
❗️n에 숫자말고 2n(짝수), 2n-1(홀수)로 표시 가능

User Action Pseudo-classes

: 동적 가상 클래스!

:hover

: 마우스를 갖다 댔을때
element:hover

:focus

: input같은곳에 눌러서 그 요소에 포커싱되었을때
element:focus

:active

: 마우스를 누르는 찰나의 순간
element:active

CSS 선택자 우선순위

: css는 기본적으로 나중에 선언된게 적용됨
그리고 아래의 우선순위를 가짐!

ID
Class, Pseudo-class
Type

Box Model

: content, padding, border, margin

Content: 가로 width, 세로 height
Padding: 안쪽 여백! content와 border 사이의 공간
Border: 테두리. 굵기, 스타일, 색상을 명시 해줘야한다. 안쓸경우 none
Margin: 바깥 여백! 요소와 요소 사이의 간격을 나타낼때 사용

box-sizing

: html의 기본적인 박스사이징은 content-box로 되어있는데 이렇게되면 나중에 css 작업할때 패딩주고 그러면 크기를 하나하나 계산해줘야함. 그래서 box-sizing: border-box; 로 해주면 계산하기 편함. width, height가 테두리까지 합한 영역으로 인식되기때문에 Padding을 설정하면 content 박스 크기는 자동으로 설정됨.

* {
  box-sizing: border-box;
}

Block, Inline, Inline Block

Block

따로 width를 선언하지 않은 경우, width=부모 content-box의 100%
따로 width를 선언한 경우, 남은 공간은 자동으로 margin으로 채워짐
box model의 모든 속성들은 block에 적용 가능

Inline

width, height, padding-top/bottom, border-top/bottom, margin-top/bottom 사용 불가❌❌❌

Inline Block

인라인처럼 기본적으로는 가로로 흐르지만 블록처럼 영역을 잡을수있음

⭐️ 꿀팁

인라인 속성 가진 애들은 정렬할때 text-align 적용됨!

Float

: block요소들을 가로배치 하기위해서!

float시키면 집나간 자식, parent는 나머지만 땡겨서 취급!
float시키면 Inline, Inline Block가 부모 width가 아닌 실제 컨텐츠만큼만 유지하는 하자있는 Block으로 바뀜
block컨텐츠들은 float된 요소를 무시하지만 Inline요소들은 float된애들을 인식함

overflow: hidden;

: float된 자식요소들의 height도 다 제대로 차지하게된다.

clearfix

: clear은 오로지 float로 인해 망가진 레이아웃을 고치기 위한 요소로 만들어진 속성

left : float: left 영향받지 않겠다!
right: float: right 영향받지 않겠다!
both: float: left|right 둘 다 영향받지 않겠다!

❗️clear는 display가 block인 요소한테만 사용가능하다.

⭐️ CSS 가상요소 만들어 써라!

::before, ::after등등 여기에 clear: left;처럼 clear속성 부여
❗️ 가상요소 css 줄때 반드시 content 속성 설정해야함 보통 공백으로 content: ""; 많이 씀

⭐️ 꿀팁

매번 가상요소 추가하고 속성 설정하기 귀찮으니까 clearfix라는 클래스를 하나 만들어두고 html에서 필요한 요소에 클래스 추가하는게 편함!

.clearfix::after {
  contnet: '';
  display: block;
  clear: left;
}

Position

static
relative
absolute
fixed
sticky (아직 지원하는 브라우저가 많이 없다)

static

: 모든 요소의 기본 값

relative

: float와 비슷하지만 원래 있던 자리가 사라지지않고 해당 요소만 왔다갔다해서 다른요소에 영향 주지않음.

absolute

: 약간 하자있는 붕 뜬 block 느낌! (float에는 inline만 float를 인식하는 성질이있는데 이부분빼고 다 동일하다.)
자신을 감싸는 여러 조상중에 자기가 기준으로 삼고싶은 요소를 정할 수 있다.
선택의 기준은 position이 static이 아닌 경우!

보통 position: relative;를 많이 쓴다

fixed

: absolute와 동일한 현상. 하지만 자신의 기준점이 viewport로 명확하다!

⭐️ absolute, fixed 정가운데 위치시키기

: 상대적 위치를 잡게되면 박스시작점기준이라 미묘하게 가운데가 아니게되는데 그럴때 transform: translate값을 -50%로 설정하기

z-index

: 포지션된 요소들을 수직방향 레벨 정해줄때 정수값으로 z-index값을주면됨. 쉽게 얘기하자면 층 수라고 생각하면된다.

Flexbox

: 정렬하고 싶은 요소들을 감싸고있는 부모한테 display: flex 값을 설정해줘야함!

플렉스박스 사용 선언
가로? 세로? 정렬 정하기
무조건 한 줄 안에 다 정렬할지? 여러줄 만들지? 선택
플렉스박스 사용

.flexbox {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap;
}

nowrap | wrap

flex-wrap: nowrap : 감싸지 않고 자식의 사이즈를 줄여서라도 한 줄로 정렬
flex-wrap: wrap : 한 줄에 다 정렬시킬 공간이 모자르면 여러줄을 만들어 정렬

Axis

: flex를 사용하면 우리눈에는 보이지 않는 두개의 축이 생기는데 flex-direction 값을 어떻게 설정하냐에따라 axis방향이 달라짐

Main axis: flex-direction 방향에 따라 생김
이걸 기준으로 따라서 정렬할때는 justify-content 속성 사용
Cross axis: main과 수직을 이루는 방향으로 생김
이걸 기준으로 따라서 정렬할때는 align-items | align-content 속성을 사용하여 정렬

justify-content

: Main axis 따라서 정렬하며 기본적인 center, flex-start, flex-end등을 비롯해 여러가지 값들을 설정할 수 있다.

space-between : 요소 사이에만 동일한 간격으로 띄우기
space-around : 요소 주위를 동일한 간격으로

align-items | align-content

: Cross axis를 기준으로 정렬할 때 사용한다.

align-items : 하나의 flex line에 흐르는 cross axis를 기준으로 정렬. flex line이 두개이상되면 개수도 늘어나서 각각의 start, end가리가생김
align-contents : flex line이 여러개여도 전체, 큰 흐름의 cross axis를 기준으로 한뭉탱이로 정렬하고 싶을때! 참고로flex-wrap: wrap이여야 한다.

⭐️ 꿀팁

: 아래는 기본 값들이라 css에 굳이 따로 적어주지 않아도 된다!

flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-contents: flex-start;

order

: 마크업된 순서와 상관없이 마음대로 순서를 변경할 수 있다.
order: 1|2|3 ••• 처럼 순서 지정해서 써주면 된다.

Media Query

: 반응형 웹을 만들기 위해 반드시 알아야한다. 몇 픽셀 이상(min-width) 혹은 이하(max-width)일때 이 스타일을 적용해달라는 의미

@media screen and (min-width: 000px) {
  /*조건이 만족할때 적용할 바뀌는 css만 다시 선언*/
}

⭐️ 꿀팁

: 반응형 만들때 제일 작은 모바일버전부터(아이폰5,se) 만들고 키워나가는게 수월하다.

Typography

: 텍스트를 디자인 하는것!

em, rem

지정된 폰트크기 = 1em
html에 지정된 폰트크기 = 1 rem

line-height

: 줄간격 단위로는 px, em, rem 전부 사용가능하나 em을 많이 쓴다!
❗️ px, rem을 쓸때는 단위까지 꼭 써줘야하지만 em일때는 단위표시 안함

⭐️ 꿀팁

: line-height가 얼마를 차지하든 글자는 줄간격의 가운데에 배치가 된다.

letter-spacing

: px, em 단위 사용. em을 더 많이 쓴다. 하지만 line-height와 다르게 em 생략하면안되고 반드시 적어주어야한다.

font-weight

100 : Thin
300 : Light
400 : Regular
500 : Medium
700 : Bold
900 : Black

font 직접제공하기

폰트를 프로젝트 폴더 내에 저장한다.
fonts.css에 @font-face 설정후 html파일과 연결하거나 style.css에 직접@import url("./fonts.css") 이렇게 import해준다.

  @font-face {
    font-family: '폰트를 부를 이름';
    font-style: normal;
    font-weight: 400;
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

⭐️ font-face src 지정 꿀팁

: 여기서 복붙 후 url의 경로&파일명만 수정

⭐️ css 작성 꿀팁

: 텍스트관련 css를 따로 만들어서 라이브러리처럼 각각 클래스로 정의한 후에
html에 클래스 지정해주면 관리하기가 쉽다.

Background

: 배경!

background-repeat: repeat | no-repeat
background-size: contain | cover | custom

: screen reader only! 좀 더 시맨틱하게 마크업하기 위해 sr-only라는 클래스를 쓰며 css에서 안보이게 처리해준다.

.sr-only {
  position: absolute;
  z-index: -100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

❗️display: none을 쓰면 스크린리더도 못읽기 때문에 위처럼 안전하게 처리할것

Transition

: 스르륵!
property duration (timing-function) (delay)

property : 바뀌어야 할 css property! 가장 먼저 선언해준다.
duration : 지속 시간! 시간 표현 단위로는 ms와 s 둘 다 사용가능.
timing-function : ease-in | ease-out | ease-in-out | cubic-bezier()
delay : 지연 시간

❗️ Animation과의 차이점으로 transition은 이미 지정해놓은 css속성에 변화가 생길때 스르륵 전환되게 해주는것

⭐️ 꿀팁

timing-function 속도를 내 마음대로 컨트롤하고 싶을때 cubic-bezier.com 추천! 초록색은 Linear로 설정
여러 property를 개별적으로 컨트롤하고싶다면 콤마로 구분하여 이어쓰면된다.

Animation

: transition과는 달리 그냥 animation을 주고싶을때 주는거라 자유도가 좀 더 높다. 게다가 적어줘야할 값들이 transition보다는 많아서 property를 구분해서 쓰는것도 좋다.

animation-name : @keyframes 로 정의한 이름

@keyframes name {
  from {
    /* Rules */
  }
  
  to {
    /* Rules */
  }
}

animation-duration
animation-timing-function
animation-delay
animation-iteration-count : 반복 횟수 | infinite
animation-direction : alternate

Box Shadow

: 규칙 h-offset v-offset blur spread color

h-offset : x축
v-offset : y축
blur : 흐린정도
spread : 그림자 사이즈

Overflow

: width, height값을 가진 요소 안에있는 자손들이 크기를 벗어났을때 어떻게 할까에 관한 css property
overflow: visible | auto | scroll | hidden

visible : overflow의 기본값. 범위를 벗어나도 삐져나온 그대로 놔둠
auto : 넘쳐흘렀을때 알아서해라 + 스크롤됨
scroll : 넘치면 스크롤 (auto랑 비슷)
hidden : 넘치면 숨겨라

Transform

: 자유롭게 변형! 어떻게 옮겨지고 변형되어도 다른 요소들한테 영향주지않는다! 그 중 가장 많이 쓰이는 세가지는 아래와 같다.

translate()
scale()
rotate()

translate(x, y)

: x축, y축으로 자유롭게 위치 이동.
translateX, translateY로 따로따로 지정가능

scale(N)

: 정수입력. 1보다 큰 값 입력하면 사이즈가 커지고 0과 1사이의 값을 넣어주면 작아짐. (x, y) 입력해서 가로 세로로 적용가능

rotate(Ndeg)

: 각도 단위인 deg까지 입력해줘야함!

Visibility

: 말 그대로 보이는지 안보이는지!
visibility: visible(기본값) | hidden

❗️visibility: hidden vs display: none

visibility: hidden : opacity가 0 인거랑 다름없음! 존재는 하고있으나 보이지만 않는것
display: none : 아예 존재하지 않는것으로 인식!

Grid System

: 페이지 전체를 설계하기 위해 필요한 디자인적인 방법론!

container
column
gutter

Reference
이미지 출처: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids

Bootstrap

: Grid system을 굉장히 쉽게 CSS로 구현할 수 있게 해주는 CSS framework!
사용법은 부트스트랩 홈페이지가서 코드 복사해서 head에 붙여넣으면 된다.

<body>
  <div class="container">
    <div class="row">
      <div class="col-1">
        <!--요소-->
        <p>col-1</p>
      </div>
    </div>
  </div>
</body>

❗️ container > row > col 부모 자식구조 무조건 지켜야함. 다른 클래스를 쓰고싶다면 col을 만든후에 그 안에 넣어야한다!

⭐️ 꿀팁

사이즈가 바뀌어야하는 breakpoint마다 col-사이즈를 지정할 수 있다. sm(small), md(medium), lg(large), xl(extra large)까지 적어주면 된다. 모바일 사이즈로 먼저 적어주고 차례차레 대응해야할 사이즈를 붙여나가는 식으로 하면 깔끔~

<body>
  <div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <p>column</p>
    </div>
  </div>
  </div>
</body>

개발 공부 기록

이전 포스트

HTML 기초 사전

다음 포스트

CSS 기초 사전

TIL

Selectors 선택자

Type

Class

ID

Child Combinator

Descendant Combinator

Sibling Combinators

Structural Pseudo-classes

:first-child

:last-child

:nth-child(n)

User Action Pseudo-classes

:hover

:focus

:active

CSS 선택자 우선순위

Box Model

box-sizing

Block, Inline, Inline Block

Block

Inline

Inline Block

⭐️ 꿀팁

Float

overflow: hidden;

clearfix

⭐️ CSS 가상요소 만들어 써라!

⭐️ 꿀팁

Position

static

relative

absolute

fixed

⭐️ absolute, fixed 정가운데 위치시키기

z-index

Flexbox

nowrap | wrap

Axis

justify-content

align-items | align-content

⭐️ 꿀팁

order

Media Query

⭐️ 꿀팁

Typography

em, rem

line-height

⭐️ 꿀팁

letter-spacing

font-weight

font 직접제공하기

⭐️ font-face src 지정 꿀팁

⭐️ css 작성 꿀팁

Background

sr-only

Transition

⭐️ 꿀팁

Animation

Box Shadow

Overflow

Transform

translate(x, y)

scale(N)

rotate(Ndeg)

Visibility

Grid System

Bootstrap

⭐️ 꿀팁

HTML 기초 사전

Git Rebase

0개의 댓글