10/27 30-1 P/DL/UL/OL 태그

학원/HTML5

10/27 30-1 P/DL/UL/OL 태그

도원결의 2022. 10. 27. 14:18

P태그

P태그
PARAGRAPH:문단을 나눌때 사용하는 태그
BLOCK ELEMENT
P태그안에는 BLOCK ELEMENT를 넣지 말아라
※Block Element:세로배치되는 태그들(예:hn계열 태그 혹은 p태그등)
Inline Element:가로배치되는 태그들(예:a태그 혹은 img태그등)

<!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>P06.html</title>
</head>
<body>
    <div>
        <h2>P태그 연습</h2>
        <H3>자기 소개서</H3>
        <P>
            가정환경 : 환경이 참 좋았네요 <BR/>
            부모님최고
        </P>
        <P style="background-color:yellowgreen; text-align:right;">
            지원동기:나는 가늘고 길게 살거예요 <BR/>
            아이고 내허리
        </P>
    </div>

    <div style="background-color:yellow; width:400px">
        <p style="text-align:center;">가운데 정렬</p>

    </div>


</body>
</html>

P06.html

P태그 연습

자기 소개서

가정환경 : 환경이 참 좋았네요
부모님최고

지원동기:나는 가늘고 길게 살거예요
아이고 내허리

가운데 정렬

DL태그

DL태그

Definition List,용어 목록을 나열할 때 사용하는 태그
[하위요소]
dt(Definition Term)태그와
dd(Definition Description)태그를 갖는다

block element
메뉴 표시할때 주로 사용

<!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>DL07.html</title>
</head>
<body>
<div>
    <h2>DL 및 자식 태그인 DT 및 DD 태그 연습 </h2>
    <dl>
        <dt>HTML</dt>
        <dd><!---알아서 들여쓰기가 됨-->
            HTML은 HyperText Markup Language의 약자로
            매우 쉽고
            빠르게 웹 문서를 만들 수 있는 마크업 언어이다.
        </dd>
        <dt>CSS</dt>
        <dd> 
            CSS는 Cascading Style Sheet의 약자로
            HTML문서의
            스타일을 정의하는 규약이다.

        </dd>
        <dt>JAVASCRIPT</dt>
        <dd>
            자바스크립트는 HTML문서에서 사용할 수
            있는
            프로그래밍 언어로 HTML문서에 다양한
            효과를 줄 때 사용
            한다.

        </dd>
    </dl>
    <h2>DL로 메뉴 구현</h2>
    <dl>
        <dt>회사소개</dt>
        <dt>인재채용</dt>
        <dt>제휴약관</dt>
        <dt>개인정보처리방침</dt>
    </dl>
</div>    
</body>
</html>

DL07.html

DL 및 자식 태그인 DT 및 DD 태그 연습

HTML: HTML은 HyperText Markup Language의 약자로 매우 쉽고 빠르게 웹 문서를 만들 수 있는 마크업 언어이다.
CSS: CSS는 Cascading Style Sheet의 약자로 HTML문서의 스타일을 정의하는 규약이다.
JAVASCRIPT: 자바스크립트는 HTML문서에서 사용할 수 있는 프로그래밍 언어로 HTML문서에 다양한 효과를 줄 때 사용 한다.

DL로 메뉴 구현

회사소개
인재채용
제휴약관
개인정보처리방침

UL/OL 태그

UL태그

Unordered List(순서가 없는 목록)
순서가 없는 목록을 나타낼 때 사용하는 태그
목록을 나타내기 위해서 하위 요소로 li태그(block element)를 가짐
[속성]

type:disc(●-기본),square(■),circle(○)
block element
type속성에 1(number순)이나 A,a(알파벳순),I,i(로마숫자) 도 지정가능

OL태그

Ordered List(순서가 잇는 목록)
하위요소로 li태그를 가짐
[속성]
type:1(기본)이나 A,a(알파벳순),I,i(로마숫자)
start:순서의 시작 값 지정(ol만 갖고있는 속성)
li태그에도 type속성을 지정할 수 있다.

<!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>ULOL08.html</title>
</head>
<body>
    <div>
        <h2>당신이 좋아하는 스포츠는?</h2>
        <!-- 웹표준에 어긋남
        <ul type="square;">  블릿 이 생김 
             -->
            <ul  style= "list-style-type:square; background-color: blanchedalmond;">
            <li style= "background-color: rgb(92, 92, 168);">축구</li>
            <li style="list-style-type:circle">배구</li>
            <li>농구</li>
        </ul>
        <h2>당신이 좋아하는 영화 장르는?</h2>
        <ul style="list-style-type:upper-alpha;">
            <li>액션</li>
            <li>SF</li>
            <li>스펙타클</li>
            <li>범죄/스릴러</li>
        </ul>
        <h2>당신이 좋아하는 영화 장르는?</h2>
        <ol style="list-style-type:upper-roman;">
            <li>액션</li>
            <li>SF</li>
            <li>스펙타클</li>
            <li>범죄/스릴러</li>
            </ol>
    <h2>UL로 메뉴 구현</h2>
    <ul>
        <li>회사소개</li>
        <li>인재채용</li>
        <li>제휴약관</li>
        <li>개인정보처리방침</li>
        </ul>
    </div>
</body>
</html>

ULOL08.html

당신이 좋아하는 스포츠는?

축구
배구
농구

당신이 좋아하는 영화 장르는?

액션
SF
스펙타클
범죄/스릴러

당신이 좋아하는 영화 장르는?

액션
SF
스펙타클
범죄/스릴러

UL로 메뉴 구현

회사소개
인재채용
제휴약관
개인정보처리방침