[TestDome] HTML/CSS and JavaScript: Semantics (HTML5, CSS3)

PROGRAMMING/Web

by koharin 2021. 1. 31. 16:33

728x90

<!DOCTYPE html> 
<!-- Semantic elements -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Semantics</title>
  </head>
  <body>
    <article>
      <h1>Lorem Ipsum</h1>
      
      <figure>
        <img src="https://goo.gl/zF9eky" alt="Lorem Ipsum">
        <figcaption>Lorem Ipsum</figcaption>
      </figure>
      
        <details>
        <summary>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Mauris lacinia scelerisque nibh nec gravida. 
          Duis malesuada nec nibh sit amet pulvinar. 
          Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel. 
          Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros. 
          Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus. 
          Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum. 
          Nam fermentum posuere mauris, quis aliquam nibh dictum sed.
        </p>
        </details>
    </article>
  </body>
</html>

<div> 태크를 <article>, <details>, <summary> 등과 같은 semantic element들로 바꾸면 된다.
처음에는 "Lorem ipsum dolor sit amet, consectetur adipiscing elit..." 문자열을 눌렀을 때 하위의 <p> 태그의 글이 사라지고 나타나도록(toggle) 하는 것으로 이해하고 문자열 태그를 <a href="javascript:show('hide')"> 으로 바꾸고, javascript로 show() 함수를 구현해서 d.style.display == 'none'일 때 'block', 아닐 때 'none'이 되도록 했는데 틀렸었다.
코드 제목이 semantic이고, 문제에서 요구하는걸 자세히 읽어보니 semantic elements를 찾아서 알게됐고, 서치하면서 고쳐갔다.

1. <div> 태그 바꾸기

<body> 내 전체적으로는 <article> 태그로 묶어줬다.

2. image, caption 바꾸기

caption은 이미지에 대한 설명으로 <figcaption> 태그로 바꿨다.
image와 이미지에 대한 설명인 caption은 <figure> 태그로 문서 내 이미지를 나타내는데 사용했다.

3. "Lorem ipsum dolor sit amet, consectetur adipiscing elit..."를 눌렀을 때, 하위의 <p> 태그 내 텍스트들이 보이고, 보이지 않도록(toggled) 하기

"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."는 <details>태그 안에 <summary>태그로 바꾸면, 아래와 같이 문장 앞에 화살표 표시가 생긴다.

<summary>가 없으면 문자열도 세부정보 안으로 들어가게 돼서, <summary>의 텍스트로 "Lorem ipsum dolor sit amet, consectetur adipiscing elit..." 문자열을 준다.
코드를 완성하면, 아래와 같이 웹에서 나타난다.

728x90

저작자표시 비영리 변경금지

'PROGRAMMING > Web' 카테고리의 다른 글

[JavaScript] JavaScript #5: 실행 컨텍스트 (0)	2021.02.01
[JavaScript] this (0)	2021.02.01
[TestDome] HTML/CSS and JavaScript with jQuery: fix the bugs (ECMAScript 6, jQuery v3.4.1) (0)	2021.01.31
[TestDome] HTML/CSS and JavaScript: Image Gallery (ECMAScript 7) (0)	2021.01.31
[TestDome] HTML/CSS and JavaScript: check digit (ECMAScript 7) (0)	2021.01.31