[코딩온] 웹개발자 풀스택 과정 2주차 회고 | CSS - calc()

calc()를 설명하기 좋은 예제를 찾아서 그것을 가져와서 포스팅하려고 한다.

1. calc() 함수

• CSS에서 수치화된 숫자 값을 사칙 연산자를 사용하여 계산을 할 수 있도록 해주는 함수

width: calc(100% - 20px);
font-size: calc(100% - 10px);
background-position: calc(100% - 20px) top;

• 위에 보이는 것과 같이 다양한 속성에 사용 가능

1.1 calc() 함수 예제

 <style>
 	* {padding: 0; margin: 0;} /* 태그별 여백 없앰 */
 	div {height: 300px; margin: 0 auto 20px;}
 	.box01 {width: 1000px; /* 가로 크기를 절대적으로 고정 */background-color: pink;}
	.box02 {width: calc(100% - 100px); /* 가로 크기를 전체 100%에서 100px빼기 */background-color: lightblue;}
</style>
    
	<div class="box01"></div>
	<div class="box02"></div>

• .box01은 절대적으로 1000px이기 때문에 창 사이즈를 조절하면 좌우 여백이 항상 달라집니다.

• .box02는 상대적으로 100%에서 100px을 뺏기 때문에 창 사이즈를 조절해도 좌우 여백이 항상 50px로 고정됩니다.

결과

• 핑크색 박스는 창 사이즈에 따라 좌우 여백이 달라집니다.

• lightblue박스는 창 사이즈에 따라 좌우 여백이 바뀌지 않고 50px로 고정됩니다.

• 참고 - https://ossam5.tistory.com/88

2. background

background 속성 축약에 대해 정리하였다.

.container {background:#555 url("image/이미지.jpg") center center/10% no-repeat fixed}

• 축약 순서
  background 배경색 -> 이미지 경로 url -> background 위치(가로, 세로) -> / -> background 사이즈 -> background 반복여부 ->  스크롤 효과

백그라운드 축약순서는 외워놓으면 작업할 때 유용할거 같다.
외우자!

3. flex / align-content

레이아웃 작성할때 display: flex;가 많이 사용되는데 align-content속성에 관해서는 잘 몰랐었다. 사용도 거의 안해봤는데 이번 기회를 통해 배울 수 있어 좋았다.

교차축(수직 축)의 여러 줄 정렬방법이다.

align-content의 기본값은 stretch입니다. 따라서 아이템들은 세로로 전체 컨테이너의 높이를 채우기 위해 늘어납니다.

사진으로 추가 설명하겠습니다.

flex-start는 아이템을 시작 부분으로 정렬하는 것
center는 (수직 축)에서 플렉스 아이템들을 가운데 정렬
flex-end는 아이템을 끝 부분에 정렬하는 것

align-content 속성을 사용하지 않고
아이템들의 height값 유무에 따라 보여지는 화면도 달라진다.
(flex-wrap 기준)

결론

CSS에서 평소 완벽히 이해하지 못하고 그냥 넘어간 부분을 배울수 있었다. CSS의 속성등은 어려우면서도 재밌고 배울 부분이 끊임없이 나오는거 같다.

참고자료
[코딩온] 웹개발자 풀스택 과정 2주차 ppt
[OSSAM강좌]
https://ossam5.tistory.com/88