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

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

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

---

1.  개발자 도구로 웹사이트 특정 요소 분석

1.1.  네이버 화면 분석

네이버 화면을 보면 크게 상단, 좌측, 우측 영역으로 구분된 것을 확인할 수 있다.

크롬 브라우저의 개발자 도구를 통해 해당 영역별로 어떤 요소들이 있는지 분석해 보자.

 

1.1.1. 상단영역

개발자 도구를 통해 선택된 네이버 상단 div#header

개발자 도구를 통해 선택된 네이버 상단 div#header를 살펴보자.

<div id="header" role="banner">
    <div class="special_bg">...</div>
        <!--EMPTY-->
    <div id="gnb" role="navigation">...</div>
</div>

... 으로 표기된 내용을 펼치면 보다 많은 태그를 가지고 있지만 큰 구조만 살펴보면 위와 같다.

처음에 우리가 눈으로 분석한 것과 비슷하게

div#header 영역 아래에  div.special_bg 영역과 div#gnb 영역이 위치하고 있음을 알 수 있다.

 

각 div 영역을 자세히 살펴보자.

<div class="special_bg">
    <div class="group_flex">...</div>
</div>

 

 

div.special_bg 아래의 div.group_flex를 펼쳐 살펴보면

<div class="special_bg">
    <div class="group_flex">
        <div class="logo_area">...</div>
        <div class="service_area">...</div>
        <div id="search" class="search_area" data-clk-prefix="sch">..</div>
    </div>
</div>

 

하위 요소로 

div.logo_area, div.service_area, div#search.search_area

총 세개의 div를 가지고 있는 것을 확인 가능하다.

 

div.group_flex 다음과 같은 CSS를 적용받는다.

margin 값을 좌우 auto로 주어 가운데 해당 div영역을 가운데 정렬 하였다.

padding 값을 좌우 30px을 주어 내부 여백을 추가하여 내부 요소들이 안쪽으로 조금 더 모여 보이도록 적용하였다.

<style>
	#header .group_flex {
		position: relative;
		width:1130px;
		height: 100%;
		margin: 0 auto;
		padding: 0 30px;
	}
</style>

 

1.1.1.1. 검색창

div.group_flex의 아래 요소 중 직접적인 검색창을 포함하고 있는  div#search.search_area 영역을 자세히 살펴보자.

<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;">...</a>
    <div id="_nx_kbd" style="display:none;"></div>
    <div class="autocomplete">...</div>
    <div id="autoFrame" class="reatcmp" style="display: none;">...</div>
</div>

 

<form>태그, <a>태그, <div> 태그 세개로 총 다섯개의 요소를 포함하고 있다.

 

<form> 태그 아래에는 <fieldset> 태그가 있으며

 

<fieldset>태그의 내용을 펼쳐보면 다음과 같다.

폼안의 여러 내용을 관계별로 묶을 수 있는 <fieldset> 태그와 <fieldset>의 이름을 지정해주는 <legend> 태그가 있다.

<fieldset>
	<legend class="blind">검색</legend>
	<input type="hidden" name="where" value="nexearch">
	<input type="hidden" id="sm" name="sm" value="top_hty">
	<input type="hidden" id="fbm" name="fbm" value="0">
	<input type="hidden" id="acr" name="acr" value="" disabled="disabled">
...
	<input type="hidden" id="pkid" name="pkid" value="" disabled="disabled">
	<input type="hidden" id="eid" name="eid" value="" disabled="disabled">
	<input type="hidden" id="mra" name="mra" value="" disabled="disabled">
	<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>

<legend>태그를 살펴보면 class blind를 가지고 있는데 해당 클래스에는 다음과 같은 css가 적용되고 있다.

<style>
	.blind {
		position: absolute;
		clip: rect(0 0 0 0);
		width:1px;
		height:1px;
		margin:-1px;
		overflow: hidden;
	}
</style>

 

<legend>태그를 사용하게 되면 각 <fieldset> 태그를 구분할 수 있는 이름을 지정해줄 수 있어 편하며, 인터넷이 느려서 디자인 요소를 적용하지 못하였을때도 필드명이 명시되어 사용자가 입력하기도 용이하다. 또 개발자의 관점에서도 유지보수가 편리하다.

하지만 화면에 텍스트가 노출되기 때문에 디자인을 해칠 수 있으므로 해당 legend에 적용되는 css에 clip 속성, overflow 속성을 통해 텍스트가 보이지 않도록 처리하였다. 해당 속성들을 제거하게 되면 다음과 같이 나타난다.

 

 

브라우저가 제공하는 개발자 도구를 사용하면 이러한 속성값들을 직접 변경해보고 확인하기가 가능해 웹문서 분석이 용이하다.