[TIL] CSS 기능 정리 2탄

1탄에 이어 웹 카페에서 사용했던 CSS 기능들을 정리해보도록 하겠습니다.

1. 마우스를 올렸을 때나 tap으로 포커스를 찍었을 때 불릿 추가하기

.sub-menu a:hover::before, .sub-menu a:focus::before{
    content: '\e800';
}

2. float의 겹침 문제 해결법

• zoom:1; - 원본 크기를 기준으로 확대 및 축소 (IE의 경우 flow-root를 사용하지 못해서 줌을 사용)

• overflow:hidden; 는 float 문제는 해결되지만 페이지 끝 부분에 겹치고자 의도한다면 의도대로 연출되지는 않습니다.

• main에 float:left;을 넣으면 페이지 끝부분에 겹치는 문제를 해결할 수 있음 + float문제도 해결됩니다.

• clearfix를 만들어서 새로운 div에 넣으면 float 문제해결가능하지만 마크업이 지저분해집니다.

• flow-root 사용하기

.main{
    background-color: #fff;
    border-radius: 15px 15px 0 0;
    display: flow-root;
    padding: 30px 15px;
    min-height: 450px;
}

.group1{
    float: left;
    width: 250px;
}

3. 글자 중앙배치 및 높이 키우기

• 높이를 높이면서 글자도 중앙배치가 가능하지만 해당 코드는 유연하지않아서 글씨 크기가 커지면 overflow되는 문제가 발생할 수 있습니다.

• a를 블록으로 만들어서 버튼 전체가 선택될 수 있도록 만들었습니다.

.validation-list a{
    padding: 6px 10px 6px 45px;
    display: block;
    background: url(./images/validation_icon.png) no-repeat 20px 50%, linear-gradient(to bottom, #ccc, #eee);
    margin-top: 10px;
    border: 1px solid #aaa;
    border-radius: 20px;
}

4. form 요소는 의도치 않은 현상이 많이 발생하게됩니다. 그러다보니 div로 한 번 감싸 수행하는 경우가 많습니다 (div는 의도한대로 잘 연출이 됩니다)

5. input 태그를 사용할 때 반드시 label 과 함께 써줘야합니다 (명시적 방법은 for과 id를 연결해주는 것이고, 암묵적 방법은 label안에 input을 넣어주는 것입니다)

6. fieldset과 legend는 form 에서 반드시 가져야했지만 HTML5가 되면서 필수는 아닙니다. 하지만 사용해주는 것을 권장드립니다.

.search-form *{
    vertical-align: middle;
}
.search-form fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}
.search-form label{
    line-height: 1;
}
.search-form input{
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #aaa;
    height: 22px;
    border-radius: 2px;
    padding: 1px 1px 1px 5px;
    margin: 0 10px;
    width: 202px;
}

7. 명시도를 높여주는것은 추천하지 않지만 꼭 필요한경우 !important 사용하기 (선택자 배치는 낮추는게 가장 좋음)

.board{
    margin-top: 20px;
    position: relative;
}
.board ul, .board .more{
    display: none;
}
.is-active ul, .is-active .more{
    display: block !important;
}

8. 글이 길 때 한줄로 표현하며 말줄임표를 사용하기

.board ul a{
    flex-grow: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.board li{
    margin-top: 10px;
    font-size: 0.875rem;
    display: flex;
}

9. 이미지 정중앙 배치

.news-article-thumbnail{
    margin: 0;
    position: absolute;
    top: 2px;
    left: 0;
    text-align: center;
}
.news-article-thumbnail img{
    box-shadow: 0 15px 10px 5px rgba(0,0,0,0.3);
}

10. 글자 앞에 숫자 자동으로 붙여주기

• 부모 요소에 counter-reset을 해주고 자식 요소에 counter-increment를 통해 숫자를 부여해줍니다.

.favorite-list{
    padding-left: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    counter-reset: none;
}
.favorite-list li{
    counter-increment: number;
    margin-top: 5px;
    position: relative;

}
.favorite-list li::before{
    content: counter(number);
    display: inline-block;
    padding: 2px 5px;
    margin-right: 5px;
    background-color: #aaa;
    color: #fff;
    font-size: 0.75rem;
    border-radius: 2px;
}

11. 이미지 오른쪽 정렬 및 스프라이트 이미지 활용하기

• transform:translateY(50%)를 사용하면 상자가 자기 크기의 절반만큼 내려갈 수 있지만 구형 브라우저에서는 지원을 안 할수도 있습니다

• transform대신 position:absolute를 사용할 수 있습니다.

.favorite .up,
.favorite .stop,
.favorite .down{
    /* float: right; */

    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -5px;

    background: url(./images/rank.png) no-repeat;
    font-style: normal;
    width: 9px;
    height: 11px;
    text-indent: 9px;
    white-space: nowrap;
    overflow: hidden;
}
.favorite .down{
    background-position: 0 50%;
}
.favorite .stop{
    background-position: 0 100%;
}
.favorite .more{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px;
}

12. 정중앙 위치시키기

.slogan-heading{
    text-align: center;
    line-height: 83px;
    margin: 0;
}

13. space-evenly는 호환 안되는 곳도 있으니까 그냥 space-between을 사용하고 padding 사용하기

• 높이는 고정하지 않는 습관 들이는것이 중요합니다.

.guide-list{
    display: flex;
    border-radius: 20px;
    background-color: #7b8385;
    color: #fff;
    font-size: 0.875rem;
    text-transform: uppercase;

    justify-content: space-between;
    padding: 0 20px;

    list-style: none;
    margin: 0;
    padding-left: 0;
}