CSS3

[CSS] CSS 초기화(Reset) 코드 모음

[CSS] CSS 초기화(Reset) 코드 모음 (글쓴날 : 2020.03.12) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 초기화(Reset) 코드 1) CSS 초기화(Reset)란? 먼저, CSS 초기화란 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다. 대표적인 브라우저에는 Microsoft의 인터넷 익스플로러(Internet Explorer), Google의 크롬(Chrome), Apple의 사파리(Safari), Mozila의 파이어폭스(Firefox) 등이 있으며, 브라우저들마다 내장되어 있는 CSS의 기본값들이 서로 다르게 설정되어 있습니다. 따라서, 웹 프로그래밍 시 분명히 동일한 코드인데도 ..

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법

[CSS] flexbox를 이용한 레이아웃(이미지, div 등) 가운데 정렬하는 법 (글쓴날 : 2020.03.02) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS 레이아웃(이미지, div 등) 중앙 정렬 방법 1) flexbox란? 간단하게 설명하자면 flexbox란 CSS3에서 새롭게 추가된 웹 레이아웃 모델로, 개발자들이 기존 CSS의 position, float, display 등의 속성들로 해결하기 힘들었던 문제들을 쉽고 유연하게 구현할 수 있도록 제공하는 기능입니다. 주로 1차원 레이아웃의 공간 배분 및 정렬을 하기 위해 설계되었으며, 행과 열 중점의 2차원 레이아웃을 다루는 Grid 레이아웃과는 지향점이 조금 다르니 각자의 상황에..

[CSS] 레이아웃 height 100%로 동작하게 하는 법

[CSS] 레이아웃 height 100%로 동작하게 하는 법 (글쓴날 : 2020.03.01) * 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다. * CSS3를 기준으로 작성되었습니다. CSS height에 % 값 적용 방법 1) 부모 태그의 높이를 100%로 지정하기 아래의 화면처럼, 만약 height를 100%로 지정했을 때 원하는 데로 동작하지 않으신다면, 저도 그랬듯이 아마 대부분의 경우가 부모 태그의 height가 지정하지 않은 경우일 겁니다. 따라서, 위의 화면처럼 height를 %로 지정하고 싶으시다면 html, body와 같은 부모 태그의 height를 전부 지정해 주셔야 합니다. (ex) 1 2 3 4 5 6 7 8 9 html, body { height: 100%; } 적용할..