VS Code-html

최성현·2023년 7월 12일

HR PRE SOLID b br dashed dotted em font h html image inset p span style u 주석

HTML

목록 보기

1/6

기본

글씨 크기 h1>h2>h3>h4>h5>h6
style="color: 색상지정;" 색상변경

-페이지 이름

<title>페이지 이름<title>

-주석처리
cmd+/ - 주석 단축키

<!---->

원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H태그연습</title>
</head>
<body>
    <!-- h(header)1~6까지 있다. 1이 제일 큰 글꼴 -->
    <h1 style="color: blueviolet;"> H1 태그 입니다~~~~</h1><!-- 태그 사이에 닫여야함 <h1>열기 </h1>닫기
                                                            <h1 style="color: 색;"> 해주면 색변경-->
    <h2 style="color: rebeccapurple;">H2 태그입니다</h2>
    <h3 style="color: #ffccff;">H3 태그입니다</h3>
    <h4 style="color: blue;">H4 태그입니다</h4>
    <h5 style="background: #00ffcc;">H5 태그입니다</h5>
    <h6 style="background-color: brown;">H6 태그입니다</h6>
</body>
</html>

글씨 및 사진 홈페이지

b는 굵은 글씨체 br은 한 줄 내림

<b>Hello~Html~~</b><br>
    아무것도 적용안함!!!<br>
    HappyDay<br>
    안녕하세요<br>

pre는 자동으로 줄내리기 적용

<h1><pre>
    안녕
    오늘은
    html 시작날이야
    </pre></h1>

선

 <hr color="red" size="5" align="center" width="300">

p태그..문단처리..단락

<p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
    동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
    오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
    그 시기를 장마철이라 한다.</p>
    <p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
    동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
    오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
    그 시기를 장마철이라 한다.</p>

font 속성

<font size="5" color="green" face="Impact">Have a Nice Day</font>

style 속성과 속성 사이는 ;

u는 underline

<b style="font-size: 4em; color: orange;"><u>안녕하세요</u></b>

em 배로 늘린다는 의미

span 태그는 공간활용 높이조절 X

<span style="font-size: 3em; background-color: #ff00ff;">HappyDay</span>

image

alt는 이미지 안뜰때 표시해주는 것 src는 같은 폴더에 있을경우 ./없어도 됨
./의미는 동일폴더 ../상위폴더를 의미

<img alt="이미지없음" src="1.jpg">
<img src="../flower_ani/f11.png">

solid 테두리 실선

dotted 테두리 점선

inset 약간 액자처럼 됨

dashed 굵은 점선

<img src="../Food/12.jpg" style="border: 5px solid orange; width: 200px;">
    <img src="../Food/12.jpg" style="border: 5px dotted orange; width: 150px;">
    <img src="../Food/12.jpg" style="border: 5px inset maroon; width: 100px; height: 200px;">
    <img src="../Food/12.jpg" style="border: 5px dashed orange; width: 100px;">

원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본태그연습</title>
</head>
<장마는>
    <!-- b는 굵은 글씨체 br은 한 줄 내림-->
    <b>Hello~Html~~</b><br>
    아무것도 적용안함!!!<br>
    HappyDay<br>
    안녕하세요<br>

    <!-- pre는 자동으로 줄내리기 적용 -->
    <h1><pre>
    안녕
    오늘은
    html 시작날이야
    </pre></h1>

    <!-- 선 -->
    <hr color="red" size="5" align="center" width="300">

    <!-- p태그..문단처리..단락 -->
    <p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
    동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
    오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
    그 시기를 장마철이라 한다.</p>
    <p>장마는 6월 하순에서 7월 하순의 여름에 걸쳐서<br>
    동아시아에서 습한 공기가 전선을 형성하며 남북으로<br>
    오르내리면서 많은 비를 내리는 현상을 가리키는 말로,<br>
    그 시기를 장마철이라 한다.</p>

    <!-- font 속성 -->
    <font size="5" color="green" face="Impact">Have a Nice Day</font>

    <!-- style 속성과 속성 사이는 ; -->
    <!-- u는 underline -->
    <b style="font-size: 4em; color: orange;"><u>안녕하세요</u></b>

    <!-- em 배로 늘린다는 의미 -->
    <!-- span 태그는 공간활용 높이조절 X -->
    <span style="font-size: 3em; background-color: #ff00ff;">HappyDay</span>
    
    <!-- image -->
    <!-- alt는 이미지 안뜰때 표시해주는 것 src는 같은 폴더에 있을경우 ./없어도 됨 -->
    <!-- ./의미는 동일폴더   ../상위폴더를 의미 -->
    <img alt="이미지없음" src="1.jpg">
    <img src="../flower_ani/f11.png">
    <!-- solid 테두리 실선 dotted 테두리 점선 inset 약간 액자처럼 됨 dashed 굵은 점선-->
    <img src="../Food/12.jpg" style="border: 5px solid orange; width: 200px;">
    <img src="../Food/12.jpg" style="border: 5px dotted orange; width: 150px;">
    <img src="../Food/12.jpg" style="border: 5px inset maroon; width: 100px; height: 200px;">
    <img src="../Food/12.jpg" style="border: 5px dashed orange; width: 100px;">
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

다음 포스트