미디어 쿼리는 CSS 코드이며 이를 CSS 파일에 추가하는 방법은 다음과 같다.

@media(min width or max-width: 1200px) {
p{
font-size: 2rem;
}
}

위와 같은 코드를 입력하면 해당 코드가 브라우저에 미디어 쿼리가 존재한다는 것을 알린다.

위의 예시에서 적용된 픽셀값은 장치의 넓이를 의미하며, 미디어 쿼리가 실행될 화면의 넓이이다.

이 때, 픽셀(px) 대신에 em과 rem같은 유닛도 사용 가능하다.

이는 미디어 유형에 대한 정보를 수집하거나 query(질문)해서 사용자가 웹사이트를 이용할 때, 사용하는 장치의 유형과 사양 정보를 수집하며 장치의 유형이 어떤 기준에 부합하면 미디어 쿼리 안에 정의했던 코드가 실행된다.

미디어 쿼리 코드의 한계점 설정에서 도움이 될만한 픽셀 정보

Smartphone 480px
Tablet 768px
Notebook 1024px
Desktop Computer 1200px
TV >1200px

위와 같은 기준은 절대적인 기준이 아닌 참고용이다.

각 요소와 CSS 모두 박스에 둘러 쌓여 있으며 이는상호작용한다.

콘텐츠(Contents)

‘패딩(padding)’이라는 박스 테두리 사이의 공간으로 감싸져 있으며 이 또한 크기 설정이 가능하다.

여백(margrin)

여백은 콘텐츠를 표시하는 방식이기 때문에 실제 요소와는 관련이 없다. 다른 요소와 관련된 공간의 여백을 부여한다.

경계(Border)

‘border’의 속성은 세 가지 주요 정의가 있으며

첫 번째로는 테두리의 넓이가 있다.

얇은 테두리를 지정하고 싶다면

{
border: 1px;
}

로 가능하다.

두 번째로는 테두리 유형이며 이는 ‘dashed’라는 점선 테두리와‘solid’라는 실선 테두리가 있다.

세 번째로는 테두리의 색상을 지정할 수 있으며 색상값을 입력한다.

 이를 HTML과 CSS 내부에서 표현하면

• HTML

<p>The Box Model</p>

• CSS

p{
	padding: 2px 4px 2px 4px;
	border: 2px dashed black;
	margin: 8px 6px;
}

와 같이 표현이 가능하며, 이에 대해 설명하자면

‘padding’의 숫자 4개는 각각 상부, 우측, 하부, 좌측에 대한 설정값이며

‘border’는 각각 경계의 크기, 테두리 유형, 색깔에 대한 설정값이고

‘margin’은 각각 요소의 상부와 하부, 좌측과 우측의 여백값을 의미한다.

CSS 그리드(CSS Grid)

CSS 그리드는 CSS에서 2차원적인 열과 행을 통제하는 레이아웃을 만들 때 사용하며 이는 플렉스박스의 핵심이론을 따른다.

display: grid

‘display: grid;’ 입력 시, 개발도구에서 ‘grid’ 옵션이 활성화 된 것을 볼 수 있으며 행과 열을 세는 숫자들이 레이아웃으로 나타난다.

예를 들어,

main ul {
display: grid;
}

와 같이 나타낼 수 있다.

gird-template-columns

‘gird-template-columns’ 입력 시, 그리드 안에 있는 구체적인 열의 수를 사전 정의할 수 있게 한다.

(’gird-tamplaate-columns: 400px 400px;’ 입력 시, 두 개의 열이 400px로 나타난다.)

그러나, 보편적으로 CSS 그리드를 이용할 때에는 ‘픽셀(px)’이 아닌 ‘프랙션(fractions)’을 이용하며 이는 특정 열에 적용해줄 그리드 내에 사용 가능한 영역의 공간을 정한다.

예를 들어, 

main ul {
  display: grid;
	gird-tembpate-columns: 2fr 1fr;
	}
	  

와 같이 나타낼 수 있으며, 이는 전체 넓이가 3fr이고 3fr의 넓이 중 첫번 째 열이 2fr, 두번째 열이 1fr의 공간을 차지한다는 것을 나타낸다.

gap

맨 앞 행과 맨 앞 열의 틈을 정하는 명령어이며

예를 들면

main ul {
  display: grid;
	gird-tembpate-columns: 2fr 1fr;
	gap: 100px 200px;
	}
	  

와 같이 나타날 수 있으며, 100px만큼의 행이 벌어지고 200px만큼의 열이 벌어지게 된다.

li:nth-of-type

그리드 컨테이너 안에 해당하는 번호를 지정하는 명령어이며

예를 들면,

li:nth-of-type(3) {
	}

와 같이 나타난다.

(’li:nth-of-type(3))’ 입력 시, 3번째에 해당하는 목록이 지정된다.)

grid-column

요소가 차지하는 열의 수를 지정하는 명령어이다.

예를 들면,

li:nth-of-type(3) {
	grid-column: 1 / span 2;
	}

와 같이 나타나고 해당 목록이 차지하는 열에서부터 2개의 요소에 해당하는 공간을 차지한다.