반응형

CSS 7

div height 100% 높이 구하기

div의 높이를 100%으로 설정해두고 해당 div의 높이를 구하려고 하는데, 값이 0으로 나온다면, 해당 div의 부모를 확인해야합니다. 간단하게 test라는 div element를 하나 생성했습니다. 그리고 해당 element의 너비와 높이를 JavaScript를 이요하여 확인해봤습니다. 분명 width는 값이 제대로 나오는데, height는 0으로 나온 것을 확인할 수 있습니다. 이러한 값이 나오는 이유는 부모 element에게 있습니다. %를 이용하여 높이를 지정한 경우, 그 부모의 높이의 상대값으로 정해지는데, 그 부모도 높이가 없기 때문에 이러한 이슈가 발생하는 것입니다. 위 예제에서는 body의 높이가 0인것을 확인할 수 있습니다. 이를 해결하기 위해서는 div 부모들에게 높이를 지정하면 됩..

JavaScript 2021.01.11

[HTML/CSS] OS 상관없이 같은 모양 버튼 만들기

HTML에 버튼을 생성하면 OS 환경에 따라 다른 모양의 버튼이 만들어집니다. 왼쪽 버튼은 button 태그를 이용하였고, 오른쪽 버튼은 input 태그를 이용하여 만들었습니다. 같은 태그를 사용해서 만들었는데, 아래와 같이 OS에 따라 다른 것을 확인할 수 있습니다. MacOS Windows iOS Android 그럼 같은 모양으로 만들기 위해 CSS를 사용해보도록 하겠습니다. 먼저 같은 모양으로 만들기 위해 appearance: none CSS를 이용했습니다. Firefox와 Safari 그리고 Chrome에서도 동작하도록 했습니다. 아래와 같이요. -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ ..

HTML&CSS 2020.05.08

[CSS] Clear Property

안녕하세요. Jay 입니다. 오늘 알아볼 속성은 clear 입니다. clear 속성은 float의 동작 방식을 제어하는데 사용됩니다. div가 float 속성을 가지고있어 section이 바로 옆에 그려진 것을 확인할 수 있습니다. 이럴 때, section을 아래에 그리고 싶다면, section에 clear 속성을 주면 됩니다. 그러면 아래와 같이 됩니다. float와 같은 방향으로 선언해야 겹처지지 않습니다. 참조: http://ko.learnlayout.com/clear.html

HTML&CSS 2018.06.15

[CSS] Float Property

안녕하세요. Jay입니다. 오늘은 Float에 대해서 알아보도록 하겠습니다. "CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다." 라고 정의되어 있습니다. 말이 좀 어렵죠? 실제로 어떻게 보이는지 확인해보도록 하겠습니다. 먼저 float를 사용하지 않은 이미지와 텍스트의 배치를 보겠습니다. 이미지의 하단 부분부터 텍스트가 시작되는 것을 볼 수 있습니다. 이미지 옆 부분에는 빈 공간도 보이네요. 그럼 float css를 사용해보겠습니다. float: right 로 지정했습니다. 어떤가요? 이미지가 오른쪽에 배치되고 텍스트들이..

HTML&CSS 2018.06.14

[CSS] Position Property

static 기본 값. 위치가 지정된 것이 아닌 상태. relative 별도의 프로퍼티를 지정하지 않은 이상 static과 동일하게 동작. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left 등을 지정하면 기본 위치와 다르게 위치가 조정된다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않는다. fixed 뷰포트(viewport)에 상대적으로 위치가 지정된다. 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. relative와 마찬가지로 top, right bottom, left 프로퍼티가 사용된다. 고정 엘리먼트는 평소대로라면 있었을 법한 공백을 페이지에 남기지 않는다. 모바일 브라우저의 경우, 고정 엘리먼트 지원이 굉장히 불안정하다. absolu..

HTML&CSS 2018.06.12

[CSS] Display Property

block 한 줄을 모두 차지하며 엘리먼트가 배치된다.ex) div, p, form, header, footer, section 등 inline 줄 바꿈 없이 다른 엘리먼트들과 같은 줄에 엘리먼트가 배치됨. 요소를 구성하는 태그에 할당된 공간만 차지한다. 예를들어 width, height 속성을 주더라도 무시되고 자식 엘리먼트들의 공간만 차지한다.ex) span, a 등.. none 엘리먼트를 실제로 삭제하고 재생성하지 않고도 엘리먼트를 보이고 감추는데 사용한다.참고) Visibility: hidden은 자리는 차지하되 모습만 감추는 것으로 display: none과는 다르다. 참조: http://ko.learnlayout.com

HTML&CSS 2018.06.11

[CSS] !important, IE placeholder 색상 적용되지 않는 문제.

!important는 css 적용 순서를 무시하고, !important를 선언한 속성을 가장 높은 우선순위를 부여합니다. placeholder 색상을 지정했는데, IE에서만 제대로 적용되지 않는 현상이 있었습니다. 아래와 같이 구현을 했는데, IE에서는 Input Dom에 적용한 color의 우선순위가 높아 해당 color의 색상이 적용되고 있었습니다. 이를 해결하기 위해 !important를 사용했습니다. 해당 css가 가장 우선순위가 높도록 수정했습니다. 이 방법을 사용하면 IE에서도 동일하게 placeholder의 색상을 표현할 수 있습니다.

HTML&CSS 2018.02.22
반응형