개발세발
[새싹(SeSAC) 프론트엔드] day10 221028 수업 복습 본문
calc()
계산을 이용하여 빠르게 값 구하기
vh, px 처럼 단위가 달라도 사용 가능
css 에서 변수 설정하기
왜 변수를 사용할까
- 속성에 값을 줄 때 일관성을 유지하기 위해서 변수로 설정해두고 불러옴
- 일괄적으로 수정이 편하게 가능함
[사용방법]
.css
--속성이름 : value ;
--속성-이름 : value ;
.scss
$속성이름 : value;
(*) 혼자서 만들어 보기
[샘플]
[코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" href="/css/class2.css">
<body>
<div class="container">
<header>
<div class="logo">logo</div>
<div class="menu">menu</div>
<div class="info">info</div>
</header>
<section class="top">
<div class="topLeft">top left</div>
<div class="topRight">top right</div>
</section>
<section class="bottom">
<div class="bottomNo1">bottom 1</div>
<div class="bottomNo2">bottom 2</div>
<div class="bottomNo3">
<div class="no3Top"> bottom 3 up</div>
<div class="no3Bottom">bottom 3 down</div>
</div>
<div class="bottomNo4">bottom 4</div>
</section>
<footer>
footerMain
</footer>
</div>
</body>
</html>
.scss
$fragHeight: 80px;
$bg: #03a9f4;
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
header {
display: flex;
height: $fragHeight;
.logo {
flex: 1;
background: beige;
height: 100%;
background: $bg;
}
.menu {
flex: 6;
background: pink;
}
.info {
flex: 1;
background: rgb(190, 149, 255);
}
}
.top {
display: flex;
height: calc((100vh - $fragHeight * 2));
.topLeft {
flex: 2;
background: rgb(255, 218, 170);
}
.topRight {
flex: 1;
background: rgb(169, 176, 248);
}
}
.bottom {
display: flex;
height: calc((100vh - $fragHeight * 2) / 2);
.bottomNo1 {
flex: 1;
background: rgb(193, 238, 255);
}
.bottomNo2 {
flex: 1;
background: beige;
}
.bottomNo3 {
flex: 1;
display: flex;
flex-direction: column;
.no3Top {
flex: 1;
background: rgb(234, 252, 199);
}
.no3Bottom {
flex: 1;
background: rgb(113, 207, 104);
}
}
.bottomNo4 {
flex: 1;
background: rgb(248, 170, 247);
}
}
footer {
height: $fragHeight;
background: rgb(255, 160, 160);
}
}
@media screen and (max-width: 768px) {
.info,
.bottomNo2,
.bottomNo4 {
display: none;
}
.top {
flex-direction: column;
height: calc((100vh - $fragHeight * 2));
}
}
[결과]
** outline도 border 처럼 값을 줄 수 있음
outline : 0.5px solid skyblue
그리드(grid)
:격자 바둑판을 의미
- 레이아웃
: 웹사이트를 여러 개의 컬럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 의미
- 특징
: 시각적으로 안정된 레이아웃 유지
: 업데이트가 편리
: 자유로운 요소 배치
display 속성
| value | 설명 |
| grid | 컨테이너 안의 항목을 블록 레벨 요소로 배치 |
| inline | 컨테이너 안의 항목을 인라인 레벨 요소로 배치 |
column, row 지정 속성
| 값 | 설명 |
| grid-teamplate-rows | 컨테이너 안에 배치할 행의 크기와 개수 지정 |
| grid-template-column | 컨테이너 안에 배치할 열의 크기와 개수 지정 |
(+) table 만드는 것 처럼 하나의 기준점을 잡으면 쉽지 않을까
예를 들어 row기준으로 먼저 만들고 column으로 세로 줄을 쪼개면 좀 더 안 헷갈리지 않을까
➡️ grid는 column기준이 더 이해가 잘됐다.
**grid로 큰 레이아웃
하나하나의 칸은 flex로 배치활용
➡️ grid와 flex를 적절히 잘 섞어 사용하기
➡️ 부모 : grid 자식 : flex
grid 레이아웃 속성
repeat()함수
/* repeat(반복횟수, 너비) */
grid-template-columns : 200px 200px 200px;
gird-template-columns : repeat(3, 200px);
(*) 실습
[코드]
.parent{
grid-template-rows: 100px 100px;
// grid-template-columns: 200px 200px 200px;
grid-template-columns: repeat(3, 200px);
}[결과]
fr(fraction) 단위
: 그리드 레이아웃에서 상대적인 크기를 지정하는 단위
= flex-grow 같은 건데 뒤에 'fr'을 붙여준다는 차이점!
/* 너비가 같은 컬럼 2개 배치 */
grid-template-columns : 1fr 1fr;
/* 2:1:2로 줄 배치 */
grid-template-rows : 2fr 1fr 2fr;
(*) 실습
[코드]
.parent{
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}[결과]
minmax() 함수
: 최소값 최대값을 지정하여 줄 높이를 유연하게 지정하는 함수
minmax(최소값, 최대값)
: 값을 하나만
/* 줄의 최소 높이 100px, 최대 높이 auto */
grid-template-rows : minmax(100px, auto);
grid-auto-rows
:모든 줄에 동일한 설정을 부여할 때
/* rows에 고정값 부여 */
grid-auto-rows : 100px
/* rows에 최소, 최대값 설정*/
grid-auto-rows : minmax(100px, auto)
(*) 실습 1 - auto + px(고정값)
[코드]
.parent{
grid-auto-rows: 100px;
}[결과]
(*)실습 2 - auto + minmax
[코드]
.parent{
grid-auto-rows: minmax(100px, auto);
}[결과]
auto-fill, auto-fit
: 컬럼 개수를 자동으로 조절 해주는 값
| auto-fit | auto-fill |
| 화면의 남는 공간 없이 꽉 채워서 컬럼을 표시 * fill보다는 fit을 더 많이 사용 |
컬럼의 최소 너비만 표시하고 남은 공간은 그대로 둠 |
-auto-fit을 유지하지 못한다면 일부 컬럼은 아래로 떨어지면서 반응형 같은 느낌이 됨
(*) 실습
[코드]
.parent{
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: minmax(100px, auto);
}[결과]
** rows 가 auto가 아니므로 첫째줄만 적용되어 있음
(+) auto-fit, auto-fill 둘다 너비값을 따로 지정해주지 않으면 한줄 영역 다 차지하는 형태로 똑같이 나옴
➡️ 지정된 너비값이 있어야
| value | 설명 |
| grid-column-gap | 열과 열 사이의 간격을 지정 |
| grid-row-gap | 행과 행 사이의 간격을 지정 |
| grid-gap | 행과 열 사이의 간격을 한번에 지정 |
(+) grid-column-gap을 쓸 때 자동완성에 해당 글자에 취소선이 그어져 있길래 찾아봤다
gap 'grid-'
gap을 사용할때 'grid-'라는 접두사를 이제 생략해서 쓴다고 한다
그냥 row-gap으로 쓰면 되고, grid-gap도 그냥 gap이라고 써도 적용된다
https://teamtreehouse.com/community/grid-gap-properties-obsolete
Grid Gap Properties obsolete? (Example) | Treehouse Community
I use VSCode and as I was following along with the practice, I noticed that my editor gave me a tooltip about the following properties being obs...
teamtreehouse.com
https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
row-gap - CSS: Cascading Style Sheets | MDN
The row-gap CSS property sets the size of the gap (gutter) between an element's rows.
developer.mozilla.org
별칭이라서 생략해서 써도 된다고 나와있다
(+) grid-gap , padding
How to get a grid-gap between the grid item and the container?
How can I get a left-sided gap? As you can see the Box1 is sitting 'sticky' to the left side I've used grid-gap: 1em; but it only applies to top bottom and right? /*Defining the font and pixels...
stackoverflow.com
그리드 라인
| 종류 | 설명 |
| grid-column-start | 열 시작 라인 번호 지정 |
| grid-column-end | 열 마지막 라인 번호 지정 |
| grid-column | 열 시작번호와 끝 번호 사이에 '/'를 넣어 지정 |
| grid-row-start | 행 시작의 라인 번호 지정 |
| grid-row-end | 행 마지막 라인 번호를 지정 |
| grid-row | 행 시작 번호와 끝 번호 사이에 '/'를 넣어 지정 |
4부터 역순으로 -1, -2...등으로도 사용할 수 있음
(*) 실습
[코드]
.child:nth-child(1) {
grid-column-start: 1;
grid-column-end: 4;
background: beige;
}
.child:nth-child(2) {
// grid-row-start: 2;
// grid-row-end: 4;
grid-row: 2 / 4;
background: pink;
}
.child:nth-child(3) {
// grid-column-start: 2;
// grid-column-end: 4;
grid-column: 2/4;
background: skyblue;
}
.child:nth-child(4) {
// grid-column-start: 3;
// grid-column-end: 4;
grid-column: 3/4;
background-color: antiquewhite;
}
.child:nth-child(5) {
// grid-column-start: 2;
// grid-column-end: 3;
grid-column: 2/3;
background-color: aliceblue;
}
.child:nth-child(6) {
// grid-row-start: 5;
// grid-row-end: 6;
grid-row: 5/6;
background-color: rgb(245, 83, 83);
}
[결과]
(+) 모든 항목에 row, column을 다 주지 않고 한쪽에만 준 상태에서
밑에 있는 항목의 row나 column값을 크게 준다면 값이 비어있는 영역을 찾아서 비집고 올라오게 된다.
(+) 앞서 영역이 지정된 값을 침범하는 값을 넣어준다면
.child:nth-child(2) {
grid-row: 2 / 4;
background: pink;
}
.child:nth-child(6) {
grid-row: 2 / 6;
background-color: rgb(245, 83, 83);
}2번 : grid-row : 2 / 4;
6번 : gird-row : 2 / 6;
2번에 이미 grid-row값이 설정되어 있기 때문에 빈 영역을 비집고 들어가지 못한다.
따라서 원래 있던 첫째줄이 아닌 둘째줄로 들어가 억지로나마 row:2를 맞추게 된다
➡️ column은 지정된 값이 없고 row만 있기 때문에 2번 줄로 column을 옮겨가서 시작하게 된다
.child:nth-child(6) {
// grid-row-start: 5;
// grid-row-end: 6;
grid-row: 2/6;
grid-column: 1/2;
background-color: rgb(245, 83, 83);
}
그래서 6번이 row도 가지고 column도 가진다면 반대로 2번이 지정된 column이 없어서 밀려나게 된다
column값 없이 grid-row 1/6을 준다면 여전히 2번째 줄에서 시작하지만 또다른 row1에 속해있는데 지정된 rowr 값이 없는 1번 박스를 밀어내고 올라가게 된다
.child:nth-child(1) {
grid-column-start: 1;
grid-column-end: 4;
background: beige;
}
.child:nth-child(2) {
// grid-row-start: 2;
// grid-row-end: 4;
grid-row: 2 / 4;
background: pink;
}
.child:nth-child(6) {
// grid-row-start: 5;
// grid-row-end: 6;
grid-row: 1/6;
background-color: rgb(245, 83, 83);
}
grid-area
: 각 영역에 템플릿 이름을 지정
컨테이너 영역의 grid-template-areas 속성으로 작성하여 배치를 해줌
➡️ 각 영역에 어떻게 배치할 지정
/* 한 줄에 들어갈 영역을 따옴표로 묶음. 구분은 띄어쓰기 */
grid-template-areas :
"box1 box1 box1"
"box2 box3 box3"
/* 비워 둘 영역은 마침표(.)을 넣음 */
grid-template-areas:
"box1 box1 box1"
"box2. . box3"
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅(금)
'직업훈련 > 새싹(SeSAC)' 카테고리의 다른 글
| [새싹(SeSAC) 프론트엔드] day11 221031 수업 복습 (0) | 2022.10.31 |
|---|---|
| [새싹(SeSAC) 프론트엔드] 2주차 회고 (0) | 2022.10.28 |
| [새싹(SeSAC) 프론트엔드] day09 221027 수업 복습 (0) | 2022.10.27 |
| [새싹(SeSAC) 프론트엔드] day08 221026 수업 복습 (0) | 2022.10.26 |
| [새싹(SeSAC) 프론트엔드] day07 221025 수업 복습 (0) | 2022.10.25 |
