[학습 블로깅] 실무 CSS

• border-color는 기본 값으로 color 색상을 적용

컴포넌트화 목적

• 재사용성
• 캡슐화

CSS 변수

/* :root는 가상 클래스 선택자 */
/* html과 다른 점은 우선순위 밖에 없음 */
:root {
	--color--primary: royalblue;
	--color--secondary: darkorange;
}
body {
	background-color: var(--color--primary);
}
body:hover {
	background-color: var(--color--secondary); /* 잘못 적용*/
	--color--primary: var(--color--secondary); /* 제대로 적용*/
}
.container {
	--size: 100px;
	width: var(--size);
	height: var(--size);
	border: 4px solid;
	transition: .4s;
}
.container:hover {
	--size: 200px;
}
span {
	font-size: var(--size);
}

• 유효 범위
  • 변수가 선언된 구의 클래스 선택자와 일치하는 요소 + 그에 해당하는 모든 하위 요소까지
  • 모든 요소에 영향을 미치고 싶은 경우에 :root 내에 쓰기
  • ex) 다크/라이트 모드

:root { 
    --color-background: yellow; 
    --color-font-color: #000; 
    background-color: var(--color-background); 
    color: var(--color-font-color); 
} 
:root.dark { 
    --color-background: #000; 
    --color-font-color: #fff; 
}

• width는 늘어나려고 시도
• height는 줄어들려고 시도
  • main section은 height를 지정하지 않는 것이 좋음

Flex

• 1차원 레이아웃
• 1차원 정렬: 순서대로 아이템을 쌓는 것
  • vs 배치: 원하는 위치에 가져다 놓는 것
• 주축, 교차축
  • 기본: 주축 - 수평, 교차축 - 수직
  • flex-direction: 주축을 설정
  • justify-content: 주축을 기준으로 아이템 정렬
• 화면의 가로 너비 or 상위 요소의 가로 너비를 줄이면 아이템의 가로 너비가 줄어듬
  • 기본 값으로 설정된 flex-shrink: 1; (줄어드는 비율) 때문
  • flex-shrink: 0; 으로 설정하면 아이템 가로 너비가 줄어들지 않음
  ⇒ 기본적인 형태를 유지할 수 없는 경우 반응형 사용

Grid

• 2차원 레이아웃
• 행/열 구조(테이블 구조)에서 유용
• ex1)

<div class="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
</div>

/* flex 사용 시*/
.container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* 사이 간격 때문에 2번이 올라가기에 모자른 상태*/
	border: 4px solid red;
	& .item {
		width: 50%; /* width: calc(50%-5px);로 조정해줘야하는 번거로움 */
		border: 4px solid;
		font-size: 20px;
	}
}

/* grid 사용 시 */
.container {
	display: grid;
	/* template -> 명시적 | auto -> 암시적 */
	/* 열이 1:1 비율로 2개 명시적 지정 */
	grid-template-columns: 1fr 1fr; 
	
	/* 반복 가능 */
	grid-template-columns:repeat(12, 1fr); 
	
	/* 행을 50px로 암시적 지정 -> 아이템의 높이를 지정안해도 되는 장점, 아이템이 가변해도 높이 자동 적용 */
	grid-auto-rows: 50px; 
	
	/* 아이템 1개 높이만 50px */
	grid-template-rows: 50px; 
	
	/* grid-template-rows가 설정되어 있을 때 순서가 위-> 아래 -> 오른쪽으로 */
	grid-auto-flow: column; 
	
	gap: 10px;
	border: 4px solid red;
	& .item {
		border: 4px solid;
		font-size: 20px;
		&:nth-child(6) {
			/* 순서 제어, 0이 기본 값, 숫자가 작은 것이 먼저 정렬 */
			order: -1; /* 6이 첫번째 아이템으로 뜸 */
		}
	}
}

• ex2)

<div class="container-wrap"> 
	<div class="container">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
	</div>
</div>

/* container 가로가 500px이면 item 3개, 가로가 400px이면 item 2개 */
.container-wrap {
	border: 4px solid red;
	max-width: 400px;
	container-name: abc; /* 이름 지정 */
	container-type: inline-size; /* 가로 사이즈 제어 */
	
	/* 세로 사이즈 제어 시
		heigth: 설정;
		container-type: size;
	*/
}

.container {
	display: grid;
	grid-template-columns: (3, 1fr); 
	grid-auto-rows: 50px; 
	
	gap: 10px;
	border: 4px solid red;
	& .item {
		border: 4px solid;
		font-size: 20px;
	}
}

/* media 쿼리 -> 대상: viewport */
@media () {}

/* container 쿼리 -> 대상: 이름 연결을 통해 해당하는 요소 */
/* 자신을 포함하지 않는 하위요소에만 적용 */
@container abc (width <= 400px) {
	.container {
		grid-template-columns: repeat(2, 1fr);
	}
}

반응형 레이아웃

• 미디어 쿼리 (@media)
  • 화면 가로 너비를 계산해서 제어

/*  기본 구조
@media 타입 and (조건) {
	선택자 {
		속성: 값;
	}
}

*/

/* 308px 이하인 경우*/
@media (max-width: 308px) {}
/* 혹은 */
@media (width <= 308px) {
	header {
		flex-wrap: wrap; /* 줄바꿈 */
	}
}

