- layout - 만들어보기
- layout - 영역 구분
<style>
<div class="container">
<div class="header"> <!-- 제목 -->
<h2>header 영역</h2>
</div>
<div class="main">
<div class="nav"> <!-- 소 내용 -->
<h2>nav 영역</h2>
</div>
<div class="section"> <!-- 내용 -->
<h2>section 영역</h2>
</div>
</div>
<div class="footer"> <!-- 웹의 최하단 -->
<h2>footer 영역</h2>
</div>
</div>
</style>
먼저 body에 레이아웃의 영역을 설정해준다
이번 만들어 보기에는 4가지 영역으로 ( heder , main , section , footer )구분했다
- layout - 스타일 적용
<style>
* {
box-sizing: border-box;
}
// * 로 전체 태그에 적용 //
// margin , width , padding 등 사이즈를 제어하는 속성을 //
// 태그 안에서 이루어지게 만들었다 //
.header {
border: 3px solid lightskyblue;
}
.nav {
border: 3px solid lightskyblue;
float: left;
width: 30%;
// nav클래스가 적용된 태그에 3px 실선을 적용하고
// float 속성으로 왼쪽에 왼쪽에 붙임
// width 30%로 화면의 30%를 차지하게 만듬
(가로 기준)
}
.section {
border: 3px solid lightskyblue;
float: left;
width: 70%;
// section 클래스가 적용된 태그에 3px 실선을 적용
// float 속성으로 왼쪽에 붙임
// width 70%로 크기를 화면의 70%를 차지하게 함
(가로 기준)
}
/* float 해제 */
.main::after {
content: "";
clear: both;
display: table;
// 이 아래 오는 태그가 float속성을 받지 않게
// float을 해제하는 css문
}
.footer {
border: 3px solid lightskyblue;
// footer클래스가 적용된 태그에 3px 실선을 적용
}
</style>
- 전날 만든 menu + layout 합쳐보기
<style>
.menu {
position: sticky;
top: 0;
}
ul {
list-style-type: none;
overflow: hidden;
background-color: dodgerblue;
}
li {
float: left;
}
li a {
display: inline-block;
padding: 15px 70px;
text-align: center;
text-decoration: none;
color: white;
}
li a:hover {
background-color: hotpink;
}
</style><body>
<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#" class="active">저는요</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact Me</a>
</li>
</ul>
</div>
</body>전날 만든 menu를 div class = "menu" 안에 복사 붙여넣기 하였다
menu 클래스로 지정한 div에 넣었기 때문에 스타일에도
클래스 선택자를 이용하여 .menu스타일 안에 복사 붙여넣기 해주었다
- mediaquery 알아보기
mediaquery는 웹 페이지를 보는 디바이스나 화면 크기의 특성에 따라 다른 스타일을 적용하는 쿼리입니다.
@media를 사용하여 스마트폰과 데스크톱에서 웹 페이지의 레이아웃과 글꼴 크기를 다르게 조정할 수 있습니다.
참고 문법사용 예시
@meida 미디어유형 and (관련 특성값){
선택자{
적용할 css & style 규칙
}
}
미디어 유형을 생략하고 미디어 쿼리를 작성하면
이는 all 미디어 유형을 나타냅니다.
mediaquery 사용해보기
<style>
.container {
background-color: tomato;
width: 200px;
height: 200px;
}
/* 브라우저 사이즈가 가로기준 700px 이하에서 배경색 변경 */
@media(max-width: 700px) {
.container {
background-color: black;
width: 100px;
height: 100px;
}
}
/* 브라우저 사이즈가 가로기준 500px 이하에서 배경색 변경 */
@media(max-width: 500px) {
.container {
background-color: aqua;
width: 150px;
height: 150px;
}
}
</style>
<body>
<div class="container">
</div>
</body>
@media의 기준값을 가로기준으로 했기 때문에
가로가 짧아지면 div태그의 크기와 색상이 바뀌는 모습이다
- grid 알아보기
전날에 배운 float의 상위버전이라고 생각하면 편하다
float 와 grid는 둘다 레이아웃을 만들때 사용되고
float는 태그를 띄워서 이어 붙인다고 생각하면 편하고
grid는 구역을 나누어 쪼개 사용한다고 생각하면 편하다
지금까지는 그렇게 이해하고 있다
문법 사용의 예시
<style>
.A {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-columns:는 grid의 행의 갯수라고 생각하면 편하다
auto는 grid에서 사용되는 단위입니다
}
.B {
background-color: orange;
border: 1px solid red;
width: 300px;
height: 300px;
}
</style><body>
<div class="A">
<div class="B">div1</div>
<div class="B">div2</div>
<div class="B">div3</div>
<div class="B">div4</div>
<div class="B">div5</div>
<div class="B">div6</div>
<div class="B">div7</div>
<div class="B">div8</div>
</div>
</body>grid 적용을 위해선 배치하려는 요소의 부모 요소에 grid를 지정해야합니다
grid는 부모 요소에 입력받아 자식 요소에게 영향을 주는 속성입니다
출력 이미지
위 사진과 같이 grid-template-columns:에서 auto를 4개로 속성값을 주었기 때문에
행의 갯수가 4개로 출력되었다
- grid로 만든 layout 쪼개기
grid로 layout을 만들었습니다 이제 입맛에 맞게 영역을 설정해줍니다
<body>
<div class="container">
<div class="item item1">div1</div>
<div class="item item2">div2</div>
<div class="item item3">div3</div>
<div class="item item4">div4</div>
<div class="item item5">div5</div>
<div class="item item6">div6</div>
<div class="item item7">div7</div>
<div class="item item8">div8</div>
</div>
</body>
먼저 grid로 설정된 자식 클래스를 사용해야하기 때문에 중복된 이름이 없어야합니다
가독성을 높이기위해 item1~8로 설정했습니다
<style>
.container {
display: grid;
/* 행의 갯수 */
grid-template-columns: auto auto auto;
/* 행의 간격 */
column-gap: 10px;
/* 열의 간격 */
row-gap: 10px;
}
.item {
background-color: orange;
border: 1px solid red;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item2 {
grid-column: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.item5 {
/* 열 번호 */
grid-row: 3;
/* 열의 1~4까지의 칸 사용 */
grid-column: 1/4;
}
</style>
grid-template-columns:이 부모 태그에 레이아웃 행의 갯수를 지정한다면
grid-clumn 은 자식태그에 사용 범위를 지정해줍니다
.item5를 주의깊게 살펴보길 추천합니다
- bootstrap 사용해보기
준비물 : bootstrap
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
홈페이지에서 아래로 조금만 내려준다
우리는 cdn으로 bootstrap을 사용할 예정이기 때문에 각각 복사해서 head 부분에 넣어준다
이렇게 head 부분에 각각 복사 붙여 넣기를 했다면
사용하기 편하게 파일을 만들어주자
링크부분에 마우스를 올리면 링크 부분으로 넘어갈 수 있다
링크로 넘어가면 이렇게 길게 코드가 나오는데 보기편하게 .min부분을 지워주자
이후 ctrl + a로 전체 드레그 후 복사!
이후 vscode에 파일을 만들고 저장해준다
각각 css는 .css 로 js는 .js를 제목 뒤에 꼭붙여서 파일을 만들어준다
이후 head부분에 이미지를 불러온것처럼 각 link 와 script 태그로 불러와 사용해준다
- buttons 만들어보기
<body>
<button class="btn btn-outline-dark">1212</button>
btn은 bootstrap으로 가져온 스타일 적용
<button class="btn btn-primary">Click</button>
btn은 bootstrap으로 가져온 스타일 적용
</body>
- form 사용해보기
form은 사용자로부터 입력받은 값을 어딘가(서버)로 보낼 때 사용
form의 구조는 아래 사진 참고
<body>
<form action="목적지" method="get or post"></form>
action: 목적지(보통 서버에서 처리할 주소를 작성함)
method: 전송방식(http request method)을 지정함
get: 입력값이 주소창에 노출됨
post: 입력값이 노출되지 않음
method를 따로 설정하지 않으면 기본값은 get이다
</body>
label으로 칸과 지정위치를 알려주고
input 으로 작성 타입을 설정 member_email에 입력값을 받아 post 방식으로 /longin서버에 보낸다
(그렇기 때문에 input태그는 목적지로 보낼 form태그 안에 있어야한다)
- 자투리 - option , radio , checkbox
form 태그에 input 태그가 있듯
option 태그는 select 태그와 함께 사용한다
