학습 한 내용

덴마크 쇼핑몰을 만드는 기본 레이아웃에 대한 내용을 학습했는데 상당히 복잡해 보였지만 생각보다 이해하기 쉽고 할 만 했다. 물론 x축 정렬 y축 정렬 position의 2차원특성 3차원특성을 다 고려하여 생각 해야하지만 레이아웃 자체는 이젠 생각보다 이해가 잘되는 편이다.

상단의 고정되는 글자를 header 코드로 지정을 하고 브라우저를 줄였을때 레이아웃들은 변화가 있지만 header 코드는 고정하기 위해 position: fixed; 를 사용했다 그리고 @media를 사용하여 모바일 버전 태블릿 버전 PC 버전을 만들었는데 대부분 모바일 버전부터 만들고 점점 태블릿 > PC 버전으로 확장해가는 방식을 많이 사용하기에
@media (min-width: 768px)
@media (min-width: 1024px)
and (max-width) 를 사용하지 않고 min-width만을 사용한다 즉 max를 적용시키지 않았지만 자동으로
이 둘 media 속성은 max-width 1024 미만이라는 특징을 가지고 있다. 덴마크 쇼핑몰 자체가 모바일 버전부터 만들어 이와 같은 특징을 가지고 있다.

이미지 파일 6개와 h2 코드 6개로 이루어진 코드를 작성하고 브라우저 화면을 점점 줄여나갈 때 레이아웃 배치에 대한 학습을 했는데 display: flex; 로 x축 정렬을 하고 flex-wrap: wrap; 을 사용하여 공간이 부족할 때 자동으로 y축으로 내려가는 걸 사용하고 justify-content: space-between;을 사용하여 각 이미지 파일에 공백을 넣어 줬다. 점점 레이아웃에 대한 이해가 높아지고 자유롭게 사용이 가능 하면서 너무 재밌어졌다. 저번시간에도 배웠었지만 다시한번 깨달은건 :nth-child(1) 이다. 자식을 일일이 선택할 때 괄호 안에 숫자를 적어 선택이 가능하고 이 속성으로 인해

이 처럼 자식을 지정후 margin-bottom: 10px; 값을 주어 539px 이하로 브라우저를 줄였을 경우 4번째 5번째 자식에 저절로 마진바텀 값을 주어 공간을 생성하여 어색하지 않게 가능했다.

레이아웃은 변화가 눈에 잘 보이기에 재미있게 학습했다

학습 후 소감

레이아웃 학습을 많은 기간동안 하고있지만 당연한 소리지만 처음과 달리 보이는것도 쉽게 보이고 강의를 끄고 직접 처음부터 작성했을 때두 많은 무리 없이 진행하는 걸 보아 작지만 기분좋은 내공을 쌓은거 같다 늘 재미있께 강의 해주시는 김인권 강사님과 항상 뒤에서 서포트 해주시는 대구 AI 스쿨 관리자님들 모두 감사드립니다