베이스캠프 10일차_22년 12월 23일

학습언어

CSS

학습내용

flex와 grid의 차이점

flex

• 비교적 작은 단위의 레이아웃 구성에 적합
• 작엽 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합
• flex는 1차원적인 구조 를 가지고 있습니다.

 

grid

• 큰 규모의 레이아웃 구성에 적합
• 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음
• 최신 기술이기때문에 모든 부라우저에서 지원하지 않는다는 단점이 있음

grid의 속성값

• display: grid를 이용해 grid가 적용된 요소는 다음과 같은 구조로 변경됩니다.
• grid-container : grid가 적용된 요소
  grid-item : grid가 적용된 요소의 자식 요소들
  **grid-line** : grid-item 사이의 경계를 의미합니다.
  grid-number : 해당 grid-line이 몇번째 line인지를 의미합니다.

• grid-template : grid의 행&열의 개수 및 크기를 지정할 수 있습니다.
•  

grid-template-rows : 1fr 2fr 200px
grid-template-columns : 1fr 2fr 200px

repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미가 됩니다.

grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr 1fr 1fr;

위와 같은 형태로 사용이 가능하며, row는 행의 템플릿을, columns는 열의 템플릿을 지정합니다.

• grid-column & grid-row : grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성입니다.

grid-column: 1 / 4;
grid-row: 2 / 3;

반응형 웹이란?

반응형 웹이란, 다양한 디바이스에서 접속했을 때
기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다.

 

미디어 쿼리 (@media screen and() {})

미디어 쿼리란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다.
이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.

@media screen and (max-width: 500px) {
	/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}

• @media : 미디어 쿼리를 사용한다는 의미입니다.
• screen : 미디어 타입입니다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다는 의미입니다.
• max-width: 500px : viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다는 의미입니다.
• and : screen, max-width 등 여러가지 미디어 쿼리 조건을 연결시켜 줄 수 있습니다. and로 연결한 모든 조건을 만족하는 경우에 해당 스타일 시트를 적용합니다.

breakPoint란?

breakPoint란 반응형 웹페이지의 작업 기준이 되는 중단점을 의미합니다.
간단하게 말해서, PC / Tablet / Mobile의 기준이 되는 규격 분기입니다.

가장 일반적으로 사용되는 breakPoint 분기

Mobile0 ~ 767px

Tablet	768px ~ 1023px
PC	1024px ~ 1439px
PC Large	1440px ~

상황에 따라 더 자세하게 나눌 수 있으며, 많이 나눌수록 더 좋은 서비스를 만들 수 있습니다.
그러나 개발 시간과 인건비가 증가하게 되므로 기획 단계에서 예산과 기간을 고려할 수 있습니다.

@media screen and (max-width: 767px) {
 /* mobile */
}

@media screen and (min-width: 768px) and (max-width:1023px) {
 /* tablet */
}

@media screen and (min-width: 1024px) and (max-width:1439px) {
/* PC */
}

반응형 웹에 자주 쓰이는 속성

max-width / max-height

요소의 최대 크기를 지정하는 속성입니다.
max-width을 사용하면 가로 규격을, max-height를 사용하면 세로 규격을 한정할 수 있습니다.

max-width : 1240px;
max-height : 100vh;

min-width / min-height

요소의 최소 크기를 지정하는 속성입니다.
min-width을 사용하면 가로 규격을, min-height를 사용하면 세로 규격을 한정할 수 있습니다.

min-width : 720px;
min-height : 30%;

max()

소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.

height : max(320px, 20%)

min()

소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수입니다.
소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있습니다.

width : min(1240px, 100%)

소감

오늘 CSS까지 베이스캠프 2주차가 마무리 되었습니다.
아직 스스로 많은 페이지를 만들어 보지 못하였지만, 페이지를 구상할때 무엇을 우선적으로 생각해야 하는지 생각하게 되는 것 같습니다. 아직은 생각한 그대로 구현이 되지 않지만...포기하지 않고 조금씩 성장할 수 있게 노력하겠습니다.