푸으름

✏️ 그리드 레이아웃(Grid Layout)반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용하게 됨. 그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말하며 화면을 규칙적으로 배열하므로 레이아웃을 일정하게 유지 ✏️ 그리드 레이아웃의 특성시각적으로 안정된 디자인을 만들 수 있음업데이트가 편한 웹 디자인을 구성 가능요소를 자유롭게 배치할 수 있음✏️ 플렉서블 박스 레이아웃(flexible box layout)그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것. 여유 공간이 생길 경우 너비와 높이를 적..

✏️ 미디어 쿼리(Media Queries)사이트에 접속하는 장치에 따라서 특정한 CSS 스타일을 사용하는 방법 미디어 쿼리를 사용함으로써 접속하는 기기의 화면 크기에 따라서 레이아웃이 달라짐 / 즉, 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 뜻함 ✏️ 미디어 쿼리 구문@media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정사이에 사용하며 대소문자 구분x, 미디어 유형을 지정해야 하며 and 연산자로 조건 적용기본형 => @media [only | not ] 미디어 유형 [and 조건] * [and 조건]only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음not : not 다음에 지정하는 미..

✏️ 반응형 웹 디자인웹 요소를 화면의 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어서 사이트를 구현하는 것 ✏️ 뷰포트(ViewPort)반응형 웹 디자인에서 기본적으로 알아둬야 할 개념 / PC에 맞게 제작한 웹 사이트를 모바일 기기에서 접속해서 보면 모든 내용이 작게 보이는데 이는 PC화면과 모바일 화면에서 표시되는 픽셀의 차이 때문에서 발생함. 여기서 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있음. 즉, 뷰포트는 스마트론 화면에서 실제 내용이 표시되는 영역 #1 뷰포트 지정뷰포트는 스타일 태그처럼 태그를 이용해 태그 사이에 작성기본형  =>  종류설명사용 가능한 값기본값width뷰포트 너비device-with 또는 크기브라우저 기본값height뷰포트 높이..

✏️ 변형 함수translate() 함수: 요소 이동하기transform: translate(tx,ty)지정한 크기만큼 x축과 y축으로 이동transform: translate(tx,ty,tz)지정한 크기만큼 x축과 y축, z축으로 이동transform: translateX(tx)지정한 크기만큼 x축으로 이동transform: translateY(ty)지정한 크기만큼 y축으로 이동transform: translateZ(tz)지정한 크기만큼 z츅으로 이동scale() 함수: 요소 확대 및 축소하기transform: scale(sx,xy)지정한 크기만큼 x축, y축으로 확대 및 축소transform: scale3d(sx,xy,sz)지정한 크기만큼 x축, y축, z축으로 확대 및 축소transform: sca..