기초 개념 잡기 실습은 비주얼 스튜디오에서 진행한다.
Visual Studio 기본 세팅
비주얼 스튜디오에서 작업 폴더 실행
확장 탭에서 Live Server 설치
Visual Studio 단축키
| ! + Enter | HTML 기본 템플릿 생성 |
| Alt + Z | 줄바꿈 |
| 태그 * n | n개의 태그 생성 |
| Ctrl + / | 해당 코드 주석 처리 |
Bootstrap 기초 개념
| 정적 사이트 | 동적 사이트 |
| HTML, CSS, 자바스크립트 | 서버 쪽 프로그래밍 언어 |
| 사용자는 개발자가 올려 둔 정보만 확인할 수 있다. | 방문자가 로그인을 해서 글을 쓰거나 구매도 할 수 있다. |
| 프론트 엔드 | 백 엔드 |
| 실제로 화면에 보이는 영역 | 서버 쪽에서 실행되는 코드를 작성하는 영역 |
| HTML, CSS, 자바스크립트, 리액트, 앵글러, 뷰 | php 라라벨, 자바 스프링부트, 파이썬 장고, 자바스크립트 node.js |
뷰포트(viewport)
실제 화면에 보이는 영역
| 단위 | 설명 |
| vw(viewport width) | 뷰포트의 너비 단위 1vw는 뷰포트 너비의 1%를 의미 |
| vh(viewport height) | 뷰포트의 높이 단위 1vh는 뷰포트 높이의 1%를 의미 |
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link href="css/viewport.css" rel="stylesheet">
</head>
<body>
<p class="percent">단위: %</p>
<p class="vw">단위: vw</p>
<p class="vh">단위: vh</p>
</body>
</html>body {
background-color: pink;
font-size: 30px;
}
.percent {
font-size: 100%;
}
.vw {
font-size: 5vw;
}
.vh {
font-size: 10vh;
}
출력 결과
웹 브라우저 사이즈를 조정해 보면 글자 크기가 웹 브라우저 사이즈에 맞춰서 동적으로 변하는 것을 볼 수 있다.
Flexbox
HTML 태그는 블록 요소와 인라인 요소로 나누어진다.
Flexbox는 CSS의 레이아웃 모듈 중 하나로, 요소들을 효율적으로 배치하고 정렬하는 데 도움을 준다.
| 블록 요소 (Block Elements) | 인라인 요소 (Inline Elements) |
| 전체 너비를 차지하며, 기본적으로 다음 요소와는 새로운 줄에서 배치 |
페이지에서 새로운 줄로 시작하거나 끝나지 않으며, 다른 인라인 요소와 함께 같은 줄에 배치 |
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<link href="css/flexbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>.flex-item {
background-color: aqua;
width: 100px;
height: 100px;
margin: 2px;
}
.container {
display: flex;
}
출력 결과
기본적으로 Flexbox를 사용하려면, 부모 태그의 display를 flex로 설정하면 된다.
주축과 교차축
주축과 교차축은 Flexbox에서 요소의 배치 방향과 정렬 방식에 중요한 역할을 한다.
| 주축(Main axis) | 교차축(Cross axis) |
| 수평 방향 | 주축에 수직인 방향, 세로 |
주축 정렬
justify-content: flex-start; (기본값)
현재 라인의 주축을 따라 플렉스 아이템이 배치되는 배치되는 방식의 기본 동작을 정의한다.
교차축 정렬
align-items: flex-start; (기본값)
현재 라인의 교차축을 따라 플렉스 아이템이 배치되는 배치되는 방식의 기본 동작을 정의한다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<link href="css/flexbox.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item box3">3</div>
</div>
</body>
</html>.flex-item {
background-color: aqua;
width: 100px;
height: 100px;
margin: 2px;
}
.container {
display: flex;
height: 500px;
justify-content: space-around;
border: 1px solid red;
align-items: baseline;
}
.box3 {
padding-top: 20px;
}
출력 결과
box3에 padding-top을 20px 주어서 크기를 바꾸어 주고, align-items를 baseline값을 주어서 텍스트 라인에 맞춰서 박스가 정렬되었다.
개별 아이템 교차축 정렬
align-self: auto; (기본값)
개별 flex 아이템의 교차축 방향에서의 정렬 방식을 설정하는 속성이다.
| auto | 기본값. 부모의 align-items 속성 값을 따름 |
| flex-start | 교차축의 시작 부분에 정렬 |
| flex-end | 교차축의 끝 부분에 정렬 |
| center | 교차축의 중앙에 정렬 |
| baseline | 텍스트의 기준선에 맞춰 정렬 |
| stretch | 기본값으로, 교차축 방향으로 가능한 최대 높이 또는 너비로 늘림 |
아이템 줄 바꿈
flex-wrap: nowrap(기본값);
flex 아이템들이 주축 방향으로 공간이 부족할 때, 어떻게 처리할지를 결정하는 속성이다.
| nowrap | 기본값. 아이템이 한 줄에 모두 배치되며, 필요할 경우 크기를 줄임 |
| wrap | 아이템이 주축 방향으로 공간이 부족하면 다음 줄로 이동 |
| wrap-reverse | 아이템이 주축 방향으로 공간이 부족하면 이전 줄로 이동 |
주축과 교차축 방향전환
flex-direction: row; (기본값)
주축을 설정하며 그에 따라 flex container에 배치되는 flex item들의 방향이 같이 설정된다.
| row | 기본값. flex 아이템을 가로로 배치 |
| column | flex 아이템을 세로로 배치 |
'Web > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 웹사이트 만들기 - 프로필 섹션 (0) | 2024.10.25 |
|---|---|
| [Bootstrap] 웹사이트 만들기 - 헤더 영역 (0) | 2024.10.25 |
| [Bootstrap] 반응형 레이아웃 (0) | 2024.10.25 |
| [Bootstrap] Bootstrap CSS 실습 (2) | 2024.10.24 |
| [Bootstrap] Bootstrap 적용 방법 (0) | 2024.10.24 |