2023.05.08 CSS 개본개념

pseudo-class → 특정 요소가 다른 상태일 때 스타일 줄 수 있게 도와줌

: pseudo-class

::pseudo-element → 내부의 일부분만 스타일 줄 때

• ::after → 내부 맨 뒤에 뭔가 추가할 때
• ::before → 내부 맨 앞에 뭔가 추가할 때

pseudo-element로 clear:both 박스 만들기

→ 요소 뒤에 clear:both 속성을 가진 박스가 필요하다면

div를 만들 필요 없이 그 요소 뒤에 content 빈 공간으로 아래 같이 코드와 같이 입력하면 된다.

.box:after {
  content: '';
  display: block;
  clear: both;
  float: none;
}

-webkit-

→ 사파리, Edge, 크롬에서만 적용되는 스타일

-moz-

→ Firefox

appearance:none

→ 브라우저 기본 css 안보이게 하는 것

CSS 대용 언어

→ SCSS

• 조건문, 반복문, 변수, 함수 등을 프로그래밍 문법 가능
• 반복적인 부분 쉽게 처리가 가능
• 홈페이지는 scss 파일을 읽지 못함 그래서 css 파일로 변환해야함
• → 코드는 scss에서 짜고, html에 넣을 땐 css파일 넣어야함
• .map 파일의 용도 → 크롬 개발자도구 디버깅용

1. 어려운 단어 기억할 땐 변수 문법을 씀
   1. 변수 만들려면 → $변수명: 저장해서 쓸 값;
   2. SCSS 사칙연산 가능(+ - 가능 / 퍼센트는 불가능) → 단위 잘 맞춰야 함

$메인컬러 : #2a4cb2;
$서브컬러 : #eeeeee;
$기본사이즈 : 16px;
-> 위에 값만 변경해주면 됨

.background {
	background-color: $메인컬러;
	font-size: ($기본사이즈 + 2px);
	font-size: ($기본사이즈 - 2px);
	font-size: ($기본사이즈 * 2);
	font-size: ($기본사이즈 / 2);
}

.box {
  background-color: #서브컬러;
	font-size: $기본사이즈 - 2px;
}

CSS에도 SCSS 비슷한 기능이 있음

— 변수명 : 값

사칙연산

• calc()
• :root { --main-color : red; } .background { background-color: (--main color); } .background { background-color: blue; width: calc(40% - 20px); }

nesting 문법

→ 관련 있는 class들을 묶을 때 좋음

→ nesting 두개 이상 x

.main-bg h4 {
  font-size: 16px;
}

.main-bg button {
  color: red;
}

// nesting 문법
.main-bg {
  h4 {
    font-size: 16px;
  }
  button {
    color: red;
  }
}

@extend 문법

% : 임시 클래스명

• 단독으로 컴파일러 되지 않음

→ class 전체를 복사해줌

→ 임시 클래스명 앞에 @extend 붙여야함

→ @extend %btn

%btn {
  width: 100px;
  height: 100px;
  padding: 20px;
}
.btn-green {
  @extend %btn
  color: green;
}
.btn-red {
   @extend %btn
  color: red;
}
.btn-blue {
   @extend %btn
  color: blue;
}

@mixin 문법

→ 긴 코드를 짧은 단어로 축약할 때 씀

@mixin 문법의 $파라미터

→ 킨 코드를 가변적으로 만들 때 씀

@mixin 폰트스타일($구멍, $구멍2) {
  font-size: $구멍;
  letter-spacing: $구멍2;
}

h2 {
  @include 폰트스타일(40px, 1px)
}

h3 {
  @include 폰트스타일(30px, 2px)
}

