FDS12_Markup_Summary

<dl> | Form Flex Design

웹 관련 용어 배너 Markup

image

<dl> : Defines a description list

<dt> : definition term

<dd> : definition description

원래 <dt> <dd> 를 <div>로 묶으면 안 됐었는데 허용됨 : 다만 맞는 <dt>를 설명하는 모든 <dd> 함께 묶어야 함.

image

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

image

> 나는 padding 줬는데, width 조절해야하는지 몰랐음!

> Padding-right 줬을 때 문제는 text 늘어나면 width 자체가 늘어나서 배치 달라짐 (유지보수 관점에서 안 좋음)

Inline element의 descender

image

노란 배경이 보이게 뜨는 문제

  • <img diaplay: block>으로 inline 속성 없애거나, <img vertical-align: top>으로

검색 영역

image

  1. 논리적 순서

    (1) 자료검색

    (2) 입력서식

    (3) 검색버튼

  2. Markup

image

<form action="https://formspree.io/95su1208@gmail.com" method="POST" class="search-form">
    <fieldset>
        <legend>검색 폼</legend>
        <div class="search-container">
            <label for="search" class="icon-search">자료검색</label>
            <input type="search" id="search" required placeholder="검색어를 입력하세요.">
            <button type="submit" class="btn-search">검색</button>
        </div>
    </fieldset>
</form>

: <button>이 <form> 안에 없을 때 form property를 form의 class로 넣어주면 연결된다!

HTML5에서는 form 속성의 추가로 인해 폼 서식을 form 요소 안에 마크업하지 않고도 연결하는 것이 가능해졌습니다.

Flex to Form element

: fieldset에 display: flex 주기

image

  1. FireFox

image

  1. Internet Explorer 11

image

  1. Chrome
image

form 관련 요소인 fieldset에 flex 적용 불가능

> label, input, button을 div로 감싸서 flex-container로 만들어 해결!

 <div class="search-container">
    <label for="search" class="icon-search">자료검색</label>
    <input type="search" id="search" required placeholder="검색어를 입력하세요.">
    <button type="submit" class="btn-search">검색</button>
</div>

HTML5

Favicon

image