정보보안

HTML 기초태그: 간단한 홈페이지 만들기

영민하게 2022. 5. 25. 23:46
반응형

HTML 기초 태그에 대해 알아보고 간단한 웹페이지를 제작해본다.

 

1. HTML구조 & 주석처리

<html> <!--HTML 한문장 주석처리-->
    <head>
        <meta charset="UTF-8"> <!--웹페이지의 메타데이터-->
        <title>처음만나는 클라우드 보안</title>      
    </head>

    <boday>
        <p>테스트페이지 입니다.</p>
     </boday>

</html>
<!--HTML 
    여러줄 주석처리
-->

 

2. 제목, 문단: <h1>, <p>

<h1>반갑습니다</h1>
<p>영민하게 블로그입니다.</p>

 

헤더(h)는 1부터 5까지 작아진다

 

3. 긴글 박스: <textarea>

 <textarea>학습과 기록을 목적으로 작성되는 블로그입니다. 사실과 다른 내용이 있거나 궁금하신 점은 댓글로 남겨주시면 감사하겠습니다.</textarea><br>

3. 줄바꿈: <br>

<h2>클라<br>우드<br></h2>

 

4. 글자크기 및 색상변경

<h1 style="color:blue; font-size: 30px">정보보안</h1>

 

5. 세션나누기 & 입력(날짜)

<section>
    <h2>시작일</h2>
</section>
<input type="date">

6. 목차 작성

<nav>
    <ol>
         <li> 인프라과정 </li>
         <li> 정보보안 </li>
         <li> 아키텍처링 </li>
         <li> 보안컨설팅 </li>
    </ol>
</nav>

7. 버튼 & 링크연결

<p>클라우드 정보보안 <a href="https://cloudinfosec.tistory.com/"><button>블로그</button></a>

버튼 클릭 -> URL이동

8. 이미지생성 & 글자강조

<img src="Renzik.png">
    <progress></progress>
<p><strong>Autopsy</strong>실습=> <a href = "https://cloudinfosec.tistory.com/60">Click</a></p>

9. 테이블 작성

<section>
    <h2>식단</h2>
<table border="1">
    <th>1층</th>
    <th>2층</th>
    <th>3층</th>
     <tr>
        <td> 메밀 </td>
        <td> 국밥 </td>
        <td> 함박스테이크 </td>
     </tr>
     <tr>
        <td> 돈까스 </td>
        <td> 도시락 </td>
        <td> 닭볶음탕 </td>
     </tr>
     <tr>
        <td> 볶음밥 </td>
        <td> 수육 </td>
        <td> 제육볶음 </td>
     </tr>
</table>

 

10. 선택바

<section>
    <h2>직무설정</h2>
    </section>
    <select><option>보안관제</option><option>모의해킹</option><option>보안컨설팅</option><option>취약점진단</option>하나를 선택하시오.</select>

전체 웹페이지

 

예시코드.html
0.00MB

 

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/section

https://youtu.be/4dEcQgyDjOI

반응형