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..

▶접근성 웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다. 우리나라의 장애인 차별 금지법에도 웹 접근성과 관련된 내용이 작성되었기 때문에 의무적으로 지켜야 하는 사항입니다. 웹 접근성을 따르는 개발은 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트와 도구 등을 사용할 수 있도록 개발하는 것을 의미합니다. 그렇다면 프런트엔드 개발자는 어떻게 웹 접근성 지침을 준수할 수 있을까요? ▷웹 접근성 지침 웹 접근성 지침은 W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 가이드라인을 제공합니다. 웹 콘텐츠에 관한 내용부터, 사용자들이 사용하는 도구 개발에서 지켜야 할 점, 브라우저나 확장 ..

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