25일차(3)/CSS(5) : Bootstrap, Form, Grid, Flex
<bootstrap>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step18_Bootstrap.html</title>
<!-- bootstrap css 로딩하기 -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- bootstrap javascript 로딩하기 -->
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container">
<h3 class="text-danger">Hello Bootstrap css</h3>
<button class="btn btn-primary">버튼1</button>
<button class="btn btn-secondary">버튼1</button>
<button class="btn btn-success">버튼1</button>
<button class="btn btn-info">버튼1</button>
<button class="btn btn-warning">버튼1</button>
<button class="btn btn-danger">버튼1</button>
<br>
<table class="table table-striped mt-2">
<thead class="table-dark">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>바나나</td>
<td>서울</td>
</tr>
<tr>
<td>2</td>
<td>딸기</td>
<td>부산</td>
</tr>
</tbody>
</table>
<div class="alert alert-danger alert-dismissible fade show" >
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" ></button>
</div>
<h3>collapse 사용해 보기 </h3>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" >
링크의 href 속성값을 이용
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" >
버튼의 data-bs-target 속성값을 이용
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
let m=document.querySelector("#exampleModal");
// bootstap.Modal 객체를 생성하면서 modal div 의 참조값
let modal=new bootstrap.Modal(m);
</script>
</div>
</body>
</html>
- bootstrap.css 를 적용해 만든 html 파일
- 누군가 만들어놓은 css를 불러와서 적용해 쓸 수 있다.
- 미리 적용할 값이 있다면, 사용자는 원하는 요소에 해당 클래스만 추가하면 적용할 수 있다.
- UI 동작에 필요한 javascript도 미리 만들어져 있어서 가져다가 쓸 수 있다.
로딩시킨 다음에 내 코드에 적용하면 된다.
*BootStrap 홈페이지 : https://getbootstrap.com/
- docs에서 만드는 방법을 참고해볼 수 있다.
- 트위터 ui개발자들이 ui를 만들면서 노하우들을 정리하면서 시작된 사이트
- 하나씩 선택자를 지정해보기
- 부트스트랩을 사용하면 css코드를 작성하지 않고 css를 적용할 수 있다.
(선택자를 지정하는 것만으로도 적용 가능!)
- 이런 자주 쓰이는 정해진 색깔들이 있다. primary, secondary, danger, ... 특정 키워드 사용!
- 클래스를 가져다 쓰는 것만으로도 효과가 있다.
- 고유의 색상을 쓰지 않으므로 다양한 구성원들이 공유할 수 있고, 프로젝트가 끝난 상황에서도 사용가능.
- 버튼에 다양한 css가 걸려있음
- btn이라는 클래스 선택자를 추가하기만 하면 이 CSS를 가져다 쓸 수 있다!
- hover, focus, active 되었을 때 어떻게 할지도 대비되어 있다.
- 가져다가 사용하면 훨씬 효율적인 UI 구성이 가능하다!
- margin top 을 2단계로 준다는 뜻이다.
mt mb ms me
margin +(top botton start end)
pt pb ps pe
padding +(top botton start end)
- 단계는 1단계~5단계로 만들어져 있다.
- margin, padding을 줄 때도 bootstrap에서 만든 요소를 가져올 수 있다.
(4는 24px / 1.5 rem이다)
p class="m-1" : p의 마진 4px
div class="p-3" : div의 패딩 16px
button class="ms-5" : 버튼 왼쪽 마진이 48px
- 각각의 영문, 숫자의 조합으로 margin, padding 값을 지정할 수 있다.
- 동작이 미리 준비되어 있는 UI도 있다.
- x를 누르면 닫히고, dropdown 버튼을 누르면 항목들이 열린다.
- 이런 javascript도 준비되어 있다. 어디에 적용시킬지 연결해주면 된다.
data-bs-xxx
- 데이터 부트스트랩(부트스트랩에서 임의로 정의한 속성)
- 그대로 써주어야 작동한다.
- javascript가 연결되기 위한 트리거 역할을 해준다!
- 다른 클래스들도 모두 각각 UI 의 동작, 디자인 등이 지정되어 있는 것
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" >
링크의 href 속성값을 이용
</a>
- 버튼에 관련된 클래스를 적용시키면 링크도 버튼 모양으로 만들어진다.
- id가 있는 요소를 가리켜서 그 요소가 열리고 접히게 해준다.
#id와 해당 id가 있는 타겟과의 연결고리를 만들어준다!
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
- dropdown도 이런 구조를 만들어두어야 dropdown이 하나 만들어지는것
- aria 속성 : 없어도 동작, 디자인에는 아무 상관이 없다.
(웹접근성과 관련! 지금 시점에는 무시해도 된다.)
<form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step18_form.html</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
<h3>로그인 폼</h3>
<form action="login.jsp">
<div class="mb-3">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" id="id" name="id">
</div>
<div class="mb-3">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" id="pwd" name="pwd">
</div>
<button class="btn btn-outline-primary" type="submit">
로그인
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16">
<path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
</button>
<a class="btn btn-outline-success" href="singup_form.jsp">
회원가입
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-heart" viewBox="0 0 16 16">
<path d="M9 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-9 8c0 1 1 1 1 1h10s1 0 1-1-1-4-6-4-6 3-6 4Zm13.5-8.09c1.387-1.425 4.855 1.07 0 4.277-4.854-3.207-1.387-5.702 0-4.276Z"/>
</svg>
</a>
</form>
<!-- 행(row) 를 정의하고 -->
<div class="row">
<!-- width 50% 인 칼럼을 정의하고 칼럼안에 UI 배치 -->
<div class="col-6">
<h3>로그인 폼</h3>
<form action="login.jsp">
<div class="mb-3">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" id="id" name="id">
</div>
<div class="mb-3">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" id="pwd" name="pwd">
</div>
<button class="btn btn-outline-primary" type="submit">로그인</button>
<a class="btn btn-outline-success" href="singup_form.jsp">회원가입</a>
</form>
</div>
</div>
<!-- 행(row) 를 정의하고 -->
<div class="row">
<!-- width 50% 인 칼럼을 정의하고 칼럼안에 UI 배치 -->
<div class="col-md-6">
<h3>로그인 폼</h3>
<form action="login.jsp">
<div class="mb-3">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" id="id" name="id">
</div>
<div class="mb-3">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" id="pwd" name="pwd">
</div>
<button class="btn btn-outline-primary" type="submit">로그인</button>
<a class="btn btn-outline-success" href="singup_form.jsp">회원가입</a>
</form>
</div>
</div>
</div>
</body>
</html>
- 위와 같은 폼, 사용자 입력양식을 구성할 일이 많다.
- 컨텐츠, UI는 대부분 container 클래스 안에 배치
- 각각 어떤 클래스가 적용되었는지 보고 익히기!
- 로그인 폼의 버튼에 붙은 아이콘은 svg로 만든 글꼴이라고 보면된다.
- 아이콘을 문자로 만들면 크기, 색상을 자유롭게 만들 수 있어서 좋다.
- bootstrap의 icons에 들어가면 필요한 아이콘(글자형태)을 찾아서 넣을 수 있다.
- 우측의 copyHTML을 복사해서 붙여넣으면 그대로 사용가능!
<form2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step18_form2.html</title>
<link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>회원 가입 폼</h1>
<form action="signup.jsp">
<div class="mb-3">
<label class="form-label" for="email">이메일</label>
<input class="form-control" type="text" id="email" name="email">
<div class="invalid-feedback">이메일 형식에 맞게 입력 하세요</div>
</div>
<div class="mb-3">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" id="pwd" name="pwd">
<div class="valid-feedback">사용할수 있는 비밀 번호 입니다.</div>
</div>
<button class="btn btn-primary" type="submit">가입</button>
</form>
<script>
document.querySelector("#email").addEventListener("input", function(){
//1. 입력한 이메일을 읽어와서
let inputEmail=document.querySelector("#email").value;
//2. 이메일 형식에 맞는지 확인해서
let index=inputEmail.indexOf("@"); // @ 문자열이 몇번째 인덱스에 있는지 확인
//3. 맞으면 is-valid 클래스를 추가, 클리면 is-invalid 클래스를 추가
if(index >= 0){ // @ 가 어딘가 존재 하는 것이고
this.classList.remove("is-invalid");
this.classList.add("is-valid");
}else{//그렇지 않으면 ( -1 이면 ) @ 가 없는 것이다.
this.classList.remove("is-valid");
this.classList.add("is-invalid");
}
});
</script>
</div>
</div>
</div>
</body>
</html>
- container 클래스는 기본 가운데 정렬 되어있다.
- 대부분의 사이트들이 가운데정렬 되어있음
- 어떤 UI를 배치할 때는 보통 그냥 body에다가 (container 클래스 없이) 나열하는 것이 아니라,
어떤 div하나를 만들어놓고 그 안에 정리한다.
<Grid System>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step18_GridSystem.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 class="bg-secondary">Grid Test</h1>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe molestiae deleniti ex sit atque quos sapiente, quasi numquam magni, iste ea quibusdam, voluptatem nostrum libero. Illum natus quod autem harum?</p>
</div>
<div class="col">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At esse dolorem aut doloremque cum. Iusto id fugit nam laboriosam blanditiis pariatur beatae ullam quo rem, unde quod nemo delectus. Illum.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto, vel. Quas, enim magni quis, fugit, reiciendis nulla animi velit laborum nesciunt est ad! Quis aliquid nulla veniam, est doloribus nemo?</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto, vel. Quas, enim magni quis, fugit, reiciendis nulla animi velit laborum nesciunt est ad! Quis aliquid nulla veniam, est doloribus nemo?</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto, vel. Quas, enim magni quis, fugit, reiciendis nulla animi velit laborum nesciunt est ad! Quis aliquid nulla veniam, est doloribus nemo?</p>
</div>
</div>
<h3>반응형 이미지</h3>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-md-6 col-lg-3">
<img class="img-fluid" src="images/image1.png" >
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid" src="images/image2.png" >
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid" src="images/image3.png" >
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid" src="images/image4.png" >
</div>
</div>
</div>
<script async src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
</body>
</html>
- 또한 div 안에도 row / column의 개념을 만들 수 있다.
- A,B라는 UI를 배치해야 할 때, row의 개념을 만들고, 행 안에다가 칼럼 의개념을 만든다.
그 안에다가 ui를 배치. 이렇게 레이아웃을 짠다!
- 하나의 row가 두개의 col을 가지는 것
- 두 개의 칼럼 안에다가 p 요소를 배치한 것이다!
- 하나의 칼럼으로 row 전체를 다 쓰는거면 상관없다.
하지만 여러 칼럼을 넣고싶다면 하위항목으로 col 넣어둘 것!
- 칼럼의 비율을 정할 때 문자, 숫자가 같이 들어가는 것을 익혀두기
- 기본이 화면(전체 폭) 12등분이다. 그 12등분 한 것 중에 몇개를 사용한다는 것을 표현한 것.
칼럼의 폭을 결정한다!
- 하지만 일정 숫자 이하로 브라우저의 폭이 줄어들면 브라우저 폭 전체(100%)를 사용한다.
- col-6이면 반드시 6만큼의 폭을 가지지만,
col-sm-6이면 조건을 가지는 기준으로, 일정 폭 이상으로 좁아지기 전까지만 해당 비율로 지정하는 것
- col-md-6 : sm보다 조금 더 넓어야 50%가 된다.
- breakpoint : 링크
- bootstrap 홈페이지에 들어가보면 정확한 수치가 나와있다. 대략적인 숫자는 기억하기
ex)
div class="col-6" : 무조건 폭을 전체 창의 50%로 한다.
div class="col-sm-6" : 조건부로 폭의 50%를 차지한다. 단, 화면의 폭이 576px이상일 때만!
div class="col-md-3" 조건부 25%(3/12)를 유지한다. 화면의 폭이 768px이상일때만.
그리드시스템을 사용하면 디바이스, 브라우저의 크기에 따라서 div의 칼럼의 폭을 바꿀 수 있다.
- 격자를 만들어두고 그 안에 UI를 배치하는 것
→ Grid System (격자 시스템)
- 왜 이런식으로 레이아웃을 짜냐면, 웹브라우저에 출력할 UI를 만드는 것이기 때문이다.
어떤 사람은 와이드 모니터로 볼것이고, 태블릿이나 폰으로 좁게 보는 사람도 있을 것이고,
클라이언트의 기기의 크기가 다양하기 때문이다.
ex) 사진 4장을 웹브라우저에 출력해서 보여주고 싶다면?
화면 크기에 따라 레이아웃을 다르게 구성해야 한다.
- 화면의 폭에 따라서 보이는 레이아웃은 달라져야 한다.
- 밑으로 내리면 스크롤하면 된다! 하지만 좌우는 스크롤하면 사용하기 불편하다.
- 이런 문제의 해결을 위해 격자시스템 사용!
- Grid System에서는 화면의 폭을 감지해서 레이아웃을 바꿀수있다.
- 화면의 폭에 따라서 이미지의 레이아웃이 바뀐다는 것은,
화면의 폭이 다양할 경우에 적용할 css를 다 만들어놓아야한다는 의미이다.
그 대신 반응형 웹사이트를 사용하는 것.
- 반응형 UI를 만들기 위해서는 시간과 비용이 많이 드는데,
잘 짜여진 격자 시스템을 사용하면 손쉽게 만들 수 있다.
- 모바일버전을 따로 만드는 것은 추천하지 않는다.
똑같은 컨텐츠를 다른 url로 다시 만드는 것은 그다지... 더 수고스럽다.
하지만 기존의 것을 수정하기 어려워서 차선책으로 모바일페이지를 만든 것.
- 폭이 줄어들면 이미지, 컨텐츠의 크기가 달라지고 레이아웃도 달라진다.
- 폭이 줄어들면 적용되는 css가 다르기 때문에! Grid system을 사용하면 더욱 쉽게 할 수 있다.
- 부트스트랩에서 찾아보면 @media 로 정의된 아래 것들은 조건부로 적용되는 것이다.
@media(min-width:576){ css } 는 () 안의 조건이 true일 때만 적용되는 CSS이다.
무조건 존재하는 것이 아니라, 조건부로 존재하는 css이다.
- sm이라는 단어가 들어간 클래스 선택자는 모두 이 media 쿼리 안에 들어가있다!
- md도 위와 같이 정의되어 있다. 폭이 768px 이하일때만 적용되는 CSS!
- lg, xl, xxl도 모두 마찬가지로 정의되어 있다.
ex) 아래 div의 width는 몇%인가?
<div class="col-6"></div> → 50%
<div class="col-3"> → 25%
<div class="col-sm-6"> → 주어진 조건만으로는 알 수 없다.
클때는 50% , 폭이 좁을때는 전체를 차지한다.
디바이스의 폭이 있어야 알 수 있다.
웹브라우저의 폭: 1000px일 경우 → 50%
웹브라우저의 폭: 500px
div class="col-sm-6" → 100%. sm의 기준보다 작으므로 전체 폭 차지.
웹브라우저의 폭: 600px
div class="col-sm-6 col-md-3" → 50%
웹브라우저의 폭: 800px
div class="col-sm-6 col-md-3" → 25%
- md에 선언된 것이 sm보다 나중에 선언되었기 때문에 md 가 적용된다.
(로딩된 bootstrap.css에 정의된 코드의 순서가 sm-md-lg-xl-xxl 라는것도 기억하기!)
- 어떤 div에 여러개의 서식을 지정할 수도 있다.
- 저 이미지의 크기는 디바이스의 폭에 따라 100%일 수도, 50%일 수도, 25%일 수도 있다.
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-md-6 col-lg-3">
<img class="img-fluid" src="image.png" >
- masonry라는 javascript를 적용해서 레이아웃 변동으로 이동시 자연스럽게 애니메이션처럼 이동하게 해준다.
- masonry 사이트 : 링크
** Grid 페이지 참고.
- table의 tr, td처럼 grid의 row, column 기능을 사용하면된다.
- cutter 칼럼사이의 간격을 좀 떨어져 있게 하는 기능.
1.5rem이 떨어져있다. (4px)
- 칼럼에 숫자가 붙어있으면 숫자가 있는 만큼 비율을 가져가고 나머지를 나머지 칼럼들이 나누어 가진다.
- 칼럼이 두개밖에 못 들어가도록 막는다. 고정해서 정한 것!
- 부모요소에서 자식요소의 폭을 제한할 수도 있다.
- 칼럼 안에 row의 개념을 만들고 그것을 다시 12등분으로 나눈 것.
<flex>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step19_flex.html</title>
<style>
.wrapper{
background-color: #cecece;
margin-bottom: 100px;
display: flex;
transition: all 0.3s ease-out;
height: 300px;
}
.item{
background-color: yellow;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
width : <span id="currentWrapperWidth">100%</span>
<input type="range" id="wrapperWidth" value="100" max="100" min="50">
<br>
height : <span id="currentWrapperHeight">100px</span>
<input type="range" id="wrapperHeight" value="300" max="500" min="100">
<br>
flex-direction :
<select id="flexDirection">
<option selected>row</option>
<option>row-reverse</option>
<option>column</option>
<option>column-reverse</option>
</select>
<br>
flex-wrap :
<select id="flexWrap">
<option selected>nowrap</option>
<option>wrap</option>
<option>wrap-reverse</option>
</select>
<br>
justify-content :
<select id="justifyContent">
<option selected>flex-start</option>
<option>flex-end</option>
<option>center</option>
<option>space-between</option>
<option>space-around</option>
<option>space-evenly</option>
</select>
<br>
align-items :
<select id="alignItems">
<option selected>stretch</option>
<option>flex-start</option>
<option>flex-end</option>
<option>center</option>
<option>base-line</option>
</select>
<br>
align-content :
<select id="alignContent">
<option selected>normal</option>
<option>flex-start</option>
<option>flex-end</option>
<option>center</option>
<option>space-between</option>
<option>space-around</option>
<option>space-evenly</option>
<option>stretch</option>
</select>
<div class="wrapper">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
</div>
<script>
document.querySelector("#wrapperWidth").addEventListener("mousemove", function(){
document.querySelector(".wrapper").style.width=this.value+"%";
document.querySelector("#currentWrapperWidth").innerText=this.value+"%";
});
document.querySelector("#wrapperHeight").addEventListener("mousemove", function(){
document.querySelector(".wrapper").style.height=this.value+"px";
document.querySelector("#currentWrapperHeight").innerText=this.value+"px";
});
document.querySelector("#flexDirection").addEventListener("change", function(){
document.querySelector(".wrapper").style.flexDirection=this.value;
});
document.querySelector("#flexWrap").addEventListener("change", function(){
document.querySelector(".wrapper").style.flexWrap=this.value;
});
document.querySelector("#justifyContent").addEventListener("change", function(){
document.querySelector(".wrapper").style.justifyContent=this.value;
});
document.querySelector("#alignItems").addEventListener("change", function(){
document.querySelector(".wrapper").style.alignItems=this.value;
});
document.querySelector("#alignContent").addEventListener("change", function(){
document.querySelector(".wrapper").style.alignContent=this.value;
});
</script>
</body>
</html>
- javascript로 바로 적용되는 예제 만들기. wrapper안에 적용하는 속성!
- display:flex; 해두면 안에있는 아이템을 쉽게 배치할 수 있다. grid system을 사용하듯이!
- wrapper라는 클래스로 감싸두고 wrapper의 css를 하위 항목에 전부 적용할 수 있도록 바꾼다.
부모요소에서 자식요소에 어떻게 정렬하라고 명령하는 것!
- 자식요소 하나하나도 고유의 그 자식만 가지고 있는 속성을 보유하고있다.
- column : 위-아래로 정렬 / column-reverse : 아래-위로 정렬
- 사이즈를 늘리거나, 줄이거나, 줄 간격을 똑같게 하거나 하는 것이 가능하다.
- flex를 사용하면 원하는 컨텐츠를 원하는 위치에 잘 배치할 수 있다.
- javascript 와 연결해서 로딩해야만 모든 UI가 동작할 수 있다.
참고) 유튜브: CSS display flex 검색하면 유익한 영상이 많다.
참고) Bootstrap 홈페이지 들어가면 다양한 기능이 많다!!
Docs / Layout / Components / Helpers / Utilities 등 참고
* Components에 들어있는 기능 중 살펴볼 것
collapse
carrosel
slide
navbar
pagination (페이징 처리)
toast
Tooltip (마우스 올렸을때 작은 안내문 뜨는거)
'국비교육(22-23)' 카테고리의 다른 글
| 26일차(2)/jsp(2) : servlet, jsp 비교 (0) | 2022.11.13 |
|---|---|
| 26일차(1)/jsp(1) : Eclipse Server, Emmet 설정 등 (0) | 2022.11.13 |
| 25일차(2)/CSS(4) : Text, CSS가중치, Unit 외 (0) | 2022.11.09 |
| 25일차(1)/CSS(3) : Float, Display (0) | 2022.11.09 |
| 24일차(3)/CSS(2) : Margin, Padding, Border / Pseudo Class / Position (0) | 2022.11.09 |