CSS 제목요소

h1~h6 제목요소

html문서에서 제목을 넣는 요소로는 h1, h2, h3, h4, h5, h6가 있다.
블록레벨요소이며, 인라인요소와 텍스트를 포함하지만 블록레벨요소는 포함할수 없다.

h1은 가장 큰제목, 다음 h2 중간제목, h3가 작은제목으로 쓰이며
대부분 h3까지 쓴다.

h1은 큰 제목이기 때문에 html문서에서 한번만 사용되어야 한다.

예시
<html>
<head>
<title>제목요소 사용하기</title>
</head>
<body>
    <h1>블로그입니다</h1>
    <h2>블로그는 어떤 내용들이 있는가?</h2>
    <h3>블로그 내용 알아보기</h3>
</body>
</html>




이 블로그의 인기 게시물

CSS border-radius

border-radius   css3부터 가능해진 border-radius. 모서리를 둥글게 만들때 사용. border-top-left-radius: 속성값 (%,px) border-top-right-radius: 속성값 (%,px) border-bottom-right-radius : 속성값 border-bottem-left-radus : 속성값 한번에 쓸때는 border-radius : 속성값 으로 해줌. <style type="text/css"> .radius01 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 50px; } .radius02 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-right-radius:30px; } .radius03 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-bottom-right-radius:50px 20px; } .radius04 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-top-left-radius:20px 30px; } .radius05 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:30px; } .radius06 { width:200px; padding:20px; margin-bottom:30px; background:#09F; border-radius:50px 30px 20px 10px; } </style> <div class="radius01...
자세한 내용 보기

CSS z-index 요소의 순서

이미지
z-index    - 요소의 순서를 결정함. - z-index 속성은 position 속성과 함께 사용 됨. - z-index:auto, 숫자로 표시 - 숫자가 높을수록 앞에 배치된다. - 기본이 0. - 마이너스 값도 지정 가능하다. <style type="text/css"> .layer1 {  position:absolute;  top:10px;  left:10px;  width:100px;  height:100px;  padding:20px;  background:#F9F;  z-index:1; } .layer2 {  position:absolute;  top:50px;  left:50px;  width:100px;  height:100px;  padding:20px;  background:#69F;  z-index:2; } .layer3 {  position:absolute;  top:100px;  left:100px;  width:100px;  height:100px;  padding:20px;  background:#36F;  z-index:3; } </style> <div class="layer1">레이어1</div> <div class="layer2">레이어2</div> <div class="layer3">레이어3</div> 결과 
자세한 내용 보기