0. 목차
1. 고양이가 최고②
CSS
.side-box{
margin-bottom: 4rem;
border:1px solid #ccc;
outline: 2px solid #ccc;
outline-offset: 4px; ★ 간격
border-radius: 6px;
padding: .875rem;
position:relative;
}→ 안쪽 선이 border, 바깥쪽 선이 outline 이다. outline-offset은 border와 outline의 간격을 말한다. 그래서 4px 만큼 간격이 생긴것이다.
.newsletter-form input[type='email']:placeholder{
color:#ccc;
}→ 안에 있는 글씨를 placeholder 라고 하는데, 해당 코드처럼 지정해서 수정가능하다.
.post-thumb{
margin: 0 1rem 1rem 0;
shape-outside: circle();
clip-path: circle();
float:left;
}→ clip-path 는 내부의 이미지를 circle로 보여주기 위해서, circle()를 하였고, 이 주변으로 글씨를 자연스럽게 나열하기 위해서, shape-outside: circle(); 를 설정하였다.
2. 변수를 적용하여 사용하는 calc 함수
calc 함수
→ 다음에는 width 설정할때 calc( 100% / 3 ) 을 써봐야겠다.
:root, var(변수명) <파란색이 100vh, 빨간색이 100px>
/*전역 선언 */
:root{
--number: 500;
}
div { background: #0bd;
height: calc(100vh - 100px);
width: calc(var(--number) * 1px);
padding: 16px;
}
p {
--number: 500; /* 이렇게 내부에서 선언하기도 함, 지역 선언 */
width: calc(var(--number) * 1px);
background-color: red;
padding: 16px;
}→ :root {} 안에 변수 선언하면, 전역선언!
→ 특정 태그 안에 변수 선언하면, 지역선언!
→ calc() 안에 var(변수명)을 넣고, 1px 을 단위로써 곱하면, width가 설정된다.
3. SCSS
SCSS
→ 부모 상속 관계를 시각적으로 보면서 작업할 수 있음.
→ 변수는 $ 앞에 붙이면 변수 선언!
→ SCSS 파일 작성 후, 저장하면 저렇게 4개가 뜬다고 함.
→ 오 참고해야겠다.
→ @mixin 스타일 변수명 저장해서 @include로 불러와주면 되게 편하다.
→ SCSS의 함수라고 생각하자.
4. SVG, animation 라이브러리, IMG 라이브러리, loading 라이브러리, getskeleton 라이브러리
SVG
<img src="./images/shopping_cart_black_24dp.svg" width="48" height="48">
<svg ~~~ 파일을 직접 붙일 수 도 있음 >animation 라이브러리
animation 라이브러리 사용하는 곳
→ style 시트에 붙여넣기!
→ body 태그에 붙여넣기!
imghover 라이브러리
→ 이미지 슬라이드에 대한 라이브러리인데, 수업 중에 적용이 안되어서 개인적으로 시도 해볼 생각!
loading 라이브러리
→ 아쉬운 점은 회원가입을 해야만 사용 가능하다고 한다. ( 한번 해봐야지 ㅎ )
getskeleton 라이브러리 ( 구조를 미리 잡아 놓은 거 쓰는 것 )
→ Example → Demo 에서 확인하고, Source 에서 가져와서 사용한다!
소감
- 음... 뭘 되게 많이했는데 너무 많이해서 아직 잘모르겠다! 주말에 개인적으로 이것저것 실험을 해봐야할 듯!
