<body>
<div id="row1">
<div id="first">first</div>
<div id="second">second</div>
</div>
<div id="row2">
<div id="first">first</div>
<div id="second">second</div>
</div>
</body>
<style>
#row1 {
width:500px; margin:0 auto;
border:5px solid #cccccc;
overflow: hidden;
}
#row2 {
width: 500px; margin:0 auto;
border:5px solid #cccccc;
overflow: hidden;
}
#row1 #first {
width:100px; height:100px;
float: left;
border: 1px solid #cccccc;
margin: 5px;
padding: 5px;
}
#row1 #second {
width:100px; height:100px;
float: left;
border: 1px solid #cccccc;
margin: 5px;
padding: 5px;
}
#row2 #first {
width:100px; height:100px;
float: right;
border: 1px solid #cccccc;
margin: 5px;
padding: 5px;
}
#row2 #second {
width:100px; height:100px;
float: right;
border: 1px solid #cccccc;
margin: 5px;
padding: 5px;
}
</style>
코드를 안보고 맞게 잘 구현했으나 가독성이 조금 부족한 것 같다고 느껴져서 복습하자는 의미로 코드를 올렸다.
이렇게 width 와 margin: 0 auto 를 한 줄에 써주고, 각 객체의 너비와 높이도 한 줄에 쓰니까 좀 더 보기가 편안해 보였다.
그리고 overflow : hidden 속성을 "감싸고 있는 객체" 에게 꼭 써주자는 걸 명심하자!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
width:800px;
margin:0 auto;
border:1px solid #cccccc;
overflow:hidden;
padding:10px;
}
#wrap img {
float:left;
margin:10px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://www.sba.seoul.kr/kr/images/index/noti_pop2015.png" />
<p>서울시 중소기업의 지식재산 역량제고를 통한 신성장동력 창출 <br />
Seoul Intellectual Property Center <br />
「서울지식재산센터」는 서울소재 중소·벤처기업을 대상으로 지식재산 종합컨설팅, 국내·외 특허출원 지원 등 지식재산권에 대한 One-Stop Total Solution을 제공하여 기술혁신을 통한 기업 경쟁력 강화 및 서울 신성장동력산업 발전에 기여하고 있습니다. </p>
</div>
</body>
</html>
? : 여기서는 p 를 { float : left } 로 하면 왜 밑으로 나올까?
유튜브를 보고 답을 찾았다. 나중에 정리도 같이 하자.
↓
float 은 '뜨다" 라는 사전적인 영어 의미를 가지고 있다. 말 그대로 지금 예제에서는 img 를 float 속성을 줬기 때문에 떠있는 상태이다. 그렇다면 p 는 img 를 피한 영역에 표시 된다.
gradient 속성
2가지 이상의 색을 표현할 때 사용되는 속성이다. (그라데이션!)
색깔을 표현할 때 모든 코드를 외울 수 없기 때문에 웹사이트를 이용해서 코드를 다운 받는 방법을 이용하면 좋다.
▼
https://www.colorzilla.com/gradient-editor/
Ultimate CSS Gradient Generator from ColorZilla
A powerful Photoshop-like CSS gradient editor
www.colorzilla.com
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - grid 속성 (0) | 2021.09.27 |
|---|---|
| CSS - 가변형 그리드 (옛날 방식) (0) | 2021.09.27 |
| CSS - 수직 가운데 정렬, position 속성 (0) | 2021.09.21 |
| CSS - magin과 padding, box-sizing, background-image (0) | 2021.09.20 |
| CSS - 단위, url(), display 속성 (0) | 2021.09.20 |