20220526 개발일지

학습한 내용

->600px 미만일 때

->600px 이상일 때

display: flex;
justify-content: space-between;

이 코드는 첫 번째 고양이 옆 문단을 사진의 모양을 따라 보이게 설정 한 것이다. padding 설정을 하지않아 사진 바로 옆에 붙어있다.

에밋으로 빠르게 코딩하기

https://emmet.io/

적절히 사용하면 빠르게 코딩을 작성할 수 있다.

calc 함수로 계산식 사용하는 법

<style>
div {
	background: #0bd;
	height: calc(100vh - 100px);
	width: calc(500 * 1px);
	padding: 16px;
}
</style>

clac 함수는 괄호 앞 숫자에서 뒷 숫자를 뺀 수치를 알아서 사용하는 함수이다.

변수와의 조합

<style>
p {
	--number: 500; /* number라는 변수를 선언 */
	width: calc(var(--number) * 1px);
	background-color: red;
	padding: 16px;
}
</style>

--를 붙이고 변수 이름을 만들어 붙인다. 여기서는 number라는 이름을 붙여 줬고, 500이라는 수를 지정했다.
사용하려면 var(--변수) 이렇게 앞에 var을 붙여서 쓰고, 단위를 바꾸고 싶다면 지정숫자에 단위를 지정하는 방법과, var() * 1px 이렇게 * 를 붙여 단위를 바꿔주는 방법이 있다.

여기서, 변수는 지정한 부분에서 아랫부분으로만, 괄호 안에서만 사용 할 수 있는데, 전체를 변수를 지정해 사용하고 싶다면

<style>
/* 전역 선언 */
:root {
	--number: 500;
}
div {
	background: #0bd;
	height: calc(100vh - 100px);
	width: calc(500 * 1px);
	padding: 16px;
}
p {
	/* --number: 500; */ /* number라는 변수를 선언 */
	width: calc(var(--number) * 1px);
	background-color: red;
	padding: 16px;
}
</style>

<'style>의 맨 앞에 :root{} 지정해주고 중괄호 안에 변수를 적어주면 된다.

※커스텀 속성 주의점

˚ 대소문자 구분함
˚ 커스텀 속성에 속성명을 넣을 수 없음, 값만 가능
˚ 커스텀 속성을 호출한 뒤 단위를 덧붙이면 적용되지 않음
-> calc 함수 사용하면'calc(var(--변수)) * 단위'로 변수자체게 단위를 빼도 사용가능하다.

SASS

장점

˚ 셀렉터 부모 자식 관계를 네스트로 구현
˚ 변수로 값 다시 사용하기
˚ 파일을 분할해서 관리

주의

˚ 과도한 네스트 사용 (3번정도까진 괜찮다.)

파셜 파일로 분할하기

˚ patial : 분할된 파일 (_를 붙여 저장)
_header.scss
style.scss에 넣고 싶다면 scss파일 안에
@use 'header'; 를 써준다.

mixin으로 스타일 재사용하기

mixin : 미리 저장한 스타일을 필요한 곳에서 불러와 재사용하는 기능

@mixin circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

@mixin circle($size, $bg){
	width: $size;
    height: $size;
    background: $bg;
    border-radius: $bg;
}	

인수를 여러개 사용해서

div{
	@include circle(60px, #0bd);

다음과 같이 수를 넣어서 사용한다.

@mixin circle($size:80px){
	width: $size;
    height: $size;
}

초깃값을 설정해 놓으면 수를 넣지않으면 초깃값으로 사용된다.