나만의 개발노트

[JS프로젝트] 7. QnA 게시판 만들기 본문

[실습]/[실습] 프론트엔드

[JS프로젝트] 7. QnA 게시판 만들기

노트포미 2023. 5. 17. 22:37

[나의 코드]

- index.html

...
<body>
	<-- title -->
    <div class="title">
      <h2>general questions</h2>
    </div>
    <-- question list -->
    <ul class="section-center">
      <li class="question">
        <div class="question-title">
          <p>Do You Accept All Major Credit Cards?</p>
          <button class="question-btn">
            <i class="fa-regular fa-square-plus plus-icon"></i>
            <i class="fa-regular fa-square-minus minus-icon"></i>
          </button>
        </div>
        <aside class="question-text">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            Est dolore illo dolores quia nemo doloribus quaerat, magni 
            numquam repellat reprehenderit.</p></aside>
       </li>
      
       <li class="question"> ...
   </ul>
<body>

*그림으로 보기

[더 나은 코드]

- index.html

-> sidebar 클래스를 div 가 아닌 aside로 사용함

 

- aside태그

  : 별도 구획 요소 - 문서의 주요 내용과 간접적으로만 연관된 부분. 주로 사이드바 혹은 콜아웃 박스를 표현한다.

 

전체 코드 보기

https://github.com/mokjakA/std_JS

 

GitHub - mokjakA/std_JS

Contribute to mokjakA/std_JS development by creating an account on GitHub.

github.com

 

프로젝트 참고

https://www.freecodecamp.org/news/javascript-projects-for-beginners/#how-to-create-a-review-carousel

'[실습] > [실습] 프론트엔드' 카테고리의 다른 글

[JS프로젝트] 5. Sidebar 만들기  (0) 2023.05.15
[JS프로젝트] 4. Navbar 만들기  (0) 2023.05.12
[JS프로젝트] 2. 버튼으로 숫자 카운트  (0) 2023.05.03
[JS프로젝트] 1. 배경색상 랜덤하게 만들기 _ 230419(수)  (0) 2023.04.19
'[실습]/[실습] 프론트엔드' Related Articles more