HTML + CSS23 CSS - 19. Media query 1. Media Query media query란 responsive Web을 구현하는 CSS technique이다. 특정 조건에서는 어떤 CSS를 적용하라는 규칙을 줄 수 있다. css에 @media라는 문법으로 작성하게 된다. @media only screen and (max-width: 480px) { body { font-size: 12px; } } 위 코드는 480px보다 작은 화면에서 body 태그 내의 font 크기를 전부 12px로 바꾸는 것이다. 위 코드를 해석해보자면, 1. @media - 이 키워드는 media 쿼리를 시작하겠다는 의미이다. 2. only screen - 어떤 디바이스에서 적용하는지 알려준다. 예를 들면 프린트를 하고 싶을 때 적용하려면 only print라고 작성하면.. 2020. 6. 15. CSS - 18-2. 레이아웃의 모든 것 1. position 속성 static 요소를 문서 흐름에 맞추어 배치한다. relative 이전 요소에 자연스럽게 연결하여 위치를 지정한다. absolute 원하는 위치를 지정해 배치한다. fixed 지정한 위치에 고정하여 배치한다. sticky 위치에 따라서 동작방식이 달라진다. 요소가 임계점 이전에는 relative와 같이 동작한다. 그 이후에는 fixed와 같이 동작한다. static을 제외한 나머지 속성 값들은 top, right, bottom, left와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있다. 각 값들은 그 방향에서 얼마만큼 떨어져 위치시킬 것인지를 나타낸다. (예. top: 10px 이면 기준 위치 위에서 10px 떨어져 위치시키라는 뜻이다.) static static은 p.. 2020. 6. 15. CSS - 18-1. float 기반 레이아웃 float은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어진 프로퍼티이다. 하지만 페이지 전체의 레이아웃을 잡을 때에도 정말 중요한 도구가 된다. 1. float 사용 예제 float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다. 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다. 그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있다. 2. float 문제 해결 float을 해결하려면 clear라는 속성이 필요하다. float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티이다. 해결방법은 여러 가지가 있다. 해결방법 1. 바깥 div 마지막에 아무 태그나 넣고 clear 속성을 적용한다. 이 기법을 .. 2020. 6. 15. CSS - 18. 레이아웃 HTML은 원래 위에서 아래로, 블록 수준 요소들을 순차적으로 나열하며 내용을 표시한다. 하지만 우리가 구현해야 하는 것은 단순 나열이 아니라 신문의 레이아웃처럼 다단 구성을 해야 할 수도 있고, 페이지 임의 위치에 이미지나 텍스트를 자유롭게 배치할 수 있어야 한다. 1. 태그에 대해 레이아웃이라고 특별한 것은 없다. 웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다. css에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 이다. 이 태그는 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용된다. 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다. 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일.. 2020. 6. 15. 이전 1 2 3 4 ··· 6 다음
