[23.09.19] 36일차
<<진도>>
Front-end
[CSS]
- quiz 풀이
- 미디어 쿼리
- 반응형 웹 실습
- Grid
<<오늘의 팁>>
- font-family 시 두 단어 이상으로 이루어진 폰트는 ‘’따옴표로 묶어줘야한다.
- 단위 : vw = viewport width
: vh = viewport height
- grid-template 시 분수 형태 표기 축약 repeat
/* 균등하게 분수 형태 1/n =>
1fr(fraction)로 표기 */
/* grid-template-columns: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);
- [box-shadow] 속성 순서대로
offset-x | offset-y | blur-radius | spread-radius | color
: offset-x/y – x/y축으로부터 떨어진 정도
: blur-radius – 흐림정도
: spread-radius – 퍼짐정도 (+ 확산 / - 응축)
: color – 컬러
- 일반 span을 불릿있는 리스트형태로 변환
display: list-item;
list-style-position: inside; : 불릿 안으로 들여쓰기
- featherlight : js(자바스크립트) 기반 플러그인 url 이동없이 화면팝업 화면끄기 기능有
* responsiv-ex01
가로가 길 때, 세로가 길 때 스타일 적용
1 . 세로가 긴 형태
@media screen and (orientation: portrait)
2 . 가로가 긴 형태
@media screen and (orientation: landscape)
* reponsiv-ex02
** viewport 뷰포트
<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 디스플레이 장치에서 실제 사용자가 보는 영역
: viewport가 없으면 실제 사용자가 볼 때 잘리는 영역이 발생할 수 있다.
initial-scale=1.0 (기본) : 사용자에게 렌더링되어 처음으로 보여지는 크기 (1배-작업한 사이즈 그대로)
CSS 실습자료 기반
reponse.css
(760px)
/* ========== 760px 이하 ========== */
/* == medium size : desktop view == */
@media screen and (max-width: 760px) {
#wrap {
width: auto;
}
#container #content {
width: 63%;
}
#container #aside {
width: 37%;
}
#footer .btm_menu,
#footer .copy {
float: none;
text-align: center;
margin-bottom: 10px;
}
}
(480px)
/* ========== 480px 이하 ========== */
/* === small size : mobile view === */
@media screen and (max-width: 480px) {
#header {
background-image: none !important;
padding-bottom: 0px;
/* header높이 지정을 해주면 아래 container가 위로 와버림 */
/* height: 50px; */
}
#header .logo {
position: static;
text-align: center;
}
#header .lnb {
position: static;
}
#header .lnb li {
float: none;
}
#header .lnb li a {
/* mm1~4 까지쓴 기존 이미지 넣은게 우선순위가 높아서 !important */
width: 100% !important;
height: 40px;
line-height: 40px;
background-image: none !important;
text-indent: 0;
font: bold 18px/40px sans-serif;
background-color: #eee;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border-bottom: 1px solid #ccc;
color: black;
}
#header .lnb li a:hover {
color: #fff;
background-color: #c0c0c0;
}
#header .lnb li a.on {
color: #fff;
background-color: #808080;
}
#container #content {
float: none;
width: 100%;
border-bottom: 1px solid #ccc;
}
#container #aside {
float: none;
width: 100%;
}
}
** Grid
layout과 관련된 속성
전체 – container
하나하나의 – item
격자 형태 (행 rows과 열 columns)
흰 부분 cell에 item이 들어온다
* cell과 cell사이의 간격 gap
- gap(short hand) column, row 둘 다 포함 가능
*Grid Lines
각 track(한줄 쭉) 사이에 line도 순서가 존재한다
* grid-ex01
<head>
<style>
.grid-container {
background-color: #2196F3;
padding: 10px;
/* ====== Grid ====== */
/* 그리드 설정 */
display: grid;
/* column-gap: 50px; */
/* row-gap: 10px; */
/* gap: 10px; */
/* 그리드 컬럼 지정 */
grid-template-columns: auto auto auto;
/* auto = 나머지 열의 너비를 모두 균등하게 */
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
* gird-ex02
그리드 아이템 합치기 (item에서 적용하는 속성**)
<body>
<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>
</div>
</body>
[item1] line 1 ~ line3까지
.grid-item1 {
/* 아이템 합치기 */
grid-column-start: 1;
grid-column-end: 3;
}
[item2] 2~4 합치기
.grid-item2 {
grid-column-start: 2;
grid-column-end: 4;
}
+ ) shorthand
/* shorthand */
grid-column: 2 / 4;
/* 라인 2~4 합치기 */
grid-column: 2 / span 2 ;
/* 라인 2 부터 2개 합치기 */
*grid-ex03
container에서 적용하는 속성**
기본적으로 item은 cell의 왼쪽 위에 위치
***-content 정렬
* 가로 정렬 *
justify-content: x;
- space-evenly : 모든 사이 여백 균등하게
- space-around : 사이 여백 균등하게 (좌,우 여백은 둘이 합쳐 사이여백간격)
- space-between : 사이 여백 균등하게 (좌우 여백없이 꽉차게)
- start / end : 처음과 끝에 딱 붙게
- center : 가운데 오게
* 세로 정렬 *
align-content: x;
- space-evenly : 모든 사이 여백 균등하게
- space-around : 사이 여백 균등하게 (상,하 여백은 둘이 합쳐 사이여백간격)
- space-between : 사이 여백 균등하게 (상,하 여백 없게)
- start / end / center : 처음 끝 중간
*grid-ex04
***-items 정렬
: 셀 안에서 item이 움직이는 정렬 (기본은 왼쪽 위)
* 가로 정렬 *
justify-items: start / end / center (left/ right)
* 세로 정렬 *
align-items: start / end / center
ex)
justify-items: center;
align-items: center;
