html 특정부분에 스타일링할 수 있다.
굳이 많이 쓰이지는 않지만, 아래의 shadow dom을 위해 ::사용법을 알아놓자.
.text::first-letter {
color : red;
}
.text::first-line {
color : red;
}
.text::after {
content : '뻥이지롱';
color : red;
}
.text::before {
content : '뻥이지롱';
color : red;
}
pseudo-element를 선택하려면 콜론 2개 :: 를 사용하면 된다.
::first-letter라고 붙이면 안에 있는 글자 중 첫 글자만 스타일을 줄 수 있다.
::first-line이라고 붙이면 안에 있는 글자 중 첫 줄만 스타일을 줄 수 있다.
::after라고 붙이면 내부의 맨 마지막 부분에 특정 글자같은걸 추가해줄 수 있다.
::before라고 붙이면 내부의 맨 앞 부분에 특정 글자같은걸 추가해줄 수 있다.
배치하려 float: left;등을 사용했다면,
.box::after {
content : '';
display : block;
clear : both;
}
HTML 개발시 코드가 너무 복잡해지지 않기위해 숨겨놓은 요소들
내가 전에는 할 수 없어던 요소를 커스터마이징할 수있다.
1. 예를 들어, html에 <input type="text" placeholder="안녕하세요">
을 지정한다.
2. 해당 페이지에서 F12를 눌러, pseudo값을 가져온다.
3. 아래처럼 지정하면 된다.
input::-webkit-input-placeholder {
color : red;
}
<progress>
태그 스타일링해보기<progress value="0.4"> </progress>
모던 브라우저에선 진행상황을 알 수 있는 progress 바이다. 관리자옵션에서 pseudo를 가져온다.
progress {
/*기본 배경은 없애주는게 좋다*/
-webkit-appearance: none;
-moz-appearance : none;
appearance: none;
background: white;
/* IE10 호환성용 */
color: red;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
}
progress::-webkit-progress-value {
background-color: red;
border-radius: 2px;
}
/*파이어폭스 호환성을 위해*/
progress::-moz-progress-bar {
background-color: red;
border-radius: 2px;
}