HTML, CSS 기존코드 개선하기 01

날짜 : 2018. 01. 22.(월)

HTML, CSS 기존코드 개선하기 1

부제 : HTML논리구조, pseudo-element 개선하기

HTML 논리적 구조 잡기

기존의 코드 (디자인 중심적으로 생각을 하여 가로/세로를 나눔)

<div class="term">
    <h2>웹 관련 용어</h2>
    <div class="term-wrapper">
        <div>
            <div class="term-head">웹 표준 이란?</div>
            <div class="term-content">W3 단체에서 규정한 웹기술 사양에 대한 규칙을 말하며 표준 규격은 어리마넝라ㅣ먼ㅇ라ㅣㅓㅁㄴ아ㅣ러마니어림ㄴㅇ라ㅣㅓㅁ나ㅣ어ㅏㅣㅁ넝라ㅣㅓㅁㄴ아ㅣ러ㅣㅏㅇ너라ㅣㅓㅁ나일</div>
        </div>
        <div class="term-picture"></div>
    </div>
</div> 

새로 만든 코드

<div class="term">
    <h2 class="term-heading">웹 관련 용어</h2>
    <dl class="term-list">
        <dt class="term-list-heading">웹표준이란?</dt>
        <dd class="term-list-thumbnail"><img src="./images/web_standards.gif" alt="W3C 로고"></dd>
        <dd class="term-list-brief">W3C 단체에서 규정한 웹 기술 사양에 대한 규칙을 말하며 표준 규격은...</dd>
    </dl>
</div>

pseudo-element 활용하기

1. 글의 이미지 삽입하기

기존코드

<div>
    <p>이미지</p>
    <div>글자</div>
</div>

새로만든 코드

<div>
    <div>글자</div>
</div>

div::before {
    content: "";
    background: url(이미지);
}

2. float에서 높이값 세팅하기

<div class="term">
    <h2 class="term-heading">웹 관련 용어</h2>
    <dl class="term-list">
        <dt class="term-list-heading">웹표준이란?</dt>
        <dd class="term-list-thumbnail"><img src="./images/web_standards.gif" alt="W3C 로고"></dd>
        <dd class="term-list-brief">W3C 단체에서 규정한 웹 기술 사양에 대한 규칙을 말하며 표준 규격은...</dd>
    </dl>
</div>

.term-list::after {
    content: "";
    display: block;
    clear: both;
}