Publishing to CodingApple

코딩애플 강의를 통해 배운 Publishing을 정리한 글입니다.

📅 작성일

2025년 2월 24일

---

📌 목차

1. 소개
2. part3-1 : HTML CSS 웹폰트 넣는 법과 안티앨리어싱
3. part3-2 : 약간 쓸데없는 Pseudo-element
4. part3-3 : 딥다크한 어둠의 공간 Shadow DOM
5. part3-4 : 만든 사이트 발행하기
6. part3-5 : 쉽게 배우는 Sass 기초 1편 : 셋팅
7. part3-6 : 쉽게 배우는 Sass 2편 : 핵심문법
8. part3-7 : 쉽게 배우는 Sass 3편 : Mixin, use 등
9. part3-8 : 쉽게 배우는 Sass : 속지 해설
10. part3-9 : HTML video, audio 다루기
11. part3-10 : transform & animation 으로 매끄러운 애니메이션 만들기
12. part3-11 : transform & animation 속지 해설 (움직이는 메뉴)
13. part3-12 : 레이아웃 만들기 4 : CSS Grid 레이아웃
14. part3-13 : 레이아웃 만들기 4 속지 (인스타그램 격자 레이아웃)
15. part3-14 : position : sticky 활용하기
16. part3-15 : Portfolio 실습 3 : Admin Page
17. part3-16 : Portfolio 실습 3 : Admin Page (해설편)
18. part3-17 : CSS 3D animation : 종이처럼 뒤집히는 프로필 사진 만들기
19. 참고 자료

---

📝 소개

Part 3 : 고급모듈

---

part3-1

🔹 Pseudo-element

• 내부의 일부분만 스타일을 줄 때 사용

.클래스::수도클래스

🔹 자주쓰는 수도 클래스

/* 첫번째 글자, 첫번째 줄 */
first-letter , first-line

/* 내부 맨 뒤에 뭔가 추가할 때 사용 */
after

/* 내부 맨 앞에 뭔가 추가할 때 사용 */
before

---

part3-2

🔹 숨겨진 요소 보는 법

• 개발자 도구 => 설정 => Preference => Element => show user agent shadow DOM 체크하기
• 이렇게 숨겨진 요소들을 shadow DOM이라고 함

🔹 -webkit-

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

🔹 appearance: none

• 브라우저 기본 CSS 안보이게

---

part3-3

🔹 사이트 발행법

• 깃허브
• cafe24.com Filezilla 사용

---

part3-4

🔹 세팅

• live sass com 설치
• `scss 파일 만든 후 아래 watching 누르면 알아서 변환됨

🔹 SASS 스타일 변수 생성

• li$변수 : 스타일
• px같은 숫자는 연산 가능함

🔹 CSS 스타일 변수 생성

• :root { --변수명: 스타일 }선운 후 var(--변수명)를 써야함
• 연산 : ex) calc(숫자 - 숫자)

---

part3-5

🔹 SCSS 와 SASS차이점

• SCSS는 CSS처럼 {}를 쓰지만 SASS는 괄호를 안적어도된다

🔹 nesting 문법

• .클래스 { .클래스{} } 이런게 가능함

🔹 @extend

• 하나의 임시클래스에 이걸 박아놓은 다음에 이거를 @extent 임시클래스 이렇게 쓰면 임시클래스이 값들을 쓸 수 있다
• %임시클래스

---

part3-6

🔹 mixin

• 스타일의 값을 파리미터로
  @minxin 함수명 (파라미터1, $파라미터2) { 스타일 } 적은 후 @include 함수명 (파라미터1, $파라미터2) 이렇게 적으면 된다

• 스타일을 파라미터로
  mixin에서는 #{ $파리미터 } : -1px;
  @include 함수명 (파라미터1, 파라미터2)
  => 이렇게 적용도 가능

🔹 use

• import같은거임
• @use '파일명'; 이렇게 적으면 됨
• import는 css에서도 된다
• 다른 파일의 변수를 쓰려면 파일명.$변수 이렇게 써야한다

🔹 자동 컴파일 되는 scss

• _파일명.scss 이렇게 하면 된다

---

part3-7

🔹 꿀팁

• 먼저 기본 css를 짜보고 축약을 해보는 연습을 하자

---

part3-8

🔹 비디오

• video태그에는 여러 형식이 있기 때문에 안에 source태그와 그곳안에 타입을 적어주는게 좋다
  => 호환성을 챙길 수 있음 (각 브라우저마다 지원하는 확장자가 다르기 때문)
  그래서 여러 소스 태그를 박아놓는게 좋다

• video태그에는 controls, autoplay muted 사용이가능
  (muted는 크롬 브라우저 정책때문에)

• preload="none"
  => 미리다운x

• preload="auto"
  => 미리다운o

• preload="metadata"
  => 미리다운 적당히

• poster="경로" (썸네일)

• loop (무한재생)

🔹 오디오

• audio태그를 사용함

• controls (요거는 필수)

• muted (음소거된 상태)

• autoplay 말고 비디오처럼 sorce태그 나 다른 스타일링이 가능

---

part3-9

🔹 transform

• rotate(10deg); translate(10px, 20px); scale(2); skew(30deg);
  => rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 (두개이상도 쓸 수 있음)

🔹 @keyframes

• @keyframes 함수 {0% {transform: 스타일링} 50% {transform: 스타일링}} 이렇게 사용 후
  animation-name : 함수; animation-duration: 1s 이런식으로 사용

🔹 margin으로 움직인 것과 transform으로 움직였을 떄 차이점

• 변경이 transform가 더 빠름
• 렌더트리 - 레이아웃 - 페인트 - 컴포사이트 이 순으로 화면이 그려지는데
  margin으로 변경 시 레이아웃부터 다시그리지만 transform으로 변경 시 컴포사이트부터 바꾸기 때문에 부담이 덜하다
• js html css 등의 기능은 웹 브라우저의 한 스레드에서만 사용하지만 애니매이션은 다른 스레드에서 사용함

🔹 성능 빠르게 잡는 법

• will-change (바뀔 내용을 미리 렌더링해주는 속성)
  => https://dev.opera.com/articles/ko/css-will-change-property/
  (뭔가 이상하게 버벅일 때만 쓰고 애니메이션이 스무스하게 잘 된다면 쓸 이유는 없음
  이상하게 많이 쓰면 브라우저 자체가 더 느려질 수 있다.)

• 하드웨어 가속
  => 애니메이션이 너무 많아 CPU만으로 전부 연산이 불가능하다면 GPU의 도움을 받을 수도 있음
  (transform: translate3d(0, 0, 0);)

---

part3-10

🔹 숙제

---

part3-11

🔹 Grid

• 격자를 만드는 레이아웃

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /*가로4칸*/
  grid-template-rows: 100px 100px 100px; /*세로3칸*/
  grid-gap: 10px;
}

🔹 예시

display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: "헤더 헤더 헤더 헤더";
grid-column: 1/4;
grid-row: 1/3;

---

part3-12

🔹 숙제임

---

part3-13

🔹 sticky

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

---

part3-14

🔹 숙제

---

part3-15

🔹 숙제

---

part3-16

🔹 숙제

---

part3-16

🔹 뒤집기

transform-style: preserve-3d;
transform: rotateY(180deg);

---

📚 참고 자료

• 코딩애플 강의
• 내 깃허브