[TIL] CSS 기능 정리 2탄
1탄에 이어 웹 카페에서 사용했던 CSS 기능들을 정리해보도록 하겠습니다.
- 마우스를 올렸을 때나 tap으로 포커스를 찍었을 때 불릿 추가하기
.sub-menu a:hover::before, .sub-menu a:focus::before{
content: '\e800';
}
- 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;
}
- 글자 중앙배치 및 높이 키우기
-
높이를 높이면서 글자도 중앙배치가 가능하지만 해당 코드는 유연하지않아서 글씨 크기가 커지면 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;
}
-
form 요소는 의도치 않은 현상이 많이 발생하게됩니다. 그러다보니 div로 한 번 감싸 수행하는 경우가 많습니다 (div는 의도한대로 잘 연출이 됩니다)
-
input
태그를 사용할 때 반드시label
과 함께 써줘야합니다 (명시적 방법은for
과id
를 연결해주는 것이고, 암묵적 방법은label
안에input
을 넣어주는 것입니다) -
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;
}
- 명시도를 높여주는것은 추천하지 않지만 꼭 필요한경우
!important
사용하기 (선택자 배치는 낮추는게 가장 좋음)
.board{
margin-top: 20px;
position: relative;
}
.board ul, .board .more{
display: none;
}
.is-active ul, .is-active .more{
display: block !important;
}
- 글이 길 때 한줄로 표현하며 말줄임표를 사용하기
.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;
}
- 이미지 정중앙 배치
.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);
}
- 글자 앞에 숫자 자동으로 붙여주기
- 부모 요소에
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;
}
- 이미지 오른쪽 정렬 및 스프라이트 이미지 활용하기
-
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;
}
- 정중앙 위치시키기
.slogan-heading{
text-align: center;
line-height: 83px;
margin: 0;
}
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;
}
Author And Source
이 문제에 관하여([TIL] CSS 기능 정리 2탄), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@joy37/TIL-CSS-기능-정리-2탄저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)