📍 개요
◾ 웹 레이아웃의 뼈대가 되는 박스 모델의 구성을 이해하고, 여러 예제에 적용해보았습니다.
◾ `display` 속성의 종류를 학습하고, `flex` 레이아웃의 속성들을 활용하여 실습하였습니다.
📌 박스 모델의 구성 요소 4가지(element, padding, border, margin)
◾ `element`
이해하기 쉽도록 박스로 설명해보겠습니다!
예를 들어 CSS 속성으로 박스라는 요소에 스타일을 줄 수 있는 것처럼
화면에 보여지는 실제 내용, 즉 텍스트, 이미지 등을 의미합니다.
◾ `padding`
요소 내부의 내용과 요소의 테두리 사이에 추가하는 여백입니다.
예를 들어, 물건이 들어있는 박스는 물건과 박스 벽 사이에 공간이 있을겁니다.
이처럼 padding이라는 공간은 텍스트가 박스의 외곽에 너무 가까워지지 않도록 합니다.
텍스트와 박스 테두리 사이에 충분한 여백을 주어, 텍스트가 박스의 경계와 적당한 거리를 두도록 합니다.
◾ `border`
사각형 박스의 외곽선을 말합니다. 이 테두리는 박스의 패딩과 마진을 둘러싸며,
두께, 스타일, 색상을 지정할 수 있습니다. 박스의 경계선을 정의합니다.
◾ `margin`
사각형 박스의 외부 여백을 의미합니다.
박스와 다른 요소들 사이의 간격을 만드는데 사용됩니다.
즉, 박스 외부와 주변 요소들 사이의 공간입니다.
📁 박스 크기 기준 속성(box-sizing)
✅ `content-box`, `border-box`의 차이
예를 들어 디자이너가 버튼을 디자인할 때 프론트엔드 개발자에게 버튼 크기를 100px로 설정해달라고 요청합니다.
대부분의 디자이너는 "테두리만 빼고 100px이에요~"라고 하지 않고 버튼의 전체 크기가 100px이기를 원할 것입니다!
이 전체 크기라는 것에는 버튼의 내용, 패딩, 테두리가 모두 포함되어야 하는데요.
`border-box` 속성을사용하면, 버튼의 크기를 설정할 때 패딩과 테두리를 별도로 계산할 필요 없이,
설정한 `width`와 `height`가 패딩과 테두리를 포함한 전체 크기로 자동 조절되기 때문에
디자이너의 의도한대로 버튼 크기를 100px로 맞출 수 있습니다.
❗반면에 `content-box` 속성은 패딩과 테두리가 크기 계산에 영향을 주기 때문에
원하는 크기로 조정하기 어려워 잘 사용하지 않습니다.
👉🏻 border-box는 패딩과 테두리를 포함하여 크기를 계산하기 때문에 레이아웃 계산이 직관적이겠죠?
아무래도 이러한 이유로 실무에서도 border-box를 일반적으로 많이 쓴다고 합니다.
📁 박스 테두리 둥글게 만들기(border-radius)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 기본 설정: flexbox를 사용하여 요소들 사이에 간격을 추가 */
body {
display: flex;
gap: 10px; /* 요소 사이에 10px 간격 추가 */
}
/* 공통 스타일: 모든 div 요소에 적용 */
div {
width: 100px; /* 너비 100px */
height: 100px; /* 높이 100px */
background-color: #5709e8; /* 도형 배경색: 보라색 */
margin-bottom: 20px; /* 아래쪽 여백 20px */
}
/* 클래스별 스타일: 각 div 요소에 적용 */
/* 완전 원형의 모서리 (반지름 50px) */
.radius1 {
border-radius: 50px;
}
/* 둥근 모서리 (반지름 10px) */
.radius2 {
border-radius: 10px;
}
/* 왼쪽 상단 모서리만 둥글게 (반지름 100px) */
.radius3 {
border-top-left-radius: 100px;
}
/* 왼쪽 상단과 오른쪽 하단 모서리만 둥글게 (반지름 100px) */
.radius4 {
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}
/* 오른쪽 상단과 왼쪽 하단 모서리만 둥글게 (반지름 50px) */
.radius5 {
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}
/* 상단의 두 모서리만 둥글게 만들어 반원 형태로 */
.radius6 {
width: 100px; /* 너비 100px */
height: 50px; /* 높이 50px */
border-radius: 100px 100px 0 0; /* 상단 두 모서리 둥글게 (반지름 100px) */
}
</style>
</head>
<body>
<!-- 다양한 border-radius 스타일을 적용한 div 요소들 -->
<div class="radius1"></div> <!-- 반지름 50px의 원형 모서리 -->
<div class="radius2"></div> <!-- 반지름 10px의 둥근 모서리 -->
<div class="radius3"></div> <!-- 왼쪽 상단만 반지름 100px -->
<div class="radius4"></div> <!-- 왼쪽 상단과 오른쪽 하단 반지름 100px -->
<div class="radius5"></div> <!-- 오른쪽 상단과 왼쪽 하단 반지름 50px -->
<div class="radius6"></div> <!-- 상단의 두 모서리만 반원 형태 -->
</body>
</html>⭐ display 속성 종류 6가지
✅ `block`
전후에 줄 바꿈을 생성합니다.
✅ `inline`
전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성합니다.
정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있습니다.
✅ `inline-block`
inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼
box-model의 width, height, margin, padding 값을 모두 설정할 수 있습니다.
✅ `flex`
내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정합니다.
✅ `grid`
내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정합니다.
✅ `none`
화면에 보여주지 않게끔 설정
📌 Flex 레이아웃 구성하기
flex는 메인축과 교차축으로 이루어진 1차원(행, 열) 레이아웃 속성입니다.
또한 flex-grow, flex-shrink, flex-basis와 같은 속성으로 요소의 크기와 비율을 조정하여
반응형 웹을 만드는데도 적합하다는 점이 있습니다.
1️⃣ 컨테이너 만들기
.container {
display: flex;
}2️⃣ 메인 축 방향 정하기(flex-direction)
메인축의 방향을 정합니다.
✅ `row` ✔️기본값
왼쪽에서 오른쪽(행)
✅ `column`
위에서 아래 방향(열)
3️⃣ 메인 축 아이템 정렬하기(justify-content)
메인 축으로 기준으로 아이템을 정렬합니다.
✅ `flex-start`
시작점에 정렬
✅ `flex-end`
끝점에 정렬
✅ `center`
가운데 정렬
✅ `space-between`
아이템 사이에 동일한 간격 설정
✅ `space-around`
아이템 주변에 동일한 간격 설정
✅ `space-evenly`
아이템 주변과 시작과 끝에 동일한 간격 설정
4️⃣ 교차축 아이템 정렬하기(align-item)
✅ `stretch` ✔️기본값
교차축을 채우기 위해 아이템을 늘립니다.
✅ `flex-start`
시작점에 정렬
✅ `flex-end`
끝점에 정렬
✅ `center`
가운데 정렬
✅ `baseline`
텍스트의 기준선에 정렬
💭 그 외로 궁금했던 사항들!
수업시간 마지막 즈음에 실습했던 로그인 화면인데
진행하는 동안 flex 레이아웃을 제대로 이해하지 못해서 거의 놓쳐버렸었다.
flex 배치방법은 아무리 눈으로 보아도
직접 손으로 익히지 않으면 계속 모른 채로 있을 것 같았다.
그래서 주말 동안에 flex 뿐만 아니라 html를
전체적으로 공부하기 위해 네이버 로그인 화면을
하나씩 구조를 뜯어보면서 구현해보았다.
일회용 번호 관련 내용은 이곳에 추가됩니다.
QR 코드 관련 내용은 이곳에 추가됩니다.
📝 5일차 부트캠프 회고
1️⃣ 잘했던 점
백엔드 부트캠프 1주차 수업을 잘 마무리했다. 오늘이 HTML/CSS 마지막 수업인지라 진도가 거의 번개 맞은 속도로 무진장 빠르게 느껴졌다. 다음 수업은 자바스크립트인데 개인적으로 가장 궁금했던 부분이라 열심히 들어서 나중에 리액트도 공부해보면 좋을 것 같다는 생각이 들었다.
2️⃣ 부족했던 점
flex 속성으로 여러 위치에 도형을 옮기는 실습을 진행하였었는데 원하는 위치에 박스를 배치하는 것이 어려웠다. 주말 동안 레이아웃 공부를 조금 더 진행해서 블로그에 추가적으로 업로드할 예정이다.
💭 주말 동안 진행한 레이아웃 배치 공부(with. 네이버 로그인 화면 구현)
flex를 이용한 layout 배치 외에도 네이버 로그인 화면을 보니 여러 디스플레이 속성을 사용하는 것을 알 수 있었다.
네이버 로그인 화면을 구현했을 때 가장 어려웠던 점은 다음과 같다.
1. 3개의 탭마다 화면이 다르게 보이고 CSS 부분에서 클릭한 탭 이외의 나머지 탭들의 색이 다르게 보여야한다.👉🏻👉🏻 해결법: display 속성 중 table과 table cell을 이용하고 active적인 요소는 자바스크립트로 처리하면 된다.
여기서 중요한 것은 각 탭별로 필요한 부분에 ::after와 ::before을 이용하여
CSS면에서 인덱스처럼 ㄴ자로 꺾이는 부분에서 부드럽게 처리해준다.
2. ID/전화번호의 탭에서 두 개의 input 요소가 하나의 div에 포함되어 있을 때 placeholder의 테두리 문제가 생긴다.
👉🏻 해결법 : 두 개의 input text를 개별로 div에 묶은 후 password가 있는 text의 border-top을 0으로 설정한다.
무조건 flex를 사용하는 것이 아니라 상황에 따라 적절한 display 속성이 있다는 것!
그렇지만 flex와 grid는 일반적으로 많이 쓰는 레이아웃이라는 점!
확실히 간단한 화면이라도 만들어보니까 flex 속성에 대한 이해도 전후가 달랐다.
다음번에는 자바스크립트를 이용해서 로그인 화면과 어울리는 또 다른 화면도 만들어 볼 것이다.
3️⃣ 향후 개선 방향
추후 진행될 자바스크립트 수업을 열심히 수강한 뒤,
로그인창에서 부족했던 부분 보완이랑 다른 화면도 새롭게 실습해볼 예정이다.
🧷 유용한 사이트(FLEX 속성 익히기 게임)
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
🧷 flex, grid 전자책 문서
Flex
flexngrid.com
'🎨 HTML, CSS' 카테고리의 다른 글
| [🥸HTML/CSS]📝랜딩페이지 좌우 여백, 헤더 고정, 스크롤 탑 버튼➰(반응형 웹페이지) (0) | 2024.08.20 |
|---|---|
| [🥸HTML/CSS]📝랜딩페이지 시맨틱 구조 분석 및 설계➰(반응형 웹페이지) (3) | 2024.08.19 |
| [🥸HTML/CSS]📝웹 접근성 스크린리더 관련 클래스명➰(sr-only) (0) | 2024.08.13 |
| [🥸HTML/CSS]📝CSS 선택자 종류 및 우선순위(➰사용법) (0) | 2024.08.08 |
| [🥸HTML/CSS]📝HTML구조와 시맨틱 태그 종류(➰당근마켓, 네이버 분석) (2) | 2024.08.07 |