HTML 훈련 - (2) Google Search Result Item

위와 같은 구글 검색 결과창을 마크업해보자.
우선, 마크업의 기본은 파트를 크게 나눠보는 것이다!


위 예제같은 경우에는 크게 세가지 파트로 나눌 수 있겠다.

1. 맨 윗줄 - <h1>태그
2. 초록색 글자 부분 - <a>태그
3. 나머지 부분 - <p>태그.

이때, h1태그를 클릭해도 링크로 이동하므로 h1태그에 a태그도 감싸줘야한다.

 <h1> <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"> HTML5 Semantic Elements - W3Schools </a> </h1> <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"> https://www.w3schools.com › html › html5_semantic_elements </a> <p> Oct 27, 2019 - Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. ... HTML5 semantic elements are supported in all modern browsers. ... So, on the Internet, you will find HTML pages with <section> elements containing ... </p>

그런데 이때,
<p> 안의 내용은 우리가 보기에는
<div>와 <span> 그리고 <section>은 실제로 태그가 아니라 텍스트인데,
웹브라우저는 이를 태그로 인식해버린다.

따라서 이럴 때 우리는 웹브라우저가 헷갈리지 않도록

'escape code'을 사용해야한다. 이는 entity 라고도 한다.

https://www.freeformatter.com/html-entities.html

Complete list of HTML entities - FreeFormatter.com

구글링하여 찾아보면, 다양한 escape code들이 있다.

우리가 주로 사용하는 것은

< &lt; (= less than)
> &gt; (= grater than)
& &amp;

등이 있다.

따라서, <p>안의 내용을 escape code로 수정하면 다음과 같다.

<p> Oct 27, 2019 - Examples of non-semantic elements: &lt;div&gt; and &lt;span&gt; - Tells nothing about its content. ... HTML5 semantic elements are supported in all modern browsers. ... So, on the Internet, you will find HTML pages with &lt;section&gt; elements containing ... </p>

다음과 같이 <를 &lt; 로, >를 &gt;로 변경하여 텍스트화 한 것을 알 수 있다.

적용된 결과

- 그외에도 달러($) 기호나 / ⓒ 기호의 경우에도 escape code를 이용하여 작성할 수 있다.

$ // $ © // ©

위와 같이 작성한 코드 전체를 디자인을 위해 div 태그로 감싸주고, class명을 부여해주자.

<div class="google-search-result-item"> <h1> <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"> HTML5 Semantic Elements - W3Schools </a> </h1> <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"> https://www.w3schools.com › html › html5_semantic_elements </a> <p> Oct 27, 2019 - Examples of non-<strong>semantic elements</strong>: &lt;div&gt; and &lt;span&gt; - Tells nothing about its content. ... <br/> HTML5 <strong>semantic elements</strong> are supported in all modern browsers. ... So, on the Internet, you will find HTML pages<br/> with &lt;section&gt; elements containing ... </p> </div>

---

최종 결과

class명 / element에 맞게 설정된 style.css가 적용된 최종 결과이다.

아래 포스팅을 통해 간단하게 style.css 코드를 리뷰해보았다.

* { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; letter-spacing: -0.03em; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto; background-color: #f8f9fa; } body::after { content: "kimbug©"; display: block; margin-top: 50px; color: #1f2d3d; font-size: 12px; font-weight: 600; } .google-search-result-item { width: 100%; max-width: 640px; padding: 16px 20px; border-radius: 4px; background-color: #fff; } .google-search-result-item a { font-weight: 400; text-decoration: none; } .google-search-result-item h1 { margin-bottom: 0; font-size: 20px; line-height: 1.3; } .google-search-result-item h1 a { color: #1a0dab; } .google-search-result-item > a { margin-bottom: 4px; letter-spacing: 0.02em; font-size: 16px; line-height: 1.5; } .google-search-result-item > a { color: #006621; } .google-search-result-item p { font-size: 14px; line-height: 1.57; color: #545454; letter-spacing: -0.01em; } .google-search-result-item p strong { font-weight: 700; }

https://mywebproject.tistory.com/88

REFERENCE

https://github.com/rohjs/bugless-101/blob/practice/html-practice/02-google-search-result-item/styles.css

GitHub - rohjs/bugless-101: 👾 김버그의 버그 없는 HTML & CSS 강의자료