~오늘은 11일차~
- 목차
1. Grid
2. Position
3. Media Query
+ 복기일기
1. Grid
- 격자 (바둑판과 같은) 형태로 요소들을 배치
(1) Grid 속성
.grid-container {
display: grid;
grid-template-columns: repeat(2, 100px 50px);
grid-template-rows: repeat(3, 100px);
padding: 10px;
gap: 10px;
① gap : 간격을 정의하는 속성, gap: (row-gap) (column-gap);으로도 가능
② grid-template-columns / grid-template-rows : 각각 열, 행의 크기 및 개수를 정의
③ repeat : repeat(반복횟수, 반복하고자 하는 크기);
④ 1fr : fraction 1fr은 사용 가능한 공간에 대한 비율
/* auto-fill, minmax */ grid-template-columns: repeat(auto-fill, minmax(50px, auto));
- auto-fill : 개수를 정하지 않고, 가로 행에 채울 수 있는 만큼 요소를 채워준다.
- minmax : 최소크기 설정
minmax(최소크기, 최대크기)/* auto-fit */ grid-template-columns: repeat(auto-fit, minmax(50px, auto));
- auto-fit : 가로 행에 채울 수 있는 만큼 요소를 채우는데, 그후에도 공간이 남으면 아예 해당 공간을 꽉 채운다.
(2) Grid 영역 지정
① 컨테이너가 아닌 item에 부여해서 영역 지정
- grid-column-start / grid-column-end
- grid-row-start / grid-row-end
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
/* 다음과 같이 간소화 할 수 있다 */
.item {
grid-column:1 / 3;
}
/*열의 1번째 줄부터 3번째 줄까지 item1로 부여*/(3) 간단하게 그리드 정의하기
① grid-auto-rows / grid-auto-columns : 요소의 개수만큼 자동으로 행이나 열의 개수가 지정
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-auto-rows: 100px;
padding: 10px;
border: solid 1px black;
gap: 10px;
}② Grid-Template-Areas : 직관적으로 레이아웃 정의
- grid-area: Grid-Template-Areas에서 설정한 명칭을 item에 부여
case 1. html에 style을 직접 지정
<!--html 파일--> <body> <div class="grid-container"> <div class="box" style="grid-area: header"></div> <div class="box" style="grid-area: main"></div> <div class="box" style="grid-area: footer"></div> </div> </body>/*css 파일*/ .grid-container { display: grid; grid-template-areas: "header header header" ". main ." "footer footer footer"; } .box { height: 100px; background-color: bisque; border: solid 1px black; }
case 2. css에서 지정
.grid-container { display: grid; grid-template-areas: "header header header" ". main ." "footer footer footer"; } .item1 { grid-area: header; }
2. Position
- 요소를 어떻게 위치시킬지를 정의
① static : 기본값. 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
② relative : 자기 자신을 기준으로 배치. (원래 위치를 기준으로 좌표 지정)
③ absolute : 부모 요소를 기준으로 배치. 다른 요소들과의 관계를 고려하지 않고, 화면 전체의 맥락에서 요소를 배치
④ fixed : 스크롤과 상관없이 항상 최 좌측 상단을 기준으로 좌표 고정 (스크롤을 내리면 같이 움직임)
⑤ sticky : position: sticky가 있는 요소 사용자의 스크롤 위치를 기준으로 배치 (스크롤을 내리다 만나면 고정)
3. Media Query
- @media
- 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나
- 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기(화면 크기)마다 전환할 수 있다.
(1) 기본 문법
@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}① only 또는 not
- only : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드
- not : not 다음에 따라오는 조건을 부정하는 키워드.
not print일 경우 print를 제외한 모든 미디어 유형에 적용
② 미디어 유형 : 적용할 미디어 유형을 작성, 생략이 가능 (all처럼 모든 미디어에서 작동)
- all : 모든 장치
- print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
- screen : 컴퓨터 화면 장치 또는 스마트 기기의 화면
- speech : 음성 합성 장치
참고
사용하지 않는 미디어 유형
CSS2.1과 Media Queries 3 모듈은 여러가지 추가 유형(tty, tv, projection, handheld, braille, embossed, aural)을 정의했으나 Media Queries 4에서 제거됐으므로 사용해선 안됩니다. aural은 유사한 유형인 speech로 대체됐습니다.
③ and 또는 ,
- and : 앞뒤 조건문이 모두 사실일 때 뒤에 따라오는 것 해석
- "," : 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것 해석
@media A and B {실행문}
@media A , B {실행문}③ 조건문
- 조건이 사실일 때 뒤 따라오는 것 실행
- and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략도 가능
@media (min-width:400px) {실행문}
@media (min-width:400px) and (max-width:600px) {실행문}+ 복기일기
오늘의 복기를 시작해보자.
필기하느라 놓친 내용이 있었는지 글을 작성하며 새로 보이는 내용도 있었고,
강사님의 강의 자료 뿐 아니라 다른 자료들을 찾아보니 강의 자료와 다른 내용도 있었다.
강사님의 주신 강의 자료가 있어도 충분히 활용해야 온전히 내 것이 되는 것 같다.
오늘은 그룹스터디에서 목표로 정한 코딩테스트 강의를 들었는데, 아직 정규 커리큘럼에서는 배우지 못한 부분들이 들어가 있어서인지 정말 어렵기만 해서 당혹스러웠다.
문제를 아무리 들여다봐도 어떻게 나눠야할지 감이 안잡혔는데 강의 내용을 몇번 보다보니 어느정도 형식이 있다는 걸 알게 됐다.
그리고 다른 사람들이 맞춘 정답을 보면 강사님과 또 다른 방식으로 진행하고, 나에겐 처음보는 형식이 보여서 한참을 구글링해보기도 했지만 정확히 이해가 되지는 않아 답답했다.
다른 사람이 쓴 코드가 훨씬 짧았지만 이게 무슨 의미이고 또 그게 정말 현재도 사용되는건지 등등... 궁금했지만 블로그들을 찾아봐도 기술해놓는 블로그는 없어 궁금함만 더해지고 그쳤다.
하나로 오래 시간을 끄는 것도 좋지 않다고 생각해서 그정도에서 그쳤는데 아무래도 다른 강의나 유투브를 찾아봐야 할 것 같다.
글이 잘 정리되어 있네요. 감사합니다.