CSS 공부 정리 [Sessac 바닐라 Javascript + Vue.js 과정]

 

간단한 프로젝트라면 아래 코드처럼 초기화 해도 되지만,

*{margin:0; padding:0;}

큰프로젝트라면
init.css / reset.css / initialize.css 를 검색한 후 가져다가 쓰는게 낫다.

---

outline : border의 바깥 외곽선
- 요소를 두드러져 보이게 만들고자할 때 사용
- outline 선의 너비는 레이아웃에 관려하지 않고 눈에만 선이 보인다.

---

vh = viewport height
vw = viewport width
=> 스크린 크기에 맞게 상대적 크기를 반환

100vh, 100vw 

- 전체 화면의 기준

(예시)
스크린 크기가 height = 1000px, width = 600px 
=> 1vh = 10px  /  1vw = 6px

---

[ 그라데이션 ]

  background: linear-gradient(15deg, #636363, #a2ab58);

- 15deg는 각도 

[ 가운데로 위치하게 만드는 법 ]

display: flex;
align-items: center;
justify-content: center;

[ 글자를 취소선으로 만들기 ]

<p class="line">취소선을 가진 글씨입니다.</p>

.line {
  text-decoration: line-through;
}

이렇게 작성하면 

취소선을 가진 글씨입니다. 라고 나온다.

 

---

boostrap

- breakpoint로 반응형 가능하다.

breakpoint는 소프트웨어 개발에서 프로그램을 의도적으로 잠시 또는 아예 멈추게 하는 장소를 가리키며 디버깅 목적으로 넣는 것 (출처 : 위키백과)

col
-한줄은 12개의 col로 계산 된다

 

 

---

잘못된 게 있으면 알려주세요! 배우고 싶습니다.

조언도 환영합니다.