FrontEnd 이상혁

내가 flex를 공부할때 같이 grid를 들었다 그때는 grid를 안쓸줄 알고 그냥 아 grid라는게 존재하는 구나~~ 하며 넘어갔다 그러나 이번에 반응형을 공부하면서 미디어쿼리와 grid가 같이 쓰이면서공부하게 되었다Grid(그리드)display: grid; 그리드 레이아웃은 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성이다. 이때 2차원 방식이란, 가로와 세로를 같이 사용해 레이아웃을 설계하는 방식이다.빨간색 선 - column세로를 의미한다초록색 선 - row가로를 의미한다안쪽에 회색선 - grid cellrow와 column이 만나서 이루는 하나의 공간배경이 하늘색인 도형 - grid itemgrid cell안에 표현되는 요소바깥의 검은 선 -  grid containerdisplay:..

프론트엔드에는 웹퍼블리싱에 쓰이는 반응형 웹이라는게 있다반응형이란 사용자가 접속하는 기기의 화면 크기와 해상도에 맞게 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되는 웹 디자인 방식을 말합니다 오늘은 반응형을 할 수 있게 만드는 2가지중 하나인 미디어 쿼리에 대해 알아보자미디어 쿼리(Media Queries)미디어 쿼리는 CSS3에 추가된 기능으로 주로 반응형 웹에 쓰입니다 css의 if문으로 이해하면 쉽습니다@media (조건){ /*조건이 참일때*/} 먼저 @media로 시작합니다 그후에 조건을 적고 안에 우리가 원하는 내용을 넣으면 됩니다정말 간단하지요? 이제 조건을 알아봅시다1. 너비와 높이width / height: 뷰포트(Viewport)의 너비 또는 높이를 기준으로 조건을 설정합니다.min-..

우리는 평소 살아가면서 다양한 웹을 들어간다.유트브라던지, 구글, 네이버등등등하지만 우리은 웹에 접속할때 한가지의 기기로만 들어가지 않는다핸드폰, 태블릿 PC, 노트북, 컴퓨터, 심지어 TV까지정말 다양한 크기와 형태의 기기로 접속을 한다. 여기서 궁금증이 생긴다 '우리가 접속하는 모든 웹은 핸드폰용, 노트북용, 컴퓨터용으로 나뉘어져 있을까?''어떻게 형태도 크기도 제각각인데 알맞은 크기로 조절이 되는거지?' 이러한 궁금증을 해소 하려면 우리는 먼저 반응형에 대하여 알아볼 필요가 있다반응형사용자가 접속하는 기기의 화면 크기와 해상도에 맞게 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되는 웹 디자인 방식을 말한다. 이를 통해 동일한 웹사이트가 노트북, 태블릿, 스마트폰 등 다양한 기기에서 일관된 사용자 경..