html/css <i>태그로 아이콘 포인트주기

 

태그를 선호 하는 이유 ?

span보다 가독성 우수

짧은 단어

추후 수정시 태그만 선택 변환가능

아래 문의 작성하기 폼에서 중요한 텍스트에 아이콘포인트를 줘보자!

 

 

 

---

 

1. html 에 <i> 태그 코드작성

<p class="ess"><i class="star"></i>필수입력사항</p>

p태그로 글자를 넣은후 앞과 뒤 위치를 고려해 <i> 태그 삽입

 

---

 

2. 개별 css시트 작성 

 

저 별 포인트는 홈페이지 전체에 적용되는 공통클래스가 아닌,

문의하기 페이지에서만 쓰이므로  공통 common 클래스가 아닌 layout css 에 작성해준다.

 

.inquiry_page .inquiry_area .ess {
    color: #999999;
    text-align: right;
}
.inquiry_page .inquiry_area .star {
    display: inline-block;
    width: 7px;
    height: 6px;
    background: url(../images/icon_ess.png) no-repeat;
    vertical-align: 3px;
    margin-right: 4px;
}