반응형
position 속성
위치 기준
static X -
relative O 자신이 원래 있던 위치
absolute O 1. static이 아닌 부모 / 2. body
신호등 만들어보기
Margin / padding 사용
<style>
#black {
background-color: black;
width: 160px;
height: 380px;
border-radius: 20px;
box-sizing: border-box;
/* border+padding+content를 사이즈로하는
border-box로 box-sizing을 한다. */
padding-left: 30px;
padding-top: 30px;
}
#yellow,#green,#red {
border-radius: 50%;
width: 100px;
height: 100px;
}
#red {
background-color: red;
margin-bottom: 10px;
}
#yellow {
background-color: yellow;
margin-bottom: 10px;
top: 145px;
left: 35px;
}
#green {
background-color: green;
top: 255px;
left: 35px;
}
</style>
</head>
<body>
<div id="black">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</body>
position 사용
<style>
#black {
background-color: black;
width: 160px;
height: 380px;
border-radius: 20px;
}
#yellow,
#green,
#red {
border-radius: 50%;
width: 100px;
height: 100px;
position: absolute;
/* relative로 원래있던 자리에서 자리변경해준다고 생각도 해보자 */
}
#red {
background-color: red;
top: 35px;
left: 35px;
}
#yellow {
background-color: yellow;
top: 145px;
left: 35px;
}
#green {
background-color: green;
top: 255px;
left: 35px;
}
</style>
</head>
<body>
<div id="black">
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
</div>
</body>
/* overflow 속성
(1) visible: 영역이 벗어나도 그대로 보임 (기본값)
(2) hidden: 영역이 벗어나면 전부 숨김처리
(3) scroll: 스크롤 처리
(4) auto: 영역을 벗어나지않으면 스크롤X , 벗어나면 스크롤로 처리
*/
한줄을 차지하고 있던 img를
float을 통해 띄워서 배치하고
text로 채운다
레이아웃 실습
ㅇ
<style>
#a {
width: 500px;
height: 500px;
}
#header {
background-color: #ea4335;
height: 10%;
}
#nav {
background-color: #ff5e00;
height: 10%;
}
#side {
background-color: #4285f4;
float: left;
width: 30%;
height: 60%;
}
#section1 {
background-color: #34a853;
/* 가로는 500px이지만 띄워진 side에 가려져서 전체가 보이진 않는다 */
height: 30%;
}
#section2 {
background-color: #fbbc05;
height: 30%;
}
#footer {
background-color: #8a8d92;
height: 20%;
}
</style>
</head>
<body>
<div id="a">
<!-- 아이디명은 자바랑 비슷하게 숫자로시작x -->
<div id="header"></div>
<div id="nav"></div>
<div id="side"></div>
<div id="section1"></div>
<div id="section2"></div>
<div id="footer"></div>
</div>
</body>
** 우선순위
1. !important
2. 인라인 > 내부 > 외부
3. 아이디 > 클래스 > 태그 > 전체
4. 나중에 선언 > 먼저 선언
주로 외부스타일이 쓰이고인라인은 긴급한 상황일때만 잠깐 쓰고 수정하는게 좋다.
스타일 외부선언
<style>
#inner{
color: blue;
}
</style>
<link rel="stylesheet" href="./ex19스타일선언.css">
</head>
<body>
<p style="color: blue;">인라인</p>
<p id="inner">내부</p>
<p id="out">외부</p>
</body>
ex19스타일선언.css
#out{
color: blue;
}
반응형
'빅데이터 서비스 교육 > HTML CSS' 카테고리의 다른 글
| CSS (바깥/안쪽 여백, 박스사이징, 테두리 속성) (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 |