html 관련 질문이요~!!

비공개 조회수 5,262 2015.12.01

html 기본 문법만을 이용해서 틀을 잡는게 가능한가요?

문제를 구체적으로 말씀드리자면, width, height, margin, padding, display, position 만을 이용해서 네이버 메인과 똑같은 틀을 만들어 구성하고, 사용되는 태그는 <div> 만으로 구성되어야 한다. 그 외에는 문법 사용에 제한은 없다

입니다. 위의 조건만을 이용해서 네이버 메인과 같도록 구성하여야 하는데요, 어떤식으로 가능한지 소스코드좀 부탁드립니다.

답변자님,

정보를 공유해 주세요.

1 개 답변

레오

고수

웹사이트 제작, 운영 분야에서 활동

<!doctype html>

<head>

<title>NAVER</title>

//<![CDATA[

document.domain = "naver.com";

history.navigationMode = 'compatible';

var nsc = "navertop.v3";

var jindoAll = "http://s.pm.naver.net/js/c/jindo.all.20150511.min.js";

</script>

var isLogin = "lightreo";

var global = {

isSupportedFlicking : false,

isIPAD : false

};

var strHost = "www.naver.com";

var isMobile = false;

var isMyCast = false;

var svr = "";

var LogError=function(b){var a=new Image();a.src="http://cecs.naver.com/?m="+b+"&u="+document.location+"&l=1115"};DLScript={quSXI:new Array(),quS:new Array(),retry:0,isLoad:function(a){for(var b=this.quS.length-1;

b>=0;b--){if(this.quS[b]===a){return true}}return false},_runOnload:function(b,d,c){if(!d){return}var a=b.readyState;if(typeof a==="undefined"&&!b.onloadDone){b.onloadDone=true;(c)?setTimeout(d,100):b.onload=d;

return}if(("loaded"===a||"complete"===a)&&!b.onloadDone){b.onloadDone=true;setTimeout(d,100)}else{if(this.retry<10){this.retry++;setTimeout(function(){DLScript._runOnload(b,d,c)},10)}}},_createJSDom:function(c,b){var a=document.createElement("script");

if(b=="src"){a.src=c}else{a.text=c}return a},_appendJSDom:function(a){document.getElementsByTagName("head")[0].appendChild(a)},loadDS:function(b,d,c){if(!this.isLoad(b)){this.quS[this.quS.length]=b;var a=this._createJSDom(b,"src");

this._runOnload(a,d,c);this._appendJSDom(a)}else{if(d){setTimeout(d,100)}}},loadXI:function(c,i,g,d){if(!this.isLoad(c)){this.quS[DLScript.quS.length]=c;var h=this.quSXI.length;if(d){var a={response:null,onload:g,done:false};

DLScript.quSXI[h]=a}if(typeof window.localStorage!="undefined"){try{var b=window.localStorage.getItem(c+"_uid");var m=window.localStorage.getItem(c)}catch(j){if(j.description){LogError("[DL] localStorge get : "+j.description)

}}if(m&&i&&b==i){if(d){DLScript.quSXI[h].response=m;DLScript.injectScripts()}else{var f=DLScript._createJSDom(m,"text");DLScript._runOnload(f,g,true);DLScript._appendJSDom(f)}return}}var k=DLScript.getXHRObject();

if(!k){LogError("[DL] XHRObject is NULL");this.loadDS(c,g);return}k.onreadystatechange=function(){if(k.readyState==4){if(k.status==200||k.status==0){var o=k.responseText;try{if(typeof window.localStorage!="undefined"&&i){DLScript.clearLS();

window.localStorage.setItem(c,o);window.localStorage.setItem(c+"_uid",i)}}catch(p){if(p.description){LogError("[DL] localStorge set : "+p.description)}}if(d){DLScript.quSXI[h].response=o;DLScript.injectScripts()

}else{var n=DLScript._createJSDom(o,"text");DLScript._runOnload(n,g,true);DLScript._appendJSDom(n)}}else{LogError("[DL] status is not 200(0) - "+k.status);DLScript.removeUrl(c);DLScript.clearLS();setTimeout(g,100)

}}};var l="";if(i){l=(c.indexOf("?")>0)?"&"+i:"?"+i}k.open("GET",c+l,true);k.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");k.setRequestHeader("charset","utf-8");k.send("")

}else{if(g){setTimeout(g,100)}}},injectScripts:function(){var a=DLScript.quSXI.length;for(var c=0;c<a;c++){var d=DLScript.quSXI[c];if(!d.done){if(!d.response){break}else{d.done=true;var b=DLScript._createJSDom(d.response,"text");

DLScript._runOnload(b,d.onload,true);DLScript._appendJSDom(b)}}}},getXHRObject:function(){var c=false;try{c=new XMLHttpRequest()}catch(f){var b=["Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0"];

},clearLS:function(){if(typeof window.localStorage!="undefined"){try{window.localStorage.clear()}catch(a){if(a.description){LogError("[DL] clearLS : "+a.description)}}}},removeUrl:function(a){for(var b=this.quS.length-1;

b>=0;b--){if(this.quS[b]===a){this.quS[b]=""}}}};

DLScript.loadDS("http://s.pm.naver.net/js/c/JEagleEyeClient_20120111.min.js?v=2");

function refreshLcs(etc) {if(document.cookie.indexOf("nrefreshx=1") != -1) {etc=etc?etc:{};etc["mrf"]="1";return etc;}return null;}

lcs_do(refreshLcs());

//]]>

</script>

</head>

<a href="#news_cast2" onclick="document.getElementById('news_cast2').tabIndex = -1;document.getElementById('news_cast2').focus();return false;"><span>뉴스스탠드 바로가기</span></a>

<a href="#themecast" onclick="document.getElementById('themecast').tabIndex = -1;document.getElementById('themecast').focus();return false;"><span>주제별캐스트 바로가기</span></a>

<a href="#time_square" onclick="document.getElementById('time_square').tabIndex = -1;document.getElementById('time_square').focus();return false;"><span>타임스퀘어 바로가기</span></a>

<a href="#shop_cast" onclick="document.getElementById('shop_cast').tabIndex = -1;document.getElementById('shop_cast').focus();return false;"><span>쇼핑캐스트 바로가기</span></a>

<a href="#com_cast" onclick="document.getElementById('com_cast').tabIndex = -1;document.getElementById('com_cast').focus();return false;"><span>미니네이버me 바로가기</span></a>

</div>

<p>네이버 메인을 나눔글꼴로 보기 위해서는<br><span> 나눔글꼴을 설치</span>해야 합니다.<br>나눔글꼴을 설치하시겠습니까?</p>

</div>

<p>개인 및 기업을 포함, 모든 사용자가 무료로 사용 가능합니다.</p>

</div>

</span>

</div>

</div>

<p>고객님의 PC에서 나눔글꼴이 확인되지 않습니다.<br>나눔글꼴로 메인을 보기위해서는<span>나눔글꼴 재설치</span>가 필요합니다.<br>

<strong>나눔글꼴을 다시 설치하시겠습니까?</strong></p>

<p class="txt_nanum">나눔글꼴이 확인되지 않는 이유는 나눔글꼴 최초설치가 제대로<br>완료되지 않은 경우, 설치된 폰트를 임의로 삭제한 경우에 발생합니다.</p>

</div>

<p>개인 및 기업을 포함, 모든 사용자가 무료로 사용 가능합니다.</p>

</div>

</span>

</div>

</div>

</div>

<li id="nav_hm2" class="m2"><a href="http://se.naver.com/" onclick="clickcr(this,'HNB.search','','',event);" accesskey="2"><span class="nav_hm2_ly nav_hm2_ly2">가볍고 빠른 검색홈, <span>네이버SE</span></span></a></li>

<li id="nav_hm3" class="m3"><a href="http://me.naver.com/" onclick="clickcr(this,'HNB.desk','','',event);" accesskey="3"><span class="nav_hm2_ly nav_hm2_ly3">나만의 네이버 홈, <span>네이버me</span></span></a></li>

</ul>

<li class="makeHomePage hide"><a href="#mkhome" id="mkhome" onclick="clickcr(this,'top.mkhome','','',event);this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.naver.com');ToolBar.popup();return false;">네이버를 시작페이지로</a></li>

<p class="tit">네이버 앱을 설치하세요!</p>

<legend>다운로드URL 문자받기</legend>

<span class="txtsm">다운로드URL 문자받기</span>

<label class="" for="app_phone">휴대폰번호 입력</label>

</fieldset>

<p class="desc">입력하신 번호는 저장되지 않고, 전송은 무료입니다.</p>

<li><a href="#n_drive">N드라이브</a></li>

</ul>

</div>

</li>

<li class="first"><span class="">현재</span><a href="#" onclick="return false;">시스템글꼴</a></li>

</ul>

<ul>

<li><a href="http://hangeul.naver.com/" onclick="clickcr( this, 'top.fontcampaign', '', '', event );" >네이버 한글캠페인</a></li>

</ul>

</div>

</li>

</ul>

</div>

</map>

</div>

//<![CDATA[

var slidingCookieName = "naverSetHomepage";

var slidingCookieExpDate = 1;

var slidingOneTimeLink = 1;

//]]>

</script>

</div>

<h1>

</map>

</h1>

<hr />

<option value="jpdic">- 일본어사전</option>

</optgroup>

<option>긍정부정검색</option>

</optgroup>

</select>

</fieldset>

</form>

</div>

<h3 class="tit">생각한대로 검색해 보세요 <span class="beta">Beta</span></h3>

</ul>

</div>

</div>

</div>

<p class="func"><span class="fl"><a onclick="__atcmpCR(event, this, 'help', '','','');" href="https://help.naver.com/support/service/main.nhn?serviceNo=606&categoryNo=1987" target="_blank">도움말</a> | <a onclick="__atcmpCR(event, this, 'report', '','','');" href="https://help.naver.com/support/contents/contents.nhn?serviceNo=606&categoryNo=2028" target="_blank">신고</a></span><span><em><a class="hisoff" href="javascript_:;">검색어저장 켜기</a> |</em><a class="funoff" href="javascript_:;" onclick="smartSearch.unuse(); return false;">자동완성 끄기</a></span></p>

</div>

</div>

<div class="words"><p class="msg">자동완성 기능이 활성화되었습니다.</p></div>

</div>

</div>

<ul><li class="on _recentTab"><a href="javascript_:;">최근검색어</a></li><li class="_myTab"><a href="javascript_:;">내 검색어</a></li></ul>

</div>

<div class="info_words _recentNone" style="display:none;">최근검색어 내역이 없습니다.</div>

</div>

<div class="info_words _myNone" style="display:none;">설정된 내 검색어가 없습니다.<br />최근검색어에서 <span class="star">내 검색어 등록</span>를 선택하여 자주 찾는 검색어를<br />내 검색어로 저장해 보세요.</div>

</div>

<p class="noti _noti" style="display:none;">공용 PC에서는 개인정보 보호를 위하여 반드시 로그아웃을 해 주세요.</p>

<p class="func _recentBtnGroup"><span class="fl"><a class="_delMode" href="javascript_:;">기록 삭제</a></span><span><a class="_keywordOff" href="javascript_:;">검색어저장 끄기</a> | <a class="_acOff" href="javascript_:;">자동완성 끄기</a></span></p>

<p class="func _myBtnGroup" style="display:none;"><span class="fl"><a class="_delAll" href="javascript_:;" title="설정된 내 검색어를 모두 삭제합니다.">기록 전체 삭제</a></span><span><a class="_keywordOff" href="javascript_:;">검색어저장 끄기</a> | <a class="_acOff" href="javascript_:;">자동완성 끄기</a></span></p>

<span class="help2 _help2" style="display:none;">기능을 다시 켤 때는 펼치기 버튼을 클릭하세요</span>

<p><span class="ico"></span>내 검색어는 최대 <em>10</em>개 까지 저장할 수 있습니다.<br />추가하시려면 기존 내 검색어를 지워주세요. <a href="javascript_:;" class="btn_clse _close">닫기</a></p>

</div>

<p class="dsc_txt">2015 상반기 재보궐선거 후보에 대해 4월29일 선거일까지 자동완성 기능이 제공되지 않습니다.<a href="http://naver_diary.blog.me/220323218769" target="_blank" onclick="clickcr(this,'sug.vote','','',event);">자세히보기</a></p>

</div>

</div>

<span class="dsc_thmb" style="@style7@;">@image7@</span>

</span>

</a>

</div>

</script>

</a>

</div>

</script>

</span>

</a>

</div>

</script>

</span>

</span>

</a>

</div>

</script>

</span>

</span>

</a>

</div>

</script>

</span>

</span>

</a>

</div>

</script>

</a>

</div>

</script>

</a>

</div>

</script>

</li>

</script>

@mismatch_before@<strong>@match@</strong>@mismatch_after@

</script>

@mismatch_before@<strong>@match@</strong>@mismatch_after@

</script>

</div>

</div>

</div>

<hr />

<dd><a href="http://tvcast.naver.com/" id="svc.tvcast" class="mn_tvcast"><span></span>TV캐스트</a></dd>

</dl>

</dl>

<dl>

</dl>

</div>

<dd>

<li value="1" class="new"><a href="http://search.naver.com/search.naver?where=nexearch&query=%EC%9B%90%EB%8D%94%EB%B3%B4%EC%9D%B4%EC%A6%88&sm=top_lve&ie=utf8" title="원더보이즈">원더보이즈<span class="tx">NEW</span><span class="ic"></span></a></li>

<li value="9" class="up"><a href="http://search.naver.com/search.naver?where=nexearch&query=%ED%95%9C%EA%B5%AD%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95%ED%8F%89%EA%B0%80%EC%9B%90&sm=top_lve&ie=utf8" title="한국교육과정평가원">한국교육과정평..<span class="tx">상승</span><span class="ic"></span><span class="rk">114</span></a></li>

<li id="lastrank" value="1" class="new"><a href="http://search.naver.com/search.naver?where=nexearch&query=%EC%9B%90%EB%8D%94%EB%B3%B4%EC%9D%B4%EC%A6%88&sm=top_lve&ie=utf8" title="원더보이즈">원더보이즈<span class="tx">NEW</span><span class="ic"></span></a></li>

</ol>

<option value="원더보이즈">1위: 원더보이즈</option>

<option value="한국교육과정평가원">9위: 한국교육과정평가원</option>

</select>

</form>

</noscript>

</dd>

</dl>

</div>

<hr />

<div id="ad_top"><iframe id="da_iframe_time" name="da_iframe_time" src="http://nv1.ad.naver.com/adshow?unit=002AN&nrefreshx=0" title="광고" width="635" height="100" marginheight="0" marginwidth="0" scrolling="no" frameborder="0">광고 : <a href="http://nv1.ad.naver.com/adshow?unit=002AN&nrefreshx=0">http://nv1.ad.naver.com/adshow?unit=002AN&nrefreshx=0</a></iframe></div>

<ul>

<li><a href="http://news.naver.com/main/list.nhn?mode=LPOD&mid=sec&sid1=001&sid2=140&oid=001&isYeonhapFlash=Y&aid=0008023679">'21세기 신종전염병' 비만과 전쟁나선다</a></li>

</ul>

</div>

<li><a href="http://news.naver.com/" onclick="clickcr(this, 'ncy.newshome', '', '', event)" style=""><strong>네이버뉴스</strong></a></li><li>|<a href="http://entertain.naver.com/home" onclick="clickcr(this, 'ncy.entertainment', '', '', event)">연예</a></li><li>|<a href="http://sports.news.naver.com/sports/new/main/index.nhn" onclick="clickcr(this, 'ncy.sports', '', '', event)">스포츠</a></li><li>|<a href="http://news.naver.com/main/main.nhn?mode=LSD&mid=shm&sid1=101" onclick="clickcr(this, 'ncy.economy', '', '', event)">경제</a></li><li>|<a href="http://news.naver.com/main/ranking/popularDay.nhn?mid=etc&sid1=111" onclick="clickcr(this, 'ncy.special2', '', '', event)"><strong>랭킹뉴스</strong></a></li>

</ul>

</div>

<h2><a href="http://newsstand.naver.com/" target="_blank" onclick="clickcr(this,'nsd.title','','',event);" id="news_h" name="news_h" class="h_news">뉴스스탠드</a></h2>

<a href="#" id="press" class="on" onclick="clickcr(this,'nsd.all','','',event); return false;">전체언론사</a>

</div>

</div>

<a href="#" class="btn_nctg" onclick="return false;">주요언론사</a>

<li class="on"><a href="#ct1">주요언론사</a></li>

</ul>

</div>

</ul>

</div>

</div>

</div>

<h3 class="">전체언론사</h3>

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

<!--

<a href="http://news.naver.com/main/ombudsman/readView.nhn?notiId=320&notiDel=N" target="_blank" class="mm_noti">[알림] 언론사별 주요뉴스를 메인에서 바로 볼 수 있어요!</a>

-->

</div>

<span>

</span>

<a href="#ns_prev" class="pre" title="이전페이지" onclick="return false;">이전페이지</a><a href="#ns_next" class="next" title="다음페이지">다음페이지</a>

</div>

<span>

</span>

<a href="#ns_prev" class="pre" title="이전페이지" onclick="return false;">이전페이지</a><a href="#ns_next" class="next" title="다음페이지">다음페이지</a>

</div>

</div>

</div>

<h2 class=""><a href="#time_h" id="time_h" name="time_h">타임스퀘어</a></h2>

</a>

</p>

</div>

//<![CDATA[

var tsbCookieName = "7802DF01_0000000DECC1";

var tsbCookieExpDate = 30;

var tsbOneTimeLink = 0;

//]]>

</script>

</a>

</div>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</span>

</span>

</span>

</a>

</div>

<li>

</li>

<li>

<a href="http://search.naver.com/search.naver?sm=top_tsi&where=nexearch&query=%EB%8F%84%EC%8B%9C%EA%B3%A0%EC%86%8D%ED%99%94%EB%8F%84%EB%A1%9C%EA%B5%90%ED%86%B5%EC%A0%95%EB%B3%B4" onclick="clickcr(this, 'squ.text','78005501_0000000DD844', '', event)" title="도시고속화도로 상황">도시고속화도로 상황</a>

</li></ul>

</div>

</div>

</div>

</div>

<h2 class="">주제형캐스트</h2>

<span class="tcc_lif"><a data-code="tcc_lif" href="#tcc_lif"><span class="ir">라이프</span></a></span> <span class="tcc_spo"><a data-code="tcc_spo" href="#tcc_spo"><span class="ir">스포츠</span></a></span> <span class="tcc_aut"><a data-code="tcc_aut" href="#tcc_aut"><span class="ir">차/테크</span></a></span> <span class="tcc_web"><a data-code="tcc_web" href="#tcc_web"><span class="ir">웹툰</span></a></span> <span class="tcc_gam"><a data-code="tcc_gam" href="#tcc_gam"><span class="ir">게임</span></a></span> <span class="tcc_tvc"><a data-code="tcc_tvc" href="#tcc_tvc"><span class="ir">TV/동영상</span></a></span> <span class="tcc_muc"><a data-code="tcc_muc" href="#tcc_muc"><span class="ir">뮤직</span></a></span> <span class="tcc_mov"><a data-code="tcc_mov" href="#tcc_mov"><span class="ir">영화</span></a></span> <span class="tcc_bok"><a data-code="tcc_bok" href="#tcc_bok" class="on"><span class="ir">책</span></a></span> <span class="tcc_ncc"><a data-code="tcc_ncc" href="#tcc_ncc"><span class="ir">네이버캐스트</span></a></span> <span class="tcc_occ"><a data-code="tcc_occ" href="#tcc_occ"><span class="ir">오픈캐스트</span></a></span> <span class="tcc_pub"><a data-code="tcc_pub" href="#tcc_pub"><span class="ir">공익/나눔</span></a></span>

</div>

</span>

<span class="s">놓칠 수 없는, 같은 듯 다른 영화와 책</span><strong class="t">심장쫄깃한 추격전 '대호' vs '밀림무정'</strong></span>

</a>

</li>

</span>

</a>

<a href="http://book.naver.com/bookdb/review.nhn?bid=9770927" onclick="return clickcr(this,'tcc_bok.origin','7803E801_00000002C0D5','', event);">하루 세 줄 마음정리법</a></span>

</li><li class="copy" data-seq="151584" >

</span>

</a>

</li><li class="copy" data-seq="151105" >

</span>

</a>

<a href="http://book.naver.com/bookdb/book_detail.nhn?bid=9822483" onclick="return clickcr(this,'tcc_bok.origin','7803E801_00000002BECA','', event);">반농반X의 삶</a></span>

</li><li class="copy" data-seq="151590" >

</span>

</a>

</li><li class="copy" data-seq="151580" >

</a>

</li><li class="copy" data-seq="151585" >

</span>

</a>

</li><li class="copy" data-seq="151614" >

</span>

</a>

</li><li class="copy" data-seq="151545" >

</span>

<span class="t">천재 피아니스트 랑랑의 내한공연</span>

</a>

</li><li class="copy" data-seq="151565" >

</span>

</a>

</li><li class="copy" data-seq="151126" >

</a>

</li></ul>

</div>

</span>

<span class="t">세계문학축제 '헤이 페스티벌'</span>

</a>

</li>

</span>

</a>

<span>파이낸셜뉴스</span><span class="bar"> | </span>

</li>

</ul>

</div>

</span>

</a>

</li>

</span>

</a>

<span>서울프린스호텔</span></span>

</li>

</ul>

</div>

<a href="#" class="tc_set">선호주제설정</a>

<dd>

<a href="http://book.naver.com/bestsell/bestseller_list.nhn" onclick="return clickcr(this,'tcc_bok.link','','', event);"> 베스트셀러 </a><a href="http://blog.naver.com/nv_bc" onclick="return clickcr(this,'tcc_bok.link','','', event);"> 책문화 블로그</a><a href="http://navercast.naver.com/magazine_list.nhn?cid=2267&category_id=2267&type=book" onclick="return clickcr(this,'tcc_bok.link','','', event);"> 북캐스트</a><a href="http://nstore.naver.com/ebook/top100List.nhn" onclick="return clickcr(this,'tcc_bok.link','','', event);"> eBook 베스트셀러</a><a href="http://section.blog.naver.com/sub/PostListByDirectory.nhn?option.directorySeq=5" onclick="return clickcr(this,'tcc_bok.link','','', event);"> 책 관련 블로그 글 보기</a></dd>

</dl>

</div><div class="cpg tc_cpg">

<a href="#" class="pre" title="이전캐스트">이전캐스트</a><a href="#" class="next" title="다음캐스트">다음캐스트</a>

</div></div>

</div>

</div>

</div>

<li>

<span class="des">방문자를 회원으로<br/>쉽고 빠르게 로그인시키는 법</span>

</span>

</a>

</li>

<li>

<span class="des">두근두근 소프트웨어와 첫만남<br/>재미있는 미션에 참여하세요</span>

</span>

</a>

</li>

</a>

</li>

</ul>

</div>

</div>

<hr />

</dl>

</p>

<dd><a href="https://submit.naver.com/" id="plc.search">검색등록</a><span class="icon ico_update">Update</span></dd>

<dd><a href="rules/privacy.html" id="plc.privacy"><strong>개인정보취급방침</strong></a></dd>

<dd><a href="rules/youthpolicy.html" id="plc.youth">청소년보호정책</a></dd>

</dl>

</div>

</body>

</html>

2015.12.01.

채택
질문자가 채택한 답변입니다.
출처
네이버메인

도움이 되었다면 UP 눌러주세요!
UP이 많은 답변일수록 사용자들에게 더 많이 노출됩니다.

공식블로그 바로가기

NAVER

지식iN

검색영역

메인 메뉴