반응형
margin(바깥), padding(안쪽)
margin : 10px or padding 10px => 전체 방향
margin(바깥)
padding(안쪽) +방향 => 원하는 방향
** 크기 설정
(1) Content-box : 콘텐츠 영역만을 크기로
=> ex width: 500px padding : 20px => 전체 크기 540
(2) Border-box : Content + Padding + Border영역을 크기로
=> ex width: 500px padding : 20px
=> 전체 크기 500 컨텐츠 크기 460
포지션 실습
<style>
div{
width: 100px;
height: 100px; }
#redBox{
background-color: red;
position: absolute;
top: 0px;
left: 0px; }
#yellowBox{
background-color: yellow;
position: absolute;
top: 0px;
right: 0px; }
#blueBox{
background-color: blue;
position: absolute;
bottom: 0px; }
#greenBox{
background-color: green;
position: absolute;
bottom: 0px;
right: 0px; }
</style>
<!-- top: 10%로 쓰려면 %는 기준이 있어야한다
div4개의 상위 div를 만들고 상위 div의 크기,위치의 %로 계산 -->
</head>
<body>
<div id="redBox"></div>
<div id="yellowBox"></div>
<div id="blueBox"></div>
<div id="greenBox"></div>
</body>
* Border-radius 테두리를 둥글게 만들어주는 속성
1. 테두리 설정 Border
2. 위 or 아래 top or bottom
3. 좌 or 우 left or right
4. Radius
ex) 모든 방향, 같은 크기 => border-radius
반응형
'빅데이터 서비스 교육 > HTML CSS' 카테고리의 다른 글
| CSS (포지션, overflow, float, 스타일 선언) (0) | 2022.04.28 |
|---|---|
| CSS (font,선택자,공간분할,박스모델) (0) | 2022.04.28 |
| HTML form (0) | 2022.04.28 |
| HTML 이미지, 테이블 (0) | 2022.04.28 |
| 웹 HTML 기본 (0) | 2022.04.28 |