❓문제❓

<video src="./assets/images/loader-video-pc.mp4" autoplay loop ></video>

👉 video에 autoplay(자동재생), loop(무한재생) 속성값을 지정하였으나 실행이 안된다.

💡해결💡

<video src="./assets/images/loader-video-pc.mp4" autoplay muted loop ></video>

👉 video 속성에 muted(음소거)를 추가한다.

❗이유❗

👉 아래와 같은 크롬의 자동재생 정책 때문이다.

• 음소거 자동재생은 항상 허용한다.
• 소리와 함께한 자동재생은 제약이 발생한다.

👍도움 받은 글: https://developer.chrome.com/blog/autoplay/ 👍도움 받은 글: https://kangdanne.tistory.com/219

📌 음소거된 영상은 자동재생이 항상 허용된다. 📌 영상을 사용할 때에는 사용자를 고려하여 영상의 자동재생이 필요할 때에는 음소거된 자동 재생을 사용하고 사용자가 음소거 해제를 선택할 수 있도록 하는 것이 가장 좋은 방법이다.

• 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
• function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
• 결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.

2. Sass(SCSS)등장

📌Sass(SCSS) 란? Sass(SCSS)는 Syntactically Awesome StyleSheet의 약어이며 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.

📌CSS 전처리기(Preprocessor) 언어 란? CSS 전처리기(Preprocessor) 언어는 전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다. 따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.

🔧동작원리 Sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는게 아니다. 우선 전처리기 언어 문법으로 작성(코딩)하고, CSS로 컴파일해서 웹으로 동작시키는 것이다.

❗결론 Sass는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다. Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차인 것이다.

3. Sass(SCSS)의 장점과 단점

👍장점

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다. 즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.

• CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

  • 변수의 사용
  • 조건문과 반복문
  • Import (모듈화)
  • Nesting (선택자 반복 작성 줄여주는 기능)
  • Mixin (함수 개념)
  • Extend/Inheritance (확장/상속)

• 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.

• 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.

• 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.

• 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

👎단점

• 전처리기를 위한 도구 필요
• 컴파일 시간 소요

4. Sass와 SCSS

📌Sass

📌Sass Sass는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 문법(구문)으로써의 의미를 가지고 있다.

🔧컴파일 과정 : Sass 문법을 기반으로 코드를 작성 ➡ Sass 전처리기(컴파일) ➡ CSS 파일 생성

📌SCSS

📌SCSS SCSS는 Sass의 3버전에서 등장한 언어이다. SCSS는 기존 Sass 구문에 비해 좀 더 CSS 코드와 유사한 형태를 띄고 있어 퍼블리셔들에게 가장 각광 받고 있는 전처리기 언어이다.

🔧컴파일 과정 : SCSS 문법을 기반으로 코드를 작성 ➡ Sass 전처리기(컴파일) ➡ CSS 파일 생성

5. Sass와 SCSS의 차이

1) 확장자