h4 {
  font-size: 10px;
  letter-spacing: -1px;

→ 글자 중간에 $변수나 $파라미터 넣을 때 #{$변수명}

@mixin 폰트스타일($구멍, $구멍2) {
  font-size: $구멍;
  #{ $구멍2 }: -1px;
}

h2 {
  @include 폰트스타일(40px, letter-spacing)
}

h3 {
  @include 폰트스타일(30px, width)
}

h4 {
  font-size: 10px;
  letter-spacing: -1px;
}

다른 파일에 있는 내용 가져오고 싶을 땐 @use’파일경로’;

컴파일 제외 시킬 땐 _파일명.scss로 변경

다른파일의 @mixin 쓰려면 @include 파일명.mixin 이름

h2 {
  @include 폰트스타일(40px);
  color: reset.$메인컬러;
	color: reset.믹스인명;
}

비디오 넣는 법

1. <video src=”경로”>

<video src="bridge.mp4" controls></video

 2. <video><source></video>

1. 장점 : 호환성

<video>
    <source src="bridge.mp4" type="video/mp4">
  </video>

자동 재생 autoplay muted

<video controls autoplay muted>
    <source src="bridge.mp4" type="video/mp4">
  </video>

다운로드

preload=”none” → 미리 다운 X

preload=”auto” → 미리 다운 O

proload=”metadata” → 미리 다운 적당하게

썸네일 이미지

→ poster=”경로”

loop

→ 무한 반복

audio 넣는 법

1. <audio src=”파일경로”>

<audio src=”파일경로”></audio

 

1. <audio><source></audio>

<audio controls>
    <source src="bass.mp3">
  </audio>

 

muted

→ 음소거 상태

복잡한 애니메이션 작업를 정의할 때 @keyframes

@keyframes

ex) a → b→ c

a → b → a

a → 1초 정지 → b 등

회전

transform:rotate(10deg);

좌표이동 → 애니메이션에선 margin 보다 부드러움

transform:translateX(10px)

transform:translateY(10px)

크기 변화

transform:scale(2배수)

@keyframes 를 넣고 싶으면

animation-name

animation-duration

진행도에 따라 다르게 넣어주면 된다.

.ani-text {
  text-align: center;
}

.ani-text:hover {
  animation-name: 왔다갔다;
  animation-duration: 1s;
}

@keyframes 왔다갔다 {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(100px);
  }
}

display:grid

부모 div에 display:grid를 주면 자식들은 모눈종이 된다.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; -> 세로칸 개수 & 사이즈
  grid-template-rows: 100px 100px; -> 가로칸 개수 & 사이즈
}

.grid-container div {
  border: 1px solid black;
}

단위 : 1fr로도 폭 지정 가능

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr -> 균등하게 배분할 때 fr로 사용
  grid-template-rows: 100px 100px;
}

격자 간격은 grid-gap

레이아웃 만들기

1. 내부 박스 크기 조절
   1. grid-column / grid-row 주기
      1. grid-column → display:grid 자식들에게만 사용

<div class="grid-container">
    <div class="grid-nav"></div>

1. 세로선 1 ~ 4만큼 차지해주세요. → grid-column: 1 / 4
   1. 가로선 1 ~3 만큼 차지해주세요 → grid-row: 1 / 3;

.grid-nav {
  grid-column: 1 / 4;
	grid-row: 1 / 3;
}

1. 부모 요소 조절
   1. 자식 요소에 이름쓰고, 부모 요소에 색칠
      1. grid-area: 이름(한글도 됨)

.grid-nav {
  grid-area: 헤더;
}

.grid-sidebar {
  grid-area: 사이드;
}

 

1. 아래 와 같이 띄어쓰기 와 점(빈공간)으로 구분

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
  "헤더 헤더 헤더 헤더"
  "사이드 . . ."
  "사이드 . . .";
}

position: sticky

→ 스크롤 되는데 이미지는 고정

→ 조건부 fixed → 부모박스 넘어서면 해제

→ 잘 사용하는 홈페이지 → 애플

3D 효과

평소 3D 효과를 주기 위함

.flip-inner {
 
  transform-style: preserve-3d;
}

뒷면에 비치는 그림자 안보이게 처리하는 법

.front {
  backface-visibility: hidden;
}

html/css 강의를 완강을 하였다. 뭔가 머리속에 들어오는거 같기도 하고, 아닌거 같기도 하다. 예전에는 아예 몰랐던 용어, 코드 들이 이제는 조금씩 익숙해지는것 같다. 완벽하게는 알지는 못해도 대략적으로는 알게 되는 거 같다. 

코딩 공부한 지 이제야 2달이 되는데, 정리나 그런거는 서툴고 다 알진 못해도 익숙해지는 기분이 꽤나 좋은 거 같다. 

아직 모르는 것이 산더미 혹은 그 이상이지만, 작은 프로젝트를 진행해봐야 겠다. 강의를 볼 땐 알지만 막상 해보면 모르는게 많기 때문에 몸소 깨우쳐야하는게 맞는거 같다. 더 열심히 하도록!!