<!doctype html>
<html>
<head>
<title>테스트1</title>
<style>
P{ /* 주석 */
font-size : 40px;
color : red;
background-color : yellow;
}
/*h1,h2,h3,h4,h5,h6{
}
*/
/* 기본은 위에서 아래순서-> 밑에있는게 최종출력되지만 id가 class보다 우선된다*/
#hh1{
border : 5px solid green;
}
.headline{
border : 13px double blue; /* border : 테두리, solid:실선 dotted:점선 dashed:점선 double:이중선 */
/*border-left : none;
border-right : none;
*/
}
</style>
</head>
<body>
<!-- 블럭(block)요소 : 한줄전체를 차지 하는 요소, 자동으로 줄바꿈
p, h1 ~ h6(헤드라인(제목)을 나타내는 태그)
인라인(inline)요소 : 내용에 맞춰서 크기가 정해지는 요소
-->
<!-- br : 강제 줄바꿈 -->
안녕하세요? <br>
html 입니다 <br>
Hello Html <br>
<!-- p : 짧은 단락 자동으로 줄이 바뀐다 . 위아래 여백을 표시한다-->
<p>안녕하세요?</p>
<p>html 입니다</p>
<p>Hello Html</p>
<!--"" ='' , ""사이에 공백있으면 안됨 -->
<!-- class(.)는 같은 이름을 부여할 때, id(#)는 다른 이름을 줄 때 사용-->
<h1 id="hh1" class="headline" >안녕하세요 html 입니다</h1>
<h2 id="hh2" class="headline" >>안녕하세요 html 입니다</h2>
<h3 id="hh3" class="headline" >>안녕하세요 html 입니다</h3>
<h4 id="hh4"class="headline" >>안녕하세요 html 입니다</h4>
<h5 id="hh5"class="headline" >>안녕하세요 html 입니다</h5>
<h6 id="hh6"class="headline" >>안녕하세요 html 입니다</h6>
</body>
</html>
<주석정리>
◾ 기본은 위에서 아래순서-> 밑에있는게 최종출력되지만 id가 class보다 우선된다
◾ 블럭(block)요소 : 한줄전체를 차지 하는 요소, 자동으로 줄바꿈 p, h1 ~ h6(헤드라인(제목)을 나타내는 태그)
◾ 인라인(inline)요소 : 내용에 맞춰서 크기가 정해지는 요소
◾ br : 강제 줄바꿈
◾ p : 짧은 단락 자동으로 줄이 바뀐다 . 위아래 여백을 표시한다
◾ " " =' ' , " "사이에 공백있으면 안됨
◾ class(.)는 같은 이름을 부여할 때, id(#)는 다른 이름을 줄 때 사용
❗ 실행
'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글
[HTML/notepad++] 리스트-1219 (0) | 2022.12.19 |
---|---|
[HTML/notepad++] 웹기초-1219 (0) | 2022.12.19 |
[HTML/notepad++] 텍스트테그-1219 (0) | 2022.12.19 |
[HTML/notepad++ ] test3-1219 (0) | 2022.12.19 |
[HTML/notepad++] test2-1216 (0) | 2022.12.16 |