1주차 - HTML 태그

<div> 구역 나누기

<p> 문단 나누기

위 태그를 쓰면 줄 바꿈 효과가 있다

<ul>, <ol>, <dl>은 목록을 만드는 태그다

ul 태그는 unordered list로 순서 없는 목록을 만들고 bullet point를 생성한다

ol 태그는 ordered list로 순서 있는 목록을 만든다.

li 태그는 ul 혹은 ol 안에서 목록을 만든다.

ol태그의 type으로는 1, A, a,I,i 가 있고,

1은 숫자, A, a는 각각 알파벳 대문자와 소문자, I, i는 각각 대문자와 소문자 로마 숫자로 넘버링한다.

<ol start = 5> start로 넘버링을 시작할 숫자를 넣어줄 수도 있다.

dl 태그는 definition list로 용어를 설명하는 목록을 만든다

dl 태그 안에 <dt>와 <dd>가 들어가는데 dt에는 용어의 제목이 들어가고 dd에는 용어 설명이 들어간다.

<hr>은 가로 구분선을 그린다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div>이것은 div 태그!</div>
        <p>이것은 p 태그!</p>
        <hr>
        <h2>OrderedList</h2>
        <ol>
            <li>사과</li>
            <li>딸기</li>
            <li>포도</li>
        </ol>
        <hr>
        <ol start=10>
            <li>사과</li>
            <li>딸기</li>
            <li>포도</li>
        </ol>
        <hr>
        <ol type="i">
            <li>사과</li>
            <li>딸기</li>
            <li>포도</li>
        </ol>
        <hr>
        <h2>UnorderedList</h2>
        <ul>
            <li>사과</li>
            <li>딸기</li>
            <li>포도</;>
        </ul>
        <hr>
        <dl>
            <dt>용어 (dt: definition term)</dt>
            <dd>용어 설명 (dd: definition description) </dd>
        </dl>
    </div>
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</body>

</html>

아래는 위 코드 html 코드를 실행한 결과다

728x90

'항해99 > 웹개발 종합반' 카테고리의 다른 글

4주차 - FLASK 시작하기 - 서버, 클라이언트 파일 만들기 (0)	2022.09.02
3주차 - 파이썬 패키지 사용 & 크롤링 (0)	2022.09.01
2주차 - JQuery, Ajax (0)	2022.08.29
1주차 - HTML, CSS (0)	2022.08.28
웹개발 종합반 1주차 숙제: 팬명록 메인 페이지 만들기 (0)	2022.08.28