div4 css margin:0 auto 오늘은 제 포스팅에서도 가운데 정렬을 하기 위해 종종 썼었던 margin:0 auto의 쓰임새에 대해서 알아보도록 하겠습니다. - margin:0 auto의 쓰임새는? margin:0 auto는 이 속성값이 들어가는 html 요소에게 가운데 정렬을 시켜주고 싶을 때 사용하게 됩니다. 근데 가운데 정렬을 하려고 하는데 왜 margin값을 저렇게 주는 것인가 궁금증이 생길 수 있습니다. 그것에 대해서 알기 위해서는 먼저 margin의 속성에 대해서 좀 알아야 합니다. (참고 자료 : https://begindevelop.tistory.com/28) margin값은 해당 요소와 주변의 요소 사이에 여백을 주는 css 속성입니다. 간단하게 하나 예시를 들어보면, 안녕 하세요. 첫 번째 div는 위아래 1.. 2021. 12. 20. css 미디어쿼리(ft.반응형 웹) 요즘 태블릿, 스마트폰과 같이 모바일 기기의 이용이 늘어나면서 웹을 제작할 때에도 반응형 웹으로 제작하는 것이 거의 필수가 되었습니다. 여기서 반응형 웹이란 쉽게 말해 디바이스의 종류에 따라 페이지가 알아서 재조정되는 것을 말합니다. 어떤 환경이든 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹인 것입니다. 그래서 오늘은, 이 반응형 웹에 있어 필수요소라고도 불리는 css의 미디어 쿼리에 대해서 알아보는 시간을 갖도록 하겠습니다. - 기본 문법 미디어 쿼리는 css에서 어떤 스타일을 선택적으로 사용하고 싶을 때 사용합니다. 어떻게 보면 다른 언어에서의 if 문법과 비슷한 개념이라 생각하면 이해하기 쉬울 것 같습니다. @media (조건) { 스타일 } c언어와 같은 언어에서의 if .. 2021. 12. 17. display grid 속성 이번 글에서는 display의 속성값 중 하나인 grid에 대해 알아보겠습니다. 바로 저번 글에서 했었던 flex와 같이 grid도 레이아웃 배치를 위해 만들어진 속성으로, flex와 비교했을 때 flex는 전 시간에서 봤듯이 1차원으로 수평, 수직 방향으로만 레이아웃을 배치할 수 있지만 grid는 2차원(수평, 수직)으로 레이아웃을 배치할 수 있습니다. (따라서 flex보다 더 복잡한 레이아웃 구현이 가능합니다.) + 참고로 grid는 IE(인터넷 익스플로러)에서는 부분적으로만 지원하기 때문에 참고하시길 바랍니다. grid 안에도 flex와 마찬가지로 수많은 세부 속성값들이 있는데, 이전의 flex와 마찬가지로 기본 개념과 세부 속성 몇 개만 예제 코드를 통해 알아보는 시간을 갖겠습니다. 먼.. 2021. 12. 17. css background 속성 이번 글에서는 css의 background 속성에 대해 알아보겠습니다. - background란? 태그의 배경을 지정하는 속성으로, font와 비슷하게 세부 속성을 갖고 있습니다. 1. background-color(배경 색 지정) 2. background-repeat(배경 이미지의 반복 여부) 3. background-image(배경 이미지) 4. background-position(배경 이미지의 위치) 이렇게 세부 속성이 있으며 background: ~ 로 4가지 세부 속성을 지정할 수 있습니다. 기본 설명은 여기까지로 하고, 각각 예시를 보면서 이해하도록 하겠습니다. .visual .prev, .visual .next {display: block;position: absolute;to.. 2021. 12. 16. 이전 1 다음
