ol, li tag_TEST

 

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
    
    <h1>레드향 샐러드 레시피</h1>
        <strong>재료:</strong> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드채소 30g
        <strong>드레싱:</strong> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간
    <h2>재료 준비</h2>
        <blockquote>
            <ol type="a">
                <li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
                <li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
            </ol>
        </blockquote>
    <h2>드레싱 준비</h2>
        <blockquote>
            <ol type="a" start="3">
                <li>드레싱 재료를 믹서에 한꺼번에 넣고 갈아줍니다.</li>
            </ol>
        </blockquote>
    <h2>샐러드 완성</h2>
        <blockquote>
            <ol type="a" start="4">
                <li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
            </ol>
        </blockquote>

</body>
</html>

 

Github

Link

 

 

 

 

 

'HTML > HTML_TEST' 카테고리의 다른 글

total_TEST  (0) 2023.03.08
input_TEST  (0) 2023.03.08
table_TEST  (0) 2023.03.08
ul, li_TEST  (0) 2023.03.08
font tag_TEST  (0) 2023.03.07

font tag_TEST

<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
    
    <h1>애국가</h1>
    <p>애국가(愛國歌)는 대한민국의 국가이다.</p>
    <hr>
    <h1>1절</h1>
    <blockquote><strong>동해</strong> 물과 <em>백두산</em>이 마르고 닳도록<br>   
    하느님이 보우하사 우리나라 만세.<br>
    무궁화 삼천리 화려 강산<br>
    대한 사람, 대한으로 길이 보전하세.</blockquote>
    <hr>
    <h1>2절</h1>
    <blockquote>남산 위에 저 소나무, 철갑을 두른 듯<br>
    바람 서리 불변함은 우리 기상일세.<br>
    무궁화 삼천리 화려 강산<br>
    대한 사람, 대한으로 길이 보전하세.</blockquote>
    <hr>
    <h1>3절</h1>
    <blockquote>가을 하늘 공활한데 높고 구름 없이<br>
    밝은 달은 우리 가슴 일편단심일세.<br>
    무궁화 삼천리 화려 강산<br>
    대한 사람, 대한으로 길이 보전하세.</blockquote>
    <hr>
    <h1>4절</h1>
    <blockquote>이 기상과 이 맘으로 충성을 다하여<br>
        괴로우나 즐거우나 나라 사랑하세.<br>
        무궁화 삼천리 화려 강산<br>
        대한 사람, 대한으로 길이 보전하세.</blockquote>
    

</body>
</html>

 


 

Github

Link

 

 

 

 

 

'HTML > HTML_TEST' 카테고리의 다른 글

total_TEST  (0) 2023.03.08
input_TEST  (0) 2023.03.08
table_TEST  (0) 2023.03.08
ul, li_TEST  (0) 2023.03.08
ol, li tag_TEST  (0) 2023.03.07

목차


ol, li

ol태그는 숫자를 자동으로 매겨줌,순서가 있는 항목을 쓸때 사용하는 태그
emmet(자동완성) : ol>li*100 = ol안에 li를 100개 만든다
 

    <ol>
        <li>항목1</li>
        <li>항목2</li>
    </ol>

 

ol type="a"

ol 태그에 type="a"를 넣으면 알파벳으로 순서를 매겨줌

    <ol type="a">
        <li>항목1</li>
        <li>항목2</li>
    </ol>

 

Github

Link

 

'HTML > HTML_ex' 카테고리의 다른 글

multimedia (Img, video, audio)  (0) 2023.03.08
table  (0) 2023.03.08
list  (0) 2023.03.07
font  (0) 2023.03.07
semantic  (0) 2023.03.07

목차


h

제목을 나타내고 싶을 때 쓰는 태그, h1 ~ h6 갈수록 크기가 작아짐

 

<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>

p

문단 태그

 

<p>우리반은 PHP를 배우는 반입니다.</p>
<p>HTML도 배웁니다.</p>

 

hr

선을 넣어줌

 

<hr>

 

br

줄바꿈, VSCode에서 엔터키를 눌러도 웹페이지 에선 줄바꿈이 되지않는다. br태그를 사용

 

<p>
    띄어쓰기 
    합시다.
</p>

<p>띄어쓰기는 br태그를 이용합니다.<br>이렇게 됩니다.</p>

strong, b

강조를 위한 태그, 둘의 차이점 : TTS에서 strong태그가 강조해서 읽어줌, 시각장애인 분들을 위함,웬만하면 strong태그를 사용

 

<p>요리를 할 때는 <strong>청결</strong>이 중요합니다.</p>
<p>요리를 할 때는 <b>청결</b>이 중요합니다.</p>

em, i

글자를 기울여줌, strong, b 태그와 마찬가지로 시각장애인 분들을 위함,웬만하면 em태그를 사용

 

<em>돼지국밥</em>
<i>돼지국밥</i>

 


blockquote

인용문 태그지만, 현업에서는 쓸일없음

 

<h1>요리</h1>
<blockquote>요리는 여러 조리과정을 거쳐 음식을 만드는 것이나 그 음식을 말하며 주로 가열한 것을 말한다. 조리(調理)는 요리를 만드는 일이나 그 방법, 과정 등을 말한다.</blockquote>

 


 

abbr

마우스를 올리면 title=" "안의 값을 보여줌

 

<abbr title="aaaaaa">IOT</abbr>

cite

글자를 기울여주는 태그지만, 현업에서는 쓰이지않음

 

<p>그것은 <cite>내가 경험한</cite>최고의</p>

 


 

Github

Link

 

 

'HTML > HTML_ex' 카테고리의 다른 글

multimedia (Img, video, audio)  (0) 2023.03.08
table  (0) 2023.03.08
list  (0) 2023.03.07
ol, li  (0) 2023.03.07
semantic  (0) 2023.03.07

semantic

sementic tag는 웹 접근성(TTS), 가시성, 검색엔진 최적화 때문에 사용함

 


block tag

block tag는 전체 영역을 사용함

header {
	border: 3px solid red;
}
nav {
	border: 3px solid yellow;
}
main {
    border: 3px solid green;
}
footer {
    border: 3px solid blue;
}
.header {
    border: 3px solid black;
}
<div class="header">Header 영역</div>
<header>Header 영역</header>
<nav>Nav 영역</nav>
<main>Content 영역</main>

 


inline tag

inline tag는 content가 있는 부분만 영역으로 잡힘

span {
    background-color: orange;
}
<span>요리(料理, Cooking)는 ‘요리음식점’(한성주보, 1886년 10월4일치)에 처음 나온, 조선 말 한성에 진출한 일본인들이 음식을 만들어 팔던 가게의 간판을 인용한 말로 먹기 좋게 가공한 음식이나 가공 행위 자체를 의미한다. 식재료를 가공하는 행위에는 '조리(調理)'도 명사로 쓰이지만, 음식을 보고 조리라고 부르지는 않는다.</span>

 


 

 

Github

Link

'HTML > HTML_ex' 카테고리의 다른 글

multimedia (Img, video, audio)  (0) 2023.03.08
table  (0) 2023.03.08
list  (0) 2023.03.07
ol, li  (0) 2023.03.07
font  (0) 2023.03.07

+ Recent posts