웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2)

2주차 학습 목표
1. 개발자 도구로 웹사이트 특정 요소 분석
2. 특정 요소를 HTML/CSS 로 구현하는 방법 이해
3. jQuery 활용 - 특정 요소에 이벤트와 기능을 부여

1. 개발자 도구로 웹사이트 특정 요소 분석
    1.1. 네이버 화면 분석
        1.1.1. 상단영역
            1.1.1.1. 검색창
                1.1.1.1.1. 검색어 입력창 (div.green_window)
                1.1.1.1.2. 검색 버튼 (button#search_btn.btn_submit)
                1.1.1.1.3. 자동완성 화살표 (a#nautocomplate.btn_arw._btn_arw.fold)

---

1. 개발자 도구로 웹사이트 특정 요소 분석
1.1. 네이버 화면 분석
1.1.1. 상단영역
1.1.1.1. 검색창

1.1.1.1.1. 검색어 입력창 (div.green_window)

직접적으로 검색창 영역에 해당하는 div.green_window를 살펴보자.

div#search.search_area 아래의 #sform > fieldset 에 포함되어 있다.

<div id="search" class="search_area" data-clk-prefix="sch">
    <form id="sform" name="sform" action="https://search.naver.com/search.naver" 
    method="get" role="search">
        <fieldset>
            <legend class="blind">검색</legend>
            <input type="hidden" name="where" value="nexearch">
            ...
            <input type="hidden" id="mra" name="mra" value="" disabled="disabled">
            <!-- div.green_window -->
            <div class="green_window" style="">
                <input id="query" name="query" type="search" title="검색어 입력" maxlength="255" class="input_text" tabindex="1" accesskey="s" style="ime-mode:active;" autocomplete="off" placeholder="검색어를 입력해 주세요." onclick="document.getElementById('fbm').value=1;" value="" data-atcmp-element="">
            </div>
            <button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit" onclick="window.nclick(this,'sch.action','','',event);" style="">
                <span class="blind">검색</span>
                <span class="ico_search_submit"></span>
            </button>
        </fieldset>
    </form>
    <a href="#" id="ke_kbd_btn" role="button" class="btn_keyboard" onclick="return false;">...</a>
    <div id="_nx_kbd" style="display:none;"></div>
    <div class="autocomplete">...</div>
    <div id="autoFrame" class="reatcmp" style="display: none;">...</div>
</div>

<div class="green_window" style="">
    <input id="query" name="query" type="search" title="검색어 입력" maxlength="255" class="input_text" tabindex="1" accesskey="s" style="ime-mode:active;" autocomplete="off" placeholder="검색어를 입력해 주세요." onclick="document.getElementById('fbm').value=1;" value="" data-atcmp-element="">
</div>

<style>
element.style {

}
#header .search_area .green_window {
    position: relative;
    width: 582px;
    height: 52px
    border: 2px solid #19ce60;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
</style>

해당 div.green_window에 적용되고 있는 style도 함께 살펴보자. 네이버 색상인 #19ce60을 사용중이며 element.style은 인라인으로 적용되는 스타일을 뜻한다. 네이버 메인화면의 이벤트에 따라 검색창의 색깔이 변경되거나 할때 인라인으로 스타일을 주어 사용하는 것으로 보인다.

 

div.green_window 하위에 input 태그를 두어 직접적인 검색어 입력을 하도록 하였다.

input태그도 개발자 도구를 통해 살펴보면 마찬가지로 폰트 스타일 등이 적용 된 것을 확인 가능하다.

 

1.1.1.1.2. 검색 버튼 (button#search_btn.btn_submit)

검색 버튼을 살펴보자.

네이버 검색창의 검색 버튼

<button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit" onclick="window.nclick(this,'sch.action','','',event);" style="">
    <span class="blind">검색</span>
    <span class="ico_search_submit"></span>
</button>

앞서 언급한 것과 마찬가지로 blind 클래스를 통해 '검색'이라는 텍스트가 표현되지 않도록 처리하고 있다.

ico을 포함하고 있는 span태그의 경우 ico_search_submit 이란 클래스에 속해있는데 해당 클래스에 적용되고 있는 CSS를 살펴보자,

 

<style>
#header .search_area .btn_submit .ico_search_submit {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -420px -24px;
    background-repeat: no-repeat;
    vertical-align: top;
}

.ico_search_submit {
    background-image: url(https://s.pstatic.net/static/www/img/uit/sp_main_947f65.png);
    -webkit-background-size: 442px 428px;
    background-size: 442px 428px;
    background-repeat: no-repeat;
}

</style>

백그라운드 이미지가 아니라 포지션으로 아이콘을 지정하고 있는 것을 확인 할 수 있다.

background-position: -420px -24px;

또 적용되고 있는 backgroud-img를 살펴보면 

통으로 이미지가 올라가있는것들을 확인할 수있다. 해당 이미지를 한번만 캐싱한 뒤 해당 이미자의 포지션을 통해서 아이콘을 구현하고 있다. 이렇게 하게 되면 이미지를 한번만 캐싱하고 활용할 수 있어서 속도면에서 유리하다.

(하지만 요즘은 워낙 인터넷이 빨라서 크게 영향을 끼치진 않는다고 한다. 아이콘을 하나의 이미지로 관리하니 찾거나 관리하기 편할것 같다는 생각은 든다.)

 

1.1.1.1.3. 자동완성 화살표 (a#nautocomplate.btn_arw._btn_arw.fold)

화면상으로 검색창 안에 있는 것으로 표현되고 있는 화살표 버튼을 살펴보자.

검색 이력을 펼쳐서 볼 수 있는 버튼으로

<div id="search" class="search_area" data-clk-prefix="sch">
    <form id="sform" name="sform" action="https://search.naver.com/search.naver" method="get" role="search">
        <fieldset>...</fieldset>
    </form>
    <a href="#" id="ke_kbd_btn" role="button" class="btn_keyboard" onclick="return false;"><span class="blind">한글 입력기</span><span class="ico_keyboard"></span></a>
    <div id="_nx_kbd" style="display:none;"></div>
    <!-- 검색창 내 화살표 아이콘 -->
    <div class="autocomplete">
        <a href="#" role="button" id="nautocomplete" tabindex="2" class="btn_arw _btn_arw fold" aria-pressed="false" data-atcmp-element=""><span class="blind">자동완성 레이어</span><span class="ico_arr"></span></a>
    </div>
    <!-- -->
    <div id="autoFrame" class="reatcmp" style="display: none;">
        <div class="ly_atcmp" data-atcmp-element="">
            <div class="api_atcmp_wrap">
                <div class="atcmp_fixer _recent_layer" style="display:none;">
                    <div class="atcmp_header _recent_header">
                        <strong class="tit">최근검색어</strong>
                        <div class="option">
                            <a role="button" href="#" class="item _delAll" aria-pressed="false">전체삭제</a>
                        </div>
                    </div>
                    <div class="atcmp_container">
                        <ul class="kwd_lst _recent">
                            <li class="item _item" data-rank="@rank@" data-template-type="history" data-keyword="@in_txt@">
                                <a href="#" class="kwd">
                                    <span class="fix">
                                        <span class="common_ico_kwd">
                                            <i class="imsc ico_search"></i>
                                        </span>
                                        <span>@txt@</span>
                                    </span>
                                </a>
                                <span class="etc">
                                    <em class="date">@date@.</em>
                                    <a href="#" role="button" class="bt_item _del" aria-pressed="false"><i class="imsc ico_del">삭제</i></a>
                                </span>
                            </li>
                        </ul>
                        <div class="kwd_info kwd_off _offMsg" style="display: none;">검색어 저장 기능이 꺼져 있습니다.<br><span class="kwd_dsc">설정이 초기화 된다면 <a href="https://help.naver.com/support/alias/search/word/word_29.naver" class="kwd_help" data-clk="sly.help" target="_blank">도움말</a>을 확인해주세요.</span></div>
                        <div class="kwd_info kwd_none _recentNone" style="display: none;">최근 검색어 내역이 없습니다.<br><span class="kwd_dsc">설정이 초기화 된다면 <a href="https://help.naver.com/support/alias/search/word/word_29.naver" class="kwd_help" data-clk="sly.help" target="_blank">도움말</a>을 확인해주세요.</span></div>
                    </div>
                    ...
                </div>
                ...
            </div>
        </div>
        ...
    </div>
    ...
</div>

div.autocomplete 아래에 포함되어 있는 a 태그 이다.

해당 태그에 적용된 css는 다음과 같다.

<style>
#header .search_area .btn_arw {
    position: absolute;
    top: 0;
    right: 64px;
    bottom: 0;
    width: 22px;
}
</style>

position: absolute; 가 적용된 것을 확인 할 수 있다.

 

이놈의 포지션... 처음 CSS 배울때도 짱났는데 지금도 짱난다. 하지만 완전히 이해하고 말겠다!

구대기 같은 포지션....

 

설명을 잘 해주신 블로그를 찾아서 일부내용을 첨부하고 링크를 걸어두겠다.

position: absolute
position 속성값 중 가장 난해하고 주의해서 사용해야하는 속성값은 absolute입니다. 아마도 absolute라는 영단어의 의미 때문일텐데 relative 속성의 정반대 개념이라고 많이 오해를 합니다. 오히려 absolute 속성값은 relative 속성값과 함께 사용되는 경우가 많은 데 말입니다.
position 속성을 absolute로 지정하면 사실 전혀 절대적(absolute)으로 요소를 배치해주지 않습니다. 오히려 배치 기준이 상황에 따라 굉장히 달라질 수 있는데요. 흥미롭게도 position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정되는데요. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 됩니다.

알고리즘이 상당히 복잡하게 느껴지죠? 하지만 실제로 absolute 속성값을 사용할 때 이러한 복잡한 특성을 활용하는 경우는 드뭅니다. 대부분의 경우, 부모 요소(가장 가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야하기 때문입니다. 따라서 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정해주는 것이 관례입니다.

 

positon : static (기본) 이 아닌 상위 요소를 기준으로 잡고 위치를 잡는다는 말.

네이버 돔트리를 살펴보면

 

바로 상위의 요소인 div.autocomplete는 지정된 position 속성이 별도로 없으며

그 위의 요소인 (할매요소) div#search.search_area가 position: absolute 속성을 가지고 있어 해당 div를 기준으로 위치값을 잡게 된다.

 

div#search.search_area 요소는 바로 위의 요소인 div.group_flex 요소가 포지션 속성을 가지고 있어 해당 속성을 기준으로 위치를 잡고 있다.