doeunn.log

▶반응형 웹과 미디어 쿼리 우리가 웹을 통해 네이버의 모습은 PC 화면으로 보았을 때와 모바일 화면으로 보았을 때는 다릅니다. 이는 반응형 웹을 이용한 모습입니다. 이번 글에서는 반응형 웹을 통해 모바일에서의 화면과 PC에서의 화면을 서로 다른 웹 서비스를 보여줄 겁니다. ▷반응형 웹 반응형 웹은 다양한 화면 크기의 디바이스(PC, 모바일, 태블릿 등)에서 웹 서비스를 제대로 보여주기 위한 기술 또는 개념입니다. 반응형 웹의 일반적인 조건은 다음과 같습니다. 데스크탑, 태블릿, 모바일에 대해 각각의 기기에서 문제없이 동작해야 한다. 사용자가 서로 다른 기기(다양한 크기의 화면)에서 접속시 즉시 반응하여 화면의 내용을 보여주어야 한다. ▷뷰포트(viewport) 뷰포트란 일반적으로 모바일 기기에 적용하기 ..

▶플렉시블 컨테이너와 아이템 ▷플렉시블 박스(Flexible Box) Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나입니다. ▷Flex의 개념 container : Items를 감싸는 부모 요소 박스를 의미 Items : 각 요소를 의미하며, 반드시 container의 자식으로 존재 ▷Flex Container 요소의 속성 참고로 컨테이너에 flex 속성을 주어야 합니다. .container { display: flex; width: 400px; } ① display : 컨테이너를 수직/수평 방향으로 정렬 프로퍼티값 설명 flex Block 특성으로 컨테이너가 수직 방향 정렬 inline-block Inline 특성으로 컨테이너가 수평 방..

▶CSS 애니메이션 CSS 애니메이션을 통해 엘리먼트 즉 컨텐츠들을 키프레임을 통해 다양한 움직임을 줄 수 있습니다. 애니메이션의 대표적인 속성 5가지는 다음과 같습니다. transform : 트랜스폼은 요소 이동, 크기 변경, 위치, 색상 등 속성 변경 동작을 수행 transition : 트랜지션은 시간 경과에 따라 하나의 속성 상태가 다른 속성 상태로 변형 @keyframes : 키프레임 애니메이션을 만들 수 있도록 해주는 블록 키워드 animation : 키프레임 애니메이션 실행을 위해 CSS에 설정해 주는 속성 예제를 통해 자세히 알아봅시다. 예제 1. 네모 박스 색깔, 위치, 각도 애니메이션 transform은 어떻게 변경할 지를 입력한다고 했습니다. 위 예제 코드를 보면, scale 즉 크기를..

▶CSS 화면 중앙 배치 콘텐츠를 가로나 세로 혹은 가로/세로 즉 중앙에 배치하고 싶을 때의 방법을 공부해보겠습니다. 1) 가로에서 중앙 배치 ① margin 이용 margin은 컨텐츠 바깥 부분의 여백을 의미합니다. 이 방법은 바깥 여백을 이용하여 중앙에 배치합니다. margin left/right 실행 화면은 아래와 같습니다. margin-left와 margin-right를 auto로 주는 것은 좌우 바깥 여백을 자동으로 해서 가로 기준 중앙에 배치하는 것입니다. ② position: relative & transform 이용 position은 컨텐츠의 위치에 관해 설정해줄 수 있습니다. 이번에 사용할 position: relative는 컨텐츠들의 위치를 기준으로 위치를 이동시킬 수 있습니다. pos..

▶반응형 웹을 위한 미디어 쿼리 미디어 쿼리를 사용하면 콘텐츠 자체를 변경하지 않고 장치의 해상도, 뷰포트의 너비, 미디어의 유형 같은 조건에 따라 스타일을 지정할 수 있습니다. 데스크톱과 모바일, 태블릿 등 화면의 크기에 따라 다른 스타일을 지정하거나 인쇄, 음성 장치 등의 조건에 따라 다른 스타일을 적용할 수 있습니다. 미디어 쿼리 작성은 크게 CSS 파일 내부에 작성하거나 나 미디어 쿼리는 미디어 타입과 미디어 기능을 기준으로 동작합니다. 두 조건이 모두 일치할 때 해당 코드가 동작합니다. 미디어 타입에는 모든 장치(all), 인쇄미디어(print), 화면(screen) 등이 존재합니다. /* 미디어 타입이 screen일 때 적용됩니다. */ @media screen { /*...*/ } 미디어 기..

▶flex를 이용한 레이아웃 만들어 보기 레이아웃을 잡는 방법은 과거부터 다양하게 존재했습니다. 을 이용하는 방법부터 아직도 많이 사용되는 float 프로퍼티와 position 등을 이용하는 방법이 존재합니다. 모던 웹 브라우저에서는 보다 유연한 레이아웃 방식이 필요했고, CSS3가 등장하며 이에 맞는 flex와 grid 레이아웃 방식이 등장했습니다. 현재는 대부분의 모던 브라우저에서 flex나 grid 프로퍼티를 지원하기 때문에 레이아웃을 배치하기 위해 이 두 가지 방법을 가장 많이 사용합니다. 이번 글에서는 두 방법 중 flex에 대해 알아보고 flex를 상요해 레이아웃을 작성해 보겠습니다. ▷기본 개념 살펴보기 flex는 디바이스나 디스플레이의 크기에 다라 컨테이너에 들어 있는 콘텐츠의 너비, 높이..