[CSS] 빠른 화면 구현을 위해 기억해 둘 CSS의 기본기

~~작성 중입니다.

 

들어가며

첫 팀 프로젝트 때 position과 flex 같은 기초적인 개념조차 제대로 정립되지 않아 뷰 구현이 늦어져 고생한 기억이 있다. 피그마로 화면 레이아웃 잡고 구성할 때까지는 신났는데, 정작 중요한 기능 개발 들어가기도 전에 시간을 너무 많이 써버렸다.

 

이번에는 제대로 공부해서 프로젝트 때 뷰 구현 재빠르게 끝내고! 계획한 기능 개발을 모두 하고 싶다.

 

고로 지금부터 물음표 살인마가 되어보겠다.

 

box-sizing은 왜 border-box를 써야할까

box-sizing의 기본값은 content-box이지만, 결론부터 먼저 말하자면 border-box를 써야 코드 유지/보수가 더 쉽다.

 

border와 padding 값이 달라지는 경우

• box-sizing: border-box 속성은 내가 맨 처음 지정한 div의 높이와 너비를 유지할 수 있지만,
• content-box: border, padding 값이 달라질 때마다 HTML 요소의 크기가 변경되어 문서 전체의 flow가 바뀐다.

 

100px*100px크기의 상자 3개를 만들어서 차이를 알아보자.

 

• border-box로 지정한 box1 (100px*100px)
  • width와 height 속성에 경계선(5px)과 패딩(20px) 값이 포함되어 크기가 유지되고 있다.
  • 크기를 쉽게 조절할 수 있어 레이아웃 작업에 자주 사용된다.

 

• content-box로 지정한 box3 (150px*150px)
  • 경계선, 패딩 값이 너비와 높이 속성에 포함되지 않아 요소의 컨텐츠 부분만 100px*100px로 설정된다.
  • 150px*150px로 크기가 변경된 걸 확인할 수 있으며, 실제 크기가 설정한 너비, 높이 값보다 더 커지기 때문에 크기 조절 시 주의가 필요하다.
  •  

 

border와 outline의 차이

요소의 안쪽으로 테두리를 만들고 싶으면 border, 바깥쪽으로 테두리를 만들고 싶다면 outline을 사용하면 된다.

 

3개의 상자는 모두 box-sizing: border-box로 설정되어 있다.

 

위에서 말한 것처럼 border-box는 지정한 요소의 크기(hegiht, width)를 유지하기 때문에 border, padding 값이 안 쪽으로 주어진다. 그런데 테두리를 요소의 크기 바깥쪽으로 주고 싶다면?

 

outline을 사용하면 간단 해결!

 

블럭과 인라인

 

 

 

Flexbox가 있는데 왜 position도 써야 하는지

 

과제 실습 전에는 몰랐는데 이제 확실히 말할 수 있다!

 

실제로 Flexbox는 레이아웃을 잡을 때 매우 편리해서 현업에서도 많이 쓰지만, 개별 요소를 미세하게 위치 조정할 때는 position 속성도 여전히 필수적인 도구로 사용되고 있다. 예를 들어 레이아웃 전체의 요소를 배치할 때는 Flexbox나 Grid를 사용해서 전체 정렬을 하고, 특정 버튼이나 아이콘을 정확한 위치에 배치하고 싶을 때 absolute와 relative를 사용한다.

 

 

Position: relatvie 와 absolute / sticky 와 fixed 차이

position은 문서에서 요소의 위치를 결정하는 속성으로 기본값은 static이다.

 

1. relative와 absolute

 

 

2. sticky와 fixed

sticky는 스크롤 시 기존 문서 위치를 그대로 유지한다.

반면 fixed는 원래 문서의 flow에서 벗어나서 우리가 원하는 위치에 고정된다. 기존 문서의 flow를 벗어난다는 점에서 absolute와 비슷하다.

 

정렬 꿀팁

 

1. 블럭과 인라인 요소의 정렬

 

블럭 요소인 div의 스타일링에 margin: auto 값을 주면 자동으로 수평 중앙 정렬이 된다.

블럭 안의 인라인 요소를 (수평) 중앙 정렬하고 싶다면, text-align: center로 지정하면 된다! 이름이 text로 시작해서 문자만 정렬할 것 같지만 부모 컨테이너 안에 있는 인라인 요소들을 중앙 정렬하는 데도 쓰인다.

 

2. 컨테이너 안에 텍스트만 있을 때 텍스트 중앙 정렬

 

text-align: center로 수평 중앙 정렬 후, text(h2)를 부모 요소의 높이와 동일하게 지정해준 뒤, line-heihgt를 100%로 지정해준다. 컨테이너 안에 텍스트만 들어있을 때 얍삽하게(?) 텍스트를 중앙 정렬할 수 있는 방법이다. 이 방법보다는 3번/4번을 추천한다.

 

3. position과 translate

 

position:relative로 자신의 자리를 유지하면서, 부모(.box) 크기의 50% 이동(오른쪽 하단 꼭지점 기준) 후

요소 자체를 이동시킬 수 있는 transform으로 자기 자신의 50%이동.

 

4. flexbox

 

부모 요소를 찾아서

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

 

-와 같이 쓰면 자식 요소 중앙정렬. 간단해서 그동안 가장 많이 쓴 방법이다.

 

 

background

1. 단축 속성

background: no-repeat center/80% url("../img/image.png");

background: no-repeat center/cover url("../img/image.png");

 

<position> 바로 뒤에만 <bg-size>값이 위치할 수 있으며, 슬래쉬(/)로 구분해야 한다.

 

 

2. background-size: cover / contain

 

cover를 사용하면 반응형 백그라운드처럼 설정된다! 브라우저 창의 크기에 따라 이미지 비율이 조절된다. 반면, contain은 이미지의 원본 비율을 유지한다.

 

 

CSS 변수

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

 

CSS 전처리기나 라이브러리를 사용하지 않고, 순수 CSS만으로 가독성과 유지보수성이 높은 CSS를 작성할 수 있다.

 

MDN 사용자 지정 CSS 속성(CSS변수, 종속 변수)

 

 

 

 

 

---

 

참고

- 새싹x코딩온 웹 풀스택 과정 수업 자료

- MDN