안녕하세요 이번 포스팅에서는
저번 다음 UI 만들기 포스팅에 대해서 제가 작성한 솔루션을 알려드리고자 작성하겠습니다.
바로 코드부터 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>다음 ui 실습</title>
<link rel = "icon" href="img/daum_favicon.ico"/>
</head>
<body>
<a href="https://daum.net"><img src="img/daum_logo.png" width="30%" alt="다음로고"/></a><br/>
<h1>검색</h1>
<form action="https://search.daum.net/search">
<fieldset>
<legend>통합검색</legend>
<input name="q", size="30" placeholder="검색어 입력">
<button type="submit" formtarget="_blank">검색</button>
</fieldset>
</form>
<a href="http://cs.daum.net/faq/15/14957.html#28978" target="_blank">서제스트란?</a>
<h2>인기 검색어</h2>
<ul>
<li><a href="https://search.daum.net/search?w=tot&q=%EC%B4%88%EB%93%B1%ED%95%99%EA%B5%90+%EA%B5%90%EC%82%AC+%EC%82%AC%EB%A7%9D&DA=NPI" target="_blank">
초등학교 교사 사망
</a></li>
<li><a href="https://search.daum.net/search?w=tot&q=%EA%B9%80%EC%A7%80%EC%9D%80+%EC%95%88%ED%9D%AC%EC%A0%95&DA=NPI" target="_blank">
김지은 안희정
</a></li>
<li><a href="https://search.daum.net/search?w=tot&q=%EC%8B%A0%EC%84%B1%EC%9A%B0+%EC%95%84%EB%82%B4&DA=NPI" target="_blank">
신성우 아내
</a></li>
<br/>
<li><a href="https://search.daum.net/search?w=tot&q=%EC%96%91%EC%8A%B9%ED%83%9C+%EB%8F%84%EB%A7%9D&DA=NPI" target="_blank">
양승태 도망
</a></li>
<li><a href="https://search.daum.net/search?w=tot&q=%EC%9D%B4%EC%9E%AC%EB%AA%85+%EC%95%95%EC%88%98%EC%88%98%EC%83%89&DA=NPI&rtmaxcoll=NNS" target="_blank">
이재명 압수수색
</a></li>
<li><a href="https://search.daum.net/search?w=tot&q=%EB%B0%A9%EC%86%A1%EC%82%AC+%EB%A8%B9%EB%B0%A9+%ED%8F%AD%EB%A1%9C&DA=NPI" target="_blank">
방송사 먹방 폭로
</a></li>
</ul>
<button type = button><이전</button>
<button type="button">다음></button><br/>
<a href="https://www.daum.net/doc/startpage.html">다음을 시작페이지로</a>
<h2>전체 서비스</h2>
<dl>
<dt>미디어</dt>
<dd><a href="http://media.daum.net/?nil_profile=mini&nil_src=news">뉴스</a></dd>
<dd><a href="http://sports.media.daum.net/">스포츠</a></dd>
<dd><a href="http://agora.media.daum.net/">아고라</a></dd>
</dl>
<h2>오늘의 정보</h2>
<h3>07.11(수)</h3>
<ul>
<li><a href="javascript:void(0);">날씨 서울시 <b>흐림</b><i>영상 29도 29°C</i></a></li>
<li><a href="javascript:void(0);">날씨 경기도 <b>흐림</b><i>영상 29도 29°C</i></a></li>
</ul>
<hr/>
<a href="https://search.daum.net/search?nil_suggest=btn&nil_ch=&rtupcoll=&w=tot&m=&f=&lpp=&DA=SBC&sug=&sq=&o=&sugo=&q=%EC%9E%90%EB%8F%99%EC%B0%A8" target="_blank">
<img src="img/senna.jpg" width = 30% alt="광고"></a>
<form>
<fieldset>
<legend><img src="img/daum_favicon.ico" width="50%" alt = '파비콘'></legend>
<input type="text" id="id" placeholder="아이디"><button>로그인</button>
</fieldset>
</form>
<p>Copyright © <a href="http://www.kakaocorp.com/" target="_blank">KaKao Corp</a>
All service</p>
</body>
</html>
이번 코드에서는 주석을 달지 않았는데요
차근차근 하나씩 설명을 드리고자 하기위하여 주석을 제거했습니다.
첫번째 줄부터 시작을 해보면 아직 배우지 않은 link 요소에대해서 나오게되었는데 <link rel = "icon" href="img/daum_favicon.ico"/>
이 구문을 보게되면 rel 과 href 에 값이 들어갑니다. 처음에 배운 속성에서 나타나는데 이름이 rel 이고 값이 icon인 rel 속성이라고 보시면 됩니다.
풀어서 쓰자면 link요소에는 rel 이라는 속성과 href 속성을가지게 된다 이말입니다. rel 속성은 Relation의 줄임말이며, href는 hyperlink reference 의 줄임말입니다. 근데 이 구문이 어디에 적용 되냐면 사실 학습하지 않은 '파비콘' 입니다.
'파비콘' 에 대해서는 다음 포스팅에서 더 자세히 다룰까 하는데 우선 파비콘이란건 사진을 보면 한번에 알 수 있습니다.
이렇게 파란색으로 표시를 해놓은 항목들이 바로 파비콘이라고 불립니다.
어느정도 이해가 가셨나요 ?
그리고 다음 라인을 가시게 되면 a 요소 안에 img 요소가 들어있어 img는 다음 로고를 보여주는 화면이 나오게됩니다.
그 밑 h1 요소에 검색이란 항목이 생겼는데 검색이나 회원가입 로그인 등은 사용자가 작성한 정보 즉, 클라이언트가 서버로 데이터를 넘기는데 이 데이터가 바로 파라미터 라고 한다. 다시말해서 클라이언트가 서버로 파라미터를 전송하기 위하여 form 요소를 써 주어야 합니다.
form 안에는 사진과 같이 여러 요소들이 입력이 되었는데 사진으로 설명을 기재하겠습니다.
이 사진을 보면 어느정도 이해가 가시겠지요 ? 여기까지 잘 하셨다면 아래부분도 무리없이 진행을 하셨을 겁니다.
h요소와 ul, dl 요소를 이용하여 리스트를 만들어서 리스트 안에는 a 요소를 주어 하이퍼링크를 주게되는 이런 형식이죠
하나 안배운것이 있었는데
바로 이 구문에서 입니다.
<li><a href="javascript:void(0);">날씨 서울시 <b>흐림</b><i>영상 29도 29°C</i></a></li>
<li><a href="javascript:void(0);">날씨 경기도 <b>흐림</b><i>영상 29도 29°C</i></a></li>
이 구문에서는 b라는 요소와 i라는 요소가 써있었는데요 href안에 자바스크립트 보이드~ 이런건 가볍게 무시해주시면 됩니다.
아직 학습하지 않은 내용일 뿐더러 다음 사이트에서 직접 가져와 붙여넣기 해본 것이므로 아무 상관이 없습니다. 빈칸으로 놔 두셔도 무방합니다.
여기서 b라는 요소는 bold 요소 i는 itelic이라고 하는데 볼드체와 이탤릭 체라고 보시면 됩니다. 글자를 두껍게 해주고 기울임을 주는거라 생각하시면 됩니다.
마지막으로 배운 ° 라는것은 엔티티 기호로 사용 되는건 아시겠죠?
마지막 부분에도 마찬가지로 엔티티 기호가 써져있으며, 폼이 또 생성이 되었네요
이정도면 알고 계신걸로 충분히 쉽게 만드셧을거라 생각합니다.
이번 포스팅은 여기서 마무리를 하고 다음 포스팅에서 뵙겠습니다.
'Front-end > HTML' 카테고리의 다른 글
| 7. Font Awesome (0) | 2018.07.25 |
|---|---|
| 6. 파비콘과 내부링크 (0) | 2018.07.24 |
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |
| 4. Form 요소 와 엔티티 기호 (0) | 2018.07.23 |
| 3. 이미지와 하이퍼링크 (0) | 2018.07.22 |