이벤트에 따라 특정 영역을 보여주고 보여주지 않는 효과는

display 속성으로 하면 매우 간단하다.

하지만 동적으로 생성되는 영역은, 특히 가로 크기가 영역이 없어지면서 디자인이 뭉개지는 경우가 발생한다.

 

그럴때는 visibility를 이용하여 display: none 과 비슷한 효과를 주면 된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sub {position:absolute; visibility: hidden; left: -10000px;}
        .sub.active {visibility: visible; left: 0px;}
    </style>
    <script>
        function show(num) {
            document.querySelector('.active').classList.remove('active');
            document.querySelector('#div'+num).classList.add('active');
        }
    </script>
</head>
<body>
    
    <div>
        header
    </div>
    <div>
        <button onclick="show(1)">div1</button>
        <button onclick="show(2)">div2</button>
        <button onclick="show(3)">div3</button>
    </div>
    <div>
        <div id="div1" class="sub active">111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br>111111111111111111111111<br></div>
        <div id="div2" class="sub">22222222222222222222222</div>
        <div id="div3" class="sub">3333333333333333333333333</div>
    </div>

</body>
</html>

 

목표 엘리먼트에 position: absolute를 주면

목표 엘리먼트가 모두 겹치게 된다.

이때 목표 엘리먼트들을 모두 visibility: hidden 으로하고

특정 목표 엘리먼트만 visibility: visible을 설정하면 된다.

 

 

저작자표시

'프론트 프로그램 > css - style' 카테고리의 다른 글

ie11에서 fieldset width 문제 - angular primeng p-filedset  (0) 2021.09.03
크롬 브라우저별 css, style 다르게 적용하기  (0) 2019.09.18

익스플로러11에서

primeng p-fieldset 사용시

레이어팝업처럼 본문 넓이보다 넓이가 작은 레이어에서

p-fieldset 사용시 팝업보다 width가 커지는 문제가 발생

 

css 파일에 아래의 속성 추가하여 해결

 

fieldset {
    width: intrinsic;
}

저작자표시

'프론트 프로그램 > css - style' 카테고리의 다른 글

visibility 로 display 처럼 영역을 차지하지 않는 것 처럼 효과 주기  (0) 2023.07.13
크롬 브라우저별 css, style 다르게 적용하기  (0) 2019.09.18

크롬 브라우저의 한글 폰트 문제로 크롬에서만 특정 영역의 높이가 다르게 나오는 문제가 있었습니다.

 

크롬에서만 특정 css 스타일을 적용하는 방법을 찾아보니

css hack 으로 다음과 같은 방법이 있네요.

 

<html>
	<head>
		<title></title>
		<style>
			.test {
				background-color: red;
				height: 100px;
				color: white;
			}
			@media screen and (-webkit-min-device-pixel-ratio:0){
				.test {
					background-color: blue;
				}
			}
		</style>
	</head>
	<body>
		<div class="test">test</div>
	</body>
</html>

 

배경색을 익스플로러와 크롬을 다르게 적용한 예.

test라는 클래스에 기본으로 높이 100px에 배경을 빨간색으로 적용했습니다.

여기에 아래와 같은 스타일을 적용하면

 

@media screen and (-webkit-min-device-pixel-ratio:0){ 
  .test { 
    background-color: blue; 
  } 
}

크롬 브라우저에서만 배경색이 파란색으로 표시됩니다.

 

-webkit-이라는 prefix가 webkit 베이스 브라우저를 구별하는 prefix입니다.

vendor prefix라고 불리우는 이 기능은 브라우저 벤더의 특정 기능을 구분하기 위한 것으로 보면 됩니다.

종류는 아래와 같습니다.

 

  • -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
  • -moz- (Firefox)
  • -o- (Old, pre-WebKit, versions of Opera)
  • -ms- (Internet Explorer and Microsoft Edge)

@media

screen : 미디어 타입이 화면(screen)이라는 의미

-webkit-min-device-pixel-ratio:0 : 단말기의 화소와 실제 화면의 pixel간의 비율이 0 이상이면, -webkit- prefix 로 크롬이나 모바일 브라우저에 적용

저작자표시

'프론트 프로그램 > css - style' 카테고리의 다른 글

visibility 로 display 처럼 영역을 차지하지 않는 것 처럼 효과 주기  (0) 2023.07.13
ie11에서 fieldset width 문제 - angular primeng p-filedset  (0) 2021.09.03

+ Recent posts

티스토리툴바