넓이(Width)에 비례하는 높이(Height) 만들기

일반적으로 HTML Element의 높이(Height) 값은 고정된 픽셀 값을 지정하게 되는데, 넓이(Width)가 가변적인 반응형 UI에서는 원하는 형태를 유지하기 어렵게 된다. 넓이 대비 비율, 즉, 종횡비를 맞추는 방식이 필요한데, 현재 CSS에 이에 대한 속성이 존재 하지 않기 때문에 약간의 Trick을 쓰거나 JavaScript를 이용해야 한다. CSS Padding 활용 See the Pen Aspect Ratio 1:1 by Andy Jung (@Samchogo) on CodePen. container Class 의 padding-top을 100% 설정하고 내부 요소의 포지션을 절대값(absolute)로 지정, container를 가득 채우는 방식으로 비율 적용을 했다. padding-top을 100%로 설정 했기 때문에,...

중앙 정렬 문제(Perfect Centering Issue)

HTML 문서 작성 시 은근히 어려운 것이 바로 중앙 정렬이다. 가로 정렬은 그나마 쉬운 방법이 있지만, 세로 정렬(Vertical Align)은 일종의 Trick을 사용해야만 가능한 경우도 있다.최신 CSS 표준에서는 Flexbox 속성으로 중앙 정열이 까다로운 상황을 쉽게 해결할 수 있는데, 여기서 Flexbox 포함하여 다양한 중앙 정열 방식에 대해 정리한다. 가로 정렬 특정 요소를 가로로 정렬 하는 것은 비교적 간단하다.가장 많이 사용하는 것이 'text-align:center' 속성인데, 이는 text 요소 또는 inline, inline-block 속성을 가진 요소에만 적용 된다. inline 속성이 없는 일반 Element를 가로 중앙 정렬을...

Scrollbar를 숨기는 확실한 방법

Scrollbar를 없애는 가장 일반적인 방법은 아래와 같이 overflow 속성을 활용하는 방식이다. body{ overflow:hidden; } 그런데, 이렇게 하더라도 내부의 iframe과 같은 요소가 다이나믹하게 길어져서 아래로(스크롤 밖으로) 밀어 낼때 간혹 Scrollbar가 생기는 경우가 있다.이런 경우를 막고 어떤 경우든 스크롤이 생기지 않게 하려면 아래와 같이 별도의 class를 만들어 주는 것이 좋다. .example { overflow : hidden; /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; } /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar { display: none; } /* How...

CSS Var() 사용 시 마이너스(Nagative) 수치 사용

CSS에 아래와 같이 마이너스 숫자를 사용하는 경우가 있다. #div1 { margin-top : -10px; } 그런데 아래와 같이 CSS Var()를 사용하여 마이너스 표시하면 이를 제대로 인식하지 못한다. #div1 { margin-top : -var(--margin-top); } 이경우는 css var()의 수식 함수인 calc을 사용해야 한다. #div1 { margin-top : calc(var(--margin-top) * -1); }

CSS 변수(Variables)가 Explorer에서도 작동하게 하는 방법(css-vars-ponyfill)

CSS Custom properties(CSS Variables)를 통해 많은 것을 할 수 있지만, 가장 유용한 것이 CSS에서도 변수를 사용할 수 있다는 것이다. 그런데, 항상 문제가 되는 것이 Explorer와 같은 Legacy Browser가 CSS 변수를 지원하지 않기 때문에, 그 유용함에도 불구하고 섣불리 사용하기 어렵다는 점이다. 이 문제를 해결해 주는 유용한 JavaScript 라이브러리를 소개 하고자 한다. css-vars-ponyfill 설치 요즈음엔 JavaScript 라이브러리를 서버에 직접 적용하기 보다는 해당 라이브러리가 제공하는 CDN을 사용하는 것이 가장 간편하다. HTML 파일의 head 영역안에 다음과 같이 코드를 추가하면, 사실상 기본 환경은 끝. <script...

CSS 변수 사용(CSS Variables)

CSS는 원래 프로그램 언어가 아니라, Mark-up 언어이기 때문에, 변수를 사용할 수 없었다. 간단한 CSS에서는 굳이 변수를 사용할 필요가 없지만, 복잡하고 코드량이 많은 CSS에서는 자주 사용하는 값을 변수로 할당하고, 재사용하는 것이 필요해 진다. 오랜동안 CSS 변수 사용 등 CSS의 기능성을 추가 해 주는 Less와 같은 자바스크립트 라이브러리 또는 Sass와 같은 Processor가 널리 사용 되어 왔는데, 사실 그 불편함은 적지 않았다고 볼 수 있다. 최근에 CSS Custom Properties가 지원되면서 CSS 파일 또는 코드 내에서 별도의 외부 라이브러리 없이 변수를 사용할 수 있게...

opacity 와 rgba

opacity 속성은 배경색의 ‘Alpha’ 값을 부여하여 투명하게 만들어 줍니다. div { background-color: red; opacity: 0.6; } opiacity 속성이 부여된 element의 모든 child element들에도 해당 속성이 적용 됩니다.즉, 아래와 같이 특정 child element에 opacity 값을 다르게 부여해도 상위의 opacity 값이 적용됩니다. .parent { opacity:0.5; } .child { opacity:1; } 만약 배경 색깔은 반투명하게 하고, Text는 원래의 투명도를 유지하고 싶다면, opacity 속성이 아닌 ‘rgba’를 사용해야 합니다. .origina{ background-color: rgb(76, 175, 80); } .origina-alpha{ background-color: rgba(76, 175, 80, 0.5); }