로마장군의 블로그: css

레이블이 css인 게시물을 표시합니다. 모든 게시물 표시

[CSS] 개발중에 알림, 오류, 디버그 등을 표출하는 디자인

.todo { position:relative; border:1px solid #8e2225; background:#fcf1f1; padding:10px 10px 5px 15px; font-size:13px; line-height:18px; font-family:'Arial','맑은고딕'; margin:25px 0 15px; }
.todo::before { position:absolute; display:block; content:'TODO'; top:-12px; left:5px; background:#8e2225; z-index:2; color:#fff; font-size:12px; line-height:18px; padding:0 6px; }

오늘의 할일은 ......

[CSS] <li>의 marker와 텍스트 간격 조절하기

<ul>
    <li>리스트 : 현재의 SQL문에 조건 추가 (상태처리값에 따른 구분 필요함)</li>
    <li>삭제 : 개별삭제, 선택삭제, 전체삭제</li>
    <li>견적요청 작성 : 페이지 이동 UI</li>
</ul>

<style>
    ul { padding-left:15px; list-style-position:outside; }
    li { list-style-type:disc; padding-left:-5px; }
</style>

padding-left:-5px; 이 li의 marker와 텍스트 사이의 간격을 줄여준다.

단 이때 list-style-position:outside; 로 디자인되어야 한다.

[css] [css selector] :nth-child 사용하기

<style type="text/css">
ul.test li { display:block; width:40px; height:40px; float:left; margin:0 15px 15px 0; }
ul.test li:nth-child(1) { background:#ff0; } /* 지정한 1개만 */
ul.test li:nth-child(3n+1) { border:1px solid #f00; } /* 규칙적으로 (3개마다) */
ul.test li:nth-child(-n+5) { color:blue; font-weight:bold; } /* 앞에서부터 계산(~ 5) */
ul.test li:nth-child(n+17) { color:red; font-weight:bold; } /* 뒤에서부터 계산(18 ~) */
ul.test li:nth-child(n+11):nth-child(-n+15) { background:#6ff; } /* 범위로 계산(11 ~ 15) */
</style>

:nth-child(odd) 홀수

:nth-child(even) 짝수

:nth-last-child() 뒤에서부터 계산한다.

[CSS] 세로 가운데 정렬 Vertical-align:center


<div id="box">
    <div id="text">가운데 정렬</div>
</div>


#box { width:400px; height:300px; background:#f0e0e0; }
#text { position:relative; top:50%; transform:translateY(-50%); text-align:center; }

가운데 정렬

[CSS] [jQuery] 화면스크롤에 따라 위치가 고정되는 스크립트

최초 position: relative;

이동 position: fixed;

/* Javascript */
jQuery(document).ready(function(){
    var wrap = jQuery(window);
    // 페이지로딩, 새로고침
    var sct = jQuery(this).scrollTop();
    console.log("scroll = " + sct);
    if(sct>140) {
        jQuery("#contents_left").addClass("fixed");
    } else {
        jQuery("#contents_left").removeClass("fixed");
    }
    // scroll 반응
    wrap.on("scroll", function(e){
        var sct = jQuery(this).scrollTop();
        console.log("scroll = " + sct);
        if(sct>140) {
            jQuery("#contents_left").addClass("fixed");
        } else {
            jQuery("#contents_left").removeClass("fixed");
        }
    });
});

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }

[CSS] 이미지의 가로/세로 비율을 유지하기(반응형)

<!-- HTML -->
<div class="d-img">
    <div class="d-img-inner">
        <img />
    </div>
</div>

/* CSS */
.d-img { 
    position:relative; 
    width:100%/* 상위 엘리먼트에 의존하여 계산 */ ; 
    height:0; 
    padding-bottom:70% /* 가로크기에 비례함 */; 
}
.d-img-inner { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}
.d-img-inner img { width:100%; height:100%; }

[CSS] 부모 Element보다 더 넓은 크기를 가진 자식 Element

배너 등을 표시하기 위해 부모 Element보다 넓은 자식 Element가 때로 필요하다.

<!-- HTML -->
<div id="parent">
    <div id="child"></div>
</div>

이때 사용할 수 있는 크기 단위가 바로 vw, vh

/* CSS */
#contents_left.fixed { position:fixed; top:0px; }

vw는 viewport 가로 100%를 기준으로 한다.

100vw = 가로폭 전체.

[CSS] Youtube유튜브 영상(iframe)을 모바일기기에 맞게 출력하기(반응형)

/* CSS */
.videowrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율인 경우 */
  /* 4:3 비율인 경우 75%로 설정합니다 */
  padding-top: 25px;
  height: 0;
}

.videowrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}