728x90
반응형
position: 요소가 배치되는 방식
static 기본값, 흐름대로 배치
relative: 기본위치에서 위치 이동가능 top left right bottom
fixed: 사용자의 브라우저 기준 절대 좌표를 사용하여 위치 고정
sticky: 평소엔 기본 위치에 위치하고 있다가 스크롤바를 내렸을 때 위치를 고정한다. top left right bottom 으로 위치를 설정해둬야 작동한다
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr; 한줄에 들어가는 갯수
/* fraction */
grid-template-rows: 100px 100px 100px; 크기
}
#a{
grid-column:1/3; 위치
}
#b{
grid-row: 1/3;
grid-column: 3;
}
#c{grid-column: 2/4;
grid-row: 3;
}
#d{
grid-row: 2/4;
}
그리드
- color : 색상 - text-align (center / left / right / justify) : 정렬 - text-decoration (none / underline / overline / line-through) : 꾸미기 - text-indent : (문단) 들여쓰기 - letter-spacing : 글자 간격 - line-height : 행 간격 - word-spacing : 단어(띄어쓰기 기준) 간격 - white-space : 내용이 긴 경우 줄바꿈 설정
img {
width: 300px;
}
@media (min-width:701px) {
img{width: 500px;}
}
@media (min-width:750px) {
img{width: 600px;}
}
@media print {
body{
font-size: 3rem;
}
console.log() (dir / info / warn / error)
warn 은 경고창 같은 정보를 담고자 색깔이 있다.
let score = 90.5;
console.log(Number(score));
console.log(parseInt(score));
let height = '177.3';
console.log(Number(height));
console.log(parseInt(height));
let bool = true;
console.log(Number(bool));
console.log(parseInt(bool));
형변환
type of 변수명 : 자료
728x90
반응형