/* width는 뷰 포트 기준 */
/* 미디어 타입 지정 가능 */
@media all and (max-width: 308px) {} /* 기본 */
@media screen and (max-width: 308px) {}
@media tv and (max-width: 308px) {}
@media print and (max-width: 308px) {}

• breakpoint를 잡아야 함
  • desktop, laptop, tablet, mobile 등 기준을 잡아서 제어
  • ex) SCSS

  $bpm: 480px; /* 모바일 */
  $bpd: 1200px; /* 데스크탑 */ 
  
  @media all and (max-width: $bpm) {
  	.container {
  		width: 100px;
  	}
  }

  • TailwindCss Breakpoint

SCSS

• 선택자 안에 선택자 중첩 가능

header {
	width: 100px;
	.left {
		width: 100%;
	}
	.right {
		width: 200px;
	}
}

• scss 변수

$color: red;

• CSS 전처리 도구
  • Preprocessor

CSS Nesting(중첩) 문법

• Chrome@^120 이상 부터 적용됨

header {
	width: 100px;
	& .left {
		width: 100%;
	}
	& .right {
		width: 200px;
	}
}

CSS 우선 순위 제어

/* @layer */
/* @가 붙으면 규칙이라는 의미 */

/* 우선 순위가 낮은 div 요소 적용하도록 */
@layer b, a; /* 뒤에 있을수록 우선 -> a 우선 */

html {
	font-size: 100px;
	color: red;
}

@layer a{
	div {
		color: blue;
	}
}; 

@layer b {
	body {
		color: orange;
	}
	.container {
		color: yellow;
	}
	.item {
		color: green;
	}
};

overscroll-behavior

• html에서 lorem1000 + tap하면 1000개 단어 만들어줌

<div class="container-wrap"> 
	<div class="container">
		<div class="item">lorem~~</div>
	</div>
	lorem~~
</div>

body {
	height: 1000px;
}
.container {
	width: 400px;
	height: 400px;
	border: 4px solid red;
	overflow: auto;
	/* 스크롤 시 정해진 영역안에서 스크롤 끝나도 영역 밖에서 스크롤 이어서 안되도록 */
	overscroll-behavior: contain; 
}
.item {
	heigth: 1000px;
}

• ex) 모달

<div class="modal">
	<div class="overlay"></div>
	<div class="content">
		<div class="head">모달 제목</div>
		<div class="body">
			<label>
				<input type="checkbox"/>
			</label>
			<progress value="70" max="100"></progress>
			lorem~~ <!-- 내용이 엄청 길다면 -->
		</div> 
		<div class="foot">
			<button>취소</button>
			<button>확인</button>
		</div>
	</div>
</div>

.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* 뒷 배경 설정 */
	& .overlay {
		position: absolute;
		width: 100%;
		hegith: 100%;
		background-color: rgba(0, 0, 0, .5);
		/* 해당하는 요소의 배경 요소에 블러 처리, 해당 요소에 적용하려면 filter 사용 */
		backdrop-filter: blur(5px); 
	}
	
	& .content {
		width: 100%;
		max-width: 400px;
		max-height: calc(100% - 100px);
		position: relative; /* 지정 안하면 가려짐 */
		background-color: #fff;
		display: flex;
		flex-direction: column;
		
		& .head {
			flex-shrink: 0;
			padding: 10px;
		}
		
		/* 취소 확인 버튼 고정 */ 
		& .body{
			flex-grow: 1;
			overflow: auto;
			overscroll-behavior: contain; /* 모달 창 스크롤만 제어하고 뒷 배경은 제어 X */
			
			/* 체크박스 커스텀 */
			& input[type="checkbox"] {
				width: 20px;
				hegith: 20px;
				accent-color: yellow; /* 체크 시 노란색 */
			}
			
			& progress {
				accent-color: yellow; /* progress bar 노란색 */
			}
		}
		
		& .foot{
			flex-shrink: 0;
			padding: 10px;
		}
	}
}

가로 세로 비율

• aspect-ratio

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

.container {
	aspect-ratio: 16/9; /* 16:9 비율 유지 */
}

페이지 내에서 페이지 이동 시 header에 가려지는 경우 처리 (목차 같은 경우 이동 시)

• scroll-padding-top

/* 100px만큼 padding-top을 두고 이동해서 보여줌 */
scroll-padding-top: 100px

특정 선택자를 가지고 있으면 해당 요소에 적용

• :has()

<div class="container">
	<span>Hello World!</span>
</div>
<div class="container">
	Hello World?
</div>

/* container에 적용할 것인데 span 태그를 가지고 있는 경우 */
/* span 태그에 적용되는 것이 아님 */
.container:has(span) {
	color: red;
	background-color: yellow;
}

글이 길 때 말줄임표 처리

display: -webkit-box;
-webkit-line-clamp: 2; /* 몇 줄로 보여줄 것인지*/
-webkit-box-orient: vertical;
overflow: hidden;

추천 VS Code 확장 프로그램

• thunder client (rest api 사용할 때)
  • post 맨과 유사한데 vscode 내에서 사용 가능
• TODO Highlight
  • 구현해야 할 코드 명시해 놓을 때
• Auto Close Tag
• Auto Rename Tag
• Image preview