2022. 5. 30. 19:08ㆍProgramming의 세계/HTML
목차
display property 종류와 활용 예시
display Property 4가지
1. display: none;
보이지 않게 해준다.
2. display: inline;
컨텐츠를 작성하는 공간의 크기만 갖는다. 컨텐츠 감싼 크기만 갖고 별도의 크기 변화가 안된다.
3. display: block:
따로 설정하지 않아도 div가 갖게되는 기본값으로 기본적으로 div는 한 줄을 다 차지 한다.
4. display: inline-block:
박스형태의 컨텐츠를 작성하는 공간으로 inline과 block의 특성을 합쳐 놓았다고 생각할 수 있음.
크기를 바꿀 수 있다.
활용 예시를 보면 쉽게 이해갈 것이다.
<inline, block 예시>
☞여기서 빨리 작성하는 TIP!!!
div.div1 치고 ENTER를 치면 <div class="div1">div1</div> 이 완성된다.
<!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>Document</title>
</head>
<body>
<style>
/*inline.*/
div.div1{
margin: 25px;
padding: 25px;
background-color: yellow;
position: relative;
display : inline;
width: 100px;
height: 50px;
}
/*block*/
div.div2 {
display: block;
position: absolute;
left: 100px;
background-color: pink;
}
</style>
<!-- 빨리쓰는 방법 팁 div.div1 치고 엔터 -->
<div class="div1">div1</div>
<div>div</div>
<br>
<br>
<!-- .div2 엔터 해도 생긴다-->
<!-- .div2 -->
<div class="div2">div2</div>
<div>div</div>
</body>
</html>
display을 inline으로 설정하면 span처럼 작용하는 것을 확인할 수 있다.
기본값이 block이기 때문에 block은 굳이 입력 안해도 된다.
<inline-block 예시>
<!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>Document</title>
</head>
<body>
<style>
/*inline.*/
div.div1{
margin: 25px;
padding: 25px;
background-color: yellow;
position: relative;
display : inline;
width: 100000px;
/* inline은 width와 height 적용이 안된다. */
height: 50px;
}
/* inline-block은 크기를 설정할 수 있음 */
div.div2{
margin: 25px;
padding: 25px;
background-color: palegreen;
position: relative;
display : inline-block;
width: 100px;
height: 50px;
}
div{
display: inline-block;
}
</style>
<div class="div1">div1</div>
<div>div</div>
<br>
<br>
<div>div</div>
<div class="div2">div2</div>
</body>
</html>
inline-block은 block의 특징처럼 width, height 설정이 가능하면서 inline처럼 옆에 다른 객체를 오게 할 수 있다.
div뿐만 아니라 span도 마찬가지다.
<body>
<style>
/* span이랑 div는 block이냐 inline이냐 차이지 결국은 속성은 똑같다 */
.span1{
display: block;
width: 100px;
height: 100px;
background-color: salmon;
}
.span2{
display: block;
width: 100px;
height: 100px;
background-color: slateblue;
}
</style>
<span class="span1">span</span>
<span class="span2">span</span>
</body>
block을 설정하니 div와 같은 모습이다.
결국 span와 div의 차이는 span이랑 div는 block이냐 inline이냐 차이지 결국은 속성은 똑같다.
border 종류와 활용 예시
border-style: 테두리(border)의 모양을 정하는 속성.
전체 스타일을 적용하려면 border-style을 쓰면 되고,
각각 상단, 우측면, 하단, 좌측면은 border-top-style, border-right-style, border-bottom-style, border-left-style로 지정하여 스타일을 변경할 수 있다.
또한
- dotted - Defines a dotted border (자주쓰는 값 밑줄표시)
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
값들을 지정할 수 있다.
이 또한 활용 예시를 보면 쉽게 이해할 수 있다.
< dotted, dashed, solid 예시>
<body>
<style>
/* margin하면 전체 다 먹는다. 위에만 적용하려면 margin-top으로 설정 */
div{
margin-top: 10px;
width: 300px;
padding: 10px;
}
.border-dotted{
border-style: dotted;
border-color: red;
border-radius: 10px;
border-width: 5px;
}
/* 따로 따로 안하고 한번에 border : 하고 나열해도 된다. */
.border-solid{
border-style: solid;
margin: 20px 30px;
}
/* 위아래 20px, 좌우 30px*/
.border-double{
border-style: double;
margin: 20px 30px;
}
</style>
<div class="border-dotted">div1</div>
<div class="border-solid">div2</div>
<div class="border-double">div3</div>
</body>
<double 예시>
double은 한줄로 적어보겠다. 다음과 같이 한꺼번에 적을 수 있다.
<body>
<style>
.border-dashed{
border : 1px black dashed;
}
</style>
<div class="border-dashed">div</div>
</body>
D.O.N.E!! 잘 출력
'Programming의 세계 > HTML' 카테고리의 다른 글
| [JSP] JSP 짧고 굵게 배워보기(환경 구축 및 구동 확인) (0) | 2022.06.08 |
|---|---|
| [CSS] 초간단 프론트엔드 화면 구성 (0) | 2022.05.30 |
| [CSS] div 정렬 vs table 정렬 (0) | 2022.05.30 |
| [HTML] 웹(프론트엔드) 개발의 기초_02 (0) | 2022.05.28 |
| [HTML] 웹(프론트엔드) 개발의 기초_01 (0) | 2022.05.27 |