728x90
더보기
div
엄청나게 많이 사용하는 div태그
CSS(Cascading Stypel Sheet)와 사용하면 거의 만능에 가까운 태그
화면 레이아웃 구성 시 사용
STYLE
1) 인라인 스타일
태그에 직접 스타일을 주는 것
한두개 정도 확인 할 땐 편한데 그 외에는 엄청 불편한 단점을 가진다.
<html>
<body>
<div style="border-color: black; border-width: 3px;border-style: dashed;">
나는 div야
</div>
</body>
</html>
2) 내부스타일 (#)
head에 써야한다
아이디를 줘서 관리
단위를 꼭!! 써줘야해
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_na{
border-width: 5px;
border-style: groove;
border-color: chartreuse;
}
</style>
</head>
<body>
<div id="id_na"> 나는 내부스타일 div</div>
</body>
</html>
더보기
크기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_na{
width:500px;
height: 300px;
border-width: 5px;
border-style: groove;
border-color: chartreuse;
}
</style>
</head>
<body>
<div id="id_na"> 나는 내부스타일 div</div>
<div style="border-color: black; border-width: 3px;border-style: dashed;">
나는 inline 스타일이야
</div>
</body>
</html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#id_na{
border-width: 5px;
border-style: groove;
border-color: chartreuse;
}
</style>
</head>
<body>
<div id="id_na"> 나는 내부스타일 div</div>
<div style="border-color: black; border-width: 3px;border-style: dashed;">
나는 inline 스타일이야
</div>
</body>
</html>
개발시 편리하도록
border-width: 5px;
border-style: groove;
border-color: chartreuse;위의 코드를 아래와 같이 한줄로 표현 가능하다.
border:5px groove black;
3) 클래스로 접근 (.)
아이디로 접근하는 것이 좋지 않아 클래스로 접근해야함
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.id_na{
width:500px;
height: 300px;
border:5px groove black;
/* border-width: 5px;
border-style: groove;
border-color: chartreuse; */
}
</style>
</head>
<body>
<div class="id_na"> 나는 내부스타일 div</div>
<div style="border-color: black; border-width: 3px;border-style: dashed;">
나는 inline 스타일이야
</div>
</body>
</html>
레이아웃
<style>
div{
border: 2px solid black;
}
.wrapper{
width: 100vw;
height: 100vw;
border-color:magenta;
}
</style>
<body>
<div class="wrapper">
<div class="header">헤더</div>
<div class="content">내용</div>
<div class="footer">바닥글</div>
</div>
</body>>> div{}는 모든 div태그에 스타일을 적용한다는 의미
>> 100vw(w는 가로, h는 세로)
전체 반영으로 100%라는 의미
<style>
/* 모든 div태그에 아래 스타일을 적용 */
div{
border: 2px solid black;
}
.wrapper{
width: 100vw;
height: 100vw;
border-color:magenta;
}
.header{
height: 30vh;
}
.content{
height: 50vh;
}
.footer{
height: 20vh;
}
</style>
<body>
<div class="wrapper">
<div class="header">헤더</div>
<div class="content">내용</div>
<div class="footer">바닥글</div>
</div>
</body>
Display
<style>
div{
border: 3px solid pink;
color:orangered;
}
</style>
<body>
<div>하</div>
<div>허</div>
<div>후</div>
<div>흫</div>
</body>
<style>
div{
display: inline-block;
border: 3px solid pink;
color:orangered;
}
</style>
<body>
<div>하</div>
<div>허</div>
<div>후</div>
<div>흫</div>
</body>
더보기
1) block
옆자리 내주지 않기
2) inline-block
옆자리가 있다면 내어주기
3) inline
내용만큼만 차지하기
<style>
div{
display: inline-block;
border: 3px solid pink;
width: 30vw;
height: 30vh;
color:orangered;
}
</style>
<body>
<div>하</div>
<div>허</div>
<div>후</div>
<div>흫</div>
</body>
옆에 남은공간이 없다면 밑으로 내려옴!
가운데정렬
<style>
.container{
margin: 10px auto; /*상하마진 좌우마진*/
width: 60vw;
height: 90vh;
border: 5px solid black;
}
</style>
<body>
<div class="container">전체공간배치용</div>
</body>
</html>
'화면구현 > HTML' 카테고리의 다른 글
| HTML 기본 컴포넌트 (0) | 2020.06.18 |
|---|---|
| HTML Scrip (0) | 2020.06.17 |
| HTML 테이블태그 (0) | 2020.06.17 |
| HTML 확장자 (0) | 2020.06.17 |
| HTML(Hyper Text Markup Language) 살짝 알아보기 (0) | 2020.06.17 |