*.sass/*.scss : 둘은 엄연히 다른 파일이다. ➡ 확장자에 따라 익혀야할 문법 또한 다르다.

2) 구문 스타일

*.sass : 파이썬과 같이 들여 쓰기를 사용 *.scss : CSS처럼 중괄호{}와 세미콜론 ;을 사용

CSS	SASS	SCSS

3) 믹스인(mixin) 문법

*.sass : '=' 로 선언하고 '+' 로 적용시킨다. *.scss : '@mixin' 으로 선언하고 '@include' 로 적용시킨다

이미지 출처: inpa.tistory.com

6. SCSS를 써보자

✔SCSS는 2010년 5월 버전 3Visit Website으로 업그레이드하면서 갖춰진 새로운 문법 체계이다.

✔CSS 문법을 SCSS 문법 안에서 사용할 수 있으므로, CSS 핵과 IE의 filter와 같은 특정 브라우저 벤더용 문법도 포함하여 CSS가 지원하는 모든 문법과 기능을 SCSS에서 그대로 사용할 수 있다.

✔이런 완전 호환성 덕분에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있다.

❗정리❗

• 공식 레퍼런스: Sass 공식 레퍼런스 조차도 SASS보다 CSS와 더 비슷한 SCSS를 선호한다
• 사용자 수: 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 압도적으로 더 많다.
• CSS 호환성: 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높인다.
• 여러 줄 쓰기 지원 : Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 여러 줄 쓰기를 지원하지 않는다. 반면에 SCSS는 여러 줄 쓰기를 지원한다.

하지만, 사실 둘(Sass와 SCSS)은 완전히 동일한 기능을 갖고 있기 때문에 어느 것을 사용할지는 순전히 여러분에게 달려 있다.

이것은 단지 시각적 취향의 문제라고 밖엔 할 수 없는데, 만일 파이썬 구문 스타일에 익숙하면 Sass를, 자바스크립트 구문 스타일에 익숙하면 scss를 쓰면 된다.

문제: velog에서 이미지의 크기를 조절하여 2개 이상의 이미지를 나란히 넣고싶다.

🔑해결과정

1. 구글링에 'velog 이미지 나란히', 'velog 이미지 크기 조절' 등으로 검색

2. 방법 찾음: 다음과 같은 방법을 통해 이미지 크기를 조절하여 나란히 넣을 수 있다.

    -[방법1]: <img src="이미지링크" width="n%" height="n%"/>
    -[방법2]: ![](이미지링크){: width="n"}
    -[방법3]: ![](이미지링크){height=npx width=npx}

3. ** 적용 결과는... **실패!

작성한 내용	미리보기	적용 유무(O/X)
<img src="https://velog.velcdn.com/images/seul_tory/post/c84b10fb-7eb4-41bb-a64d-8c8463395fdd/image.png"/> [원본 작성방법]	[원본 미리보기]	-
<img src="https://velog.velcdn.com/images/seul_tory/post/c84b10fb-7eb4-41bb-a64d-8c8463395fdd/image.png" width="50%" height="50%"/> [방법1 작성방법]	[방법1 미리보기]	[적용 X]
{: width="50"} [방법2 작성방법]	[방법2 미리보기]	[미리보기, 출간 모두 적용X]
{height=100px width=100px} [방법3 작성방법]	[방법3 미리보기]	[미리보기, 출간 모두 적용X]

4. 👍다른 대안

"💡테이블작성방법💡"을 사용하기

상단에는 이미지의 제목을, 중간에는 이미지와 이미지 설명을 작성하기로 하였다.

📌영감 받은 velog글 by.woojusm

👀결과물👀

이미지01 제목	이미지02 제목	이미지03 제목
이미지01 설명	이미지02 설명	이미지03 설명

`마크다운(Markdown)' 이란 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. -위키백과

마크업(Markup) 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. -위키백과

1. 제목쓰기

: 제목 앞에 #를 사용하여 작성할 수 있다. : #의 개수에 따라 h1부터 h6까지 작성 가능하다.
⌨ 작성 내용

# 첫 번째 수준 제목 - h1
## 두 번째 수준 제목 -h2
### 세 번째 수준 제목 -h3
#### 네 번째 수준 제목 -h4
##### 다섯 번째 수준 제목 -h5
###### 여섯 번째 수준 제목 -h6

💻

첫 번째 수준 제목 - h1

두 번째 수준 제목 -h2

세 번째 수준 제목 -h3

네 번째 수준 제목 -h4

다섯 번째 수준 제목 -h5

여섯 번째 수준 제목 -h6

2. 인라인 코드

: 양 끝에 백틱(`)을 사용하여 작성할 수 있다.
⌨ 작성 내용

    ``양 끝에 백틱(`)``을 사용하여 작성할 수 있다.

    다음과 같이 작성하면 '양 끝에 백틱(`)'을 인라인 코드로 작성할 수 있다.

💻 양 끝에 백틱(`)을 사용하여 작성할 수 있다.

3. 코드 블럭

: Tab을 이용하여 작성할 수 있다. : 백틱을 3개(```)로 감싸서 작성할 수 있다. : 백틱 3개 뒤에 언어 이름을 넣어주면 코드 하이라이트가 가능하다.
⌨ 작성 내용

1)

Tab을 눌러서 이렇게 작성할 수도 있다.
한 줄 또는 여러 줄 작성하는 것도 가능합니다.

2)
백틱을 사용해서 작성할 수도 있습니다. 한 줄 또는 여러 줄 작성하는 것도 가능합니다.

3) html <div> <h3>코드 하이라이트</h3> </div> 💻 1)

Tab을 눌러서 이렇게 작성할 수도 있다.
한 줄 또는 여러 줄 작성하는 것도 가능합니다.

2)

백틱을 사용해서 작성할 수도 있습니다.
한 줄 또는 여러 줄 작성하는 것도 가능합니다.

3)

<div>
  <h3> 코드 하이라이트</h3>
</div>

4. 인용문

: >를 이용하여 인용된 내용을 표시할 수 있다. :개수에 따라중첩할 수 있다.
⌨ 작성 내용

> \>(한 개)
>>\>(두 개)
>>>\>(세 개)
>>>>\>(네 개)

💻

>(한 개)

>(두 개)

>(세 개)

>(네 개)

5. 수평선

: *, -, _ 등 같은 기호를 3개 이상 입력하여 작성할 수 있다.
⌨ 작성 내용

***
----
_____

💻

6. 링크

: 인라인 링크, url 링크, 참조 링크로 작성할 수 있다.
⌨ 작성 내용

1) 인라인 링크
    [인라인 링크](https://velog.io/)
2) url 링크
    <https://velog.io/>
3) 참조 링크
    [velog]:https://velog.io/
    [velog]

💻 인라인 링크

https://velog.io/

velog

시작이 반이다.