[새싹x코딩온] 웹 퍼블리싱 과정 3주차 - 2 | CSS - grid, JS - 데이터 종류, 형 변환
그리드 (Grid)
- 페이지의 레이아웃을 만들 때 사용
- flex가 한 방향에 대해서 정렬을 했다면 grid는 여러 방향에 대해서도 정렬
- flex와 마찬가지로 container속성과 item속성이 각각 존재한다.
- 주축 개념이 없기 때문에 justify는 가로축이고 align은 세로축이다.
Container 속성
grid-template-rows / grid-template-columns
- 각 아이템 행과 열의 크기를 설정
- 하나의 단위가 아닌 여러 단위를 섞어서 사용 가능
- 새로운 단위 fr (fraction, 공간 비율)
- repeat() 함수와 같이 사용 가능
grid-template-rows: repeat(5, 100px)
grid-template-rows: 100px 100px 100px 100px 100px
# 위의 두 줄은 같은 의미
minmax (최소 크기, 최대 크기)
- 브라우저 크기가 변하면 최고 크기와 최대 크기를 확보할 수 있도록 하는 함수
- 크기에는 px, % 등 다양한 단위를 쓸 수 있음
- 크기 대신 auto라는 키워드
- minmax(100px, auto) → 브라우저 크기가 줄어들어도 100px은 확보하고 최대 크기는 알아서 늘어나도록
row-gap / column-gap / gap
- row-gap : 행간 간격
- column-gap : 열간 간격
- gap : 행과 열 간격 모두 설정 가능
align-content
- items의 세로 정렬
- stretch (기본값)
- center
- end
- start
- space-between, space-around, space-evenly
justify-content
- items의 가로 정렬
- stretch (기본값)
- center
- end
- start
- space-between, space-around, space-evenly
place-content
- align-content와 justify-content의 단축 속성
- align-content와 justify-content의 순서로 작성한다.
- 만약 같은 속성값을 적용하고 싶다면 하나의 속성만 쓰면 두 속성에 모두 적용됨
align-items
- items의 세로축 정렬
- stretch (기본값)
- center
- end
- start
justify-items
- items의 가로축 정렬
- stretch (기본값)
- center
- end
- start
place-items
- align-items와 justify-items의 단축 속성
- align-items와 justify-items의 순서로 작성한다.
- 만약 같은 속성값을 적용하고 싶다면 하나의 속성만 쓰면 두 속성에 모두 적용됨
Item 속성
grid-row-start / grid-row-end
- 단축 속성 grid-row 시작점 / 끝점
- 시작점과 끝점은 그리드 라인을 의미, 시작라인부터 끝 라인까지 크기 할당됨
grid-row-start: 1; grid-row-end: 4;
grid-row: 1 / 4;
grid-row: 1 / span 3;
# 위 세 줄의 속성은 동일
grid-column-start / grid-column-end
- 단축 속성 grid-column (시작 / 끝)
- 사용 방법은 grid-row와 동일
align-self / justify-self
- item 한 개에 대한 정렬 속성
- 아이템의 전체 크기(그리드 셀)를 기준으로 아이템을 각각 세로, 가로축에 대한 정렬
place-self
- align-self와 justify-self의 단축 속성
z-index
- 요소가 겹쳤을 때 튀어나오도록 한다.
- 일반적으로 쓰이는(position과 함께 쓰이는) z-index 속성과 같다.
- 일반적으로 static 요소에는 z-index를 적용시킬 수 없지만 grid item에선 position 속성이 없어도 z-index가 적용된다.
컨테이너 속성 grid-template-areas와 아이템 속성 grid-area
- 설정한 이름에 따라서 요소를 배치할 수 있다.
html
<div class="container">
<div class="item item1">header</div>
<div class="item item2">aside1</div>
<div class="item item3">section1</div>
<div class="item item4">asdie2</div>
<div class="item item5">section2</div>
<div class="item item6">section3</div>
<div class="item item7">footer</div>
</div>
css
.container { # 부모요소
display: grid;
grid-template-areas:
"header header header header"
"aside1 section1 section1 aside2"
"aside1 section2 section3 aside2"
"footer footer footer footer";
# 이름 별로 영역을 지정한다.
}
.item1 { # 자식요소
grid-area: header; # 이름을 설정한다.
}
.item2 {
grid-area: aside1;
}
.item3 {
grid-area: section1;
}
.item4 {
grid-area: aside2;
}
.item5 {
grid-area: section2;
}
.item6 {
grid-area: section3;
}
.item7 {
grid-area: footer;
}
Java Script
js는 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어다.
내장 방식
- <script></script> 사이에 삽입하는 방식
- 간단하게 만들 수 있다.
- 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현이 가능하다.
- 위치는 어디서나 사용 가능하다.
<script>
alert("hello JS world);
</script>
링크 방식
- js 파일을 따로 만들어서 링크하는 방식(css 처럼)
- js 코드의 양이 많아지면 파일로 관리할 수 있는 링크 방식이 편하다.
- 같은 기능을 다른 페이지에서 사용하고 싶을 때는 js 파일 링크만 걸어서 사용 가능하다.
- 유지 보수 용이성이 편리하다.
- 위치는 어디서나 사용 가능하다.
<script src="./index.js"></script>
표기법
- dash-case (kebab-case)
- snake_case
- camelCase
- PascalCase
데이터 종류 (자료형)
- String - 문자열
- Number - 숫자
- Boolean - 참, 거짓 데이터
- undefined - 미할당 데이터
- Null - 빈 데이터
- Array - 배열
- Object - 데이터 꾸러미
typeof
- 해당 자료형이 어떤 것인지 알려준다.
console.log(typeof "안녕하세요"); # string
console.log(typeof 2); # number
console.log(typeof null); # object
형 변환
자동 형 변환
- 처음에는 편할 수 있지만 프로그램이 커진다면 큰 문제를 일으키게 된다.
명시적 형 변환
- 자동 형 변환에 의존하지 않고 개발자가 직접 형 변환을 시키는 것이다.
- 문자로 변환 → String()
- 숫자로 변환 → Number()