CSS의 배경요소
background-color: HTML 요소의 배경색을 설정
<head>
<title>css 배경1</title>
<style>
body { background-color: deepskyblue; }
div { background-color: white; width: 60%; padding: 20px; border: 3px solid red; }
</style>
</head>
<body>
<h2>css 배경1</h2>
<div>
<h2>배경적용하기</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quisquam atque amet voluptatem mollitia et ducimus saepe, ad tempore sed doloribus, consectetur eius odio. Aut error dolorem est adipisci eum?</p>
</div>
</body>
background-image
- HTML 요소의 배경으로 나타날 배경 이미지를 설정
- 배경 이미지는 기본 설정으로 반복되어 나타남
background-image: url(파일경로)
background-repeat: 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정(repeat-x, repeat-y, no-repeat)<head>
<title>css 배경2</title>
<style>
body {
background-image: url(./smile.png);
# background-repeat: repeat-x; 가로축으로 한 줄 출력
# background-repeat: repeat-y; 세로축으로 한 줄 출력
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>css 배경2</h2>
</body>
background-position
- 반복되지 않은 배경 이미지의 상대 위치를 설정
- %나 px을 사용하여 상대위치를 직접 설정할 수 있음
- 상대위치를 결정하는 기준은 왼쪽 상단
left top center top right top
left center center right center
left bottom center bottom right bottom
예)
background-position: center bottom
background-position: 가로위치값 세로위치값 => background-position: 10% 100px;background-attachment
- 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
- 고정된 배경 이미지는 스크롤과 무관하게 화면 위치에서 이동되지 않음
- fixed<head>
<title>css 배경3</title>
<style>
body {
background-image: url(./smile.png);
background-repeat: no-repeat;
background-position: right bottom;
background-attachment: fixed;
}
div {
width: 60%;
height: 300px;
border: 3px dotted deeppink;
padding: 10px;
margin-bottom: 20px;
background-image: url(./smile.png);
background-repeat: no-repeat;
}
.bg1 { background-position: center bottom; }
.bg2 { background-position: center; }
.bg3 { background-position: 20% 100px;}
</style>
</head>
<body>
<h2>css 배경3</h2>
<div class="bg1">
<h2>background-position 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto nobis est earum ab impedit qui, doloribus sequi facilis, reiciendis eius iure excepturi! Accusamus suscipit beatae provident placeat. Repellendus, culpa autem?</p>
</div>
<div class="bg2">
<h2>background-position 2</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto nobis est earum ab impedit qui, doloribus sequi facilis, reiciendis eius iure excepturi! Accusamus suscipit beatae provident placeat. Repellendus, culpa autem?</p>
</div>
<div class="bg3">
<h2>background-position 3</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto nobis est earum ab impedit qui, doloribus sequi facilis, reiciendis eius iure excepturi! Accusamus suscipit beatae provident placeat. Repellendus, culpa autem?</p>
</div>
</body>
background-size
- 반복되지 않은 배경 이미지 크기를 설정
- px, %, contain, cover
- contain
- 배경 이미지의 가로, 세로 모두 요소보다 작다는 전제하에 설정
- 가로 세로 비율은 유지
- 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
- cover
- 배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 저제하에 설정
- 가로, 세로 비율은 유지
- 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음<head>
<title>css 배경4</title>
<style>
div {
background-image: url(./smile.png);
background-repeat: no-repeat;
width: 150px;
height: 150px;
border: 2px solid red;
margin-bottom: 20px;
}
.background1 { background-size: 50px 100px; }
.background2 { background-size: 500px 500px; background-position: center;}
.background3 { background-size: contain;}
.background4 {
width: 100px;
height: 60px;
background-size: cover;
background-position: bottom center;
}
</style>
</head>
<body>
<h2>css 배경4</h2>
<div class="background1"></div>
<div class="background2"></div>
<div class="background3"></div>
<div class="background4"></div>
</body>
background: 배경 속성을 한꺼번에 적용
background 파일위치 반복여부 위치 사이즈 ...<head>
<title>css 배경5</title>
<style>
html {
background: url(./bridge.png) no-repeat fixed center/cover;
}
</style>
</head>
<body>
<h2>css 배경5</h2>
</body>
박스 모델(Box Model)
- 모든 HTML 요소는 박스 모양으로 구성
- 박스 모델은 HTML 요소를 내용, 안쪽여백, 테두리, 바깥여백으로 구분함내용(content)
- 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분안쪽여백(padding)
- 내용과 테두리 사이의 간격 또는 여백
- padding-top, padding-right, padding-bottom, padding-left
- padding: 위 오른쪽 아래 왼쪽 순으로 설정
HTML
<div id='padding'>안녕하세요</div>
CSS
div#padding { padding: 20px 50px 30px 10px; }
위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px
div#padding { padding: 20px 50px 30px; }
위 20px, 오른쪽 왼쪽 50px, 아래 30px
div#padding { padding: 20px 50px; }
위 아래 20px, 오른쪽 왼쪽 50px
div#padding { padding: 20px; }
위 아래 오른쪽 왼쪽 20px<head>
<title>패딩</title>
<style>
div {
width: 200px;
height: auto;
background-color: deeppink;
margin: 20px;
color: white;
}
#padding1 { padding: 10px 30px 20px 40px;}
#padding2 { padding: 30px 20px 40px;}
#padding3 { padding: 30px 20px;}
</style>
</head>
<body>
<h2>패딩</h2>
<div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo inventore voluptatibus sint id et maxime molestias. Tempore magni quidem labore magnam, similique, omnis nobis commodi cum pariatur temporibus, eum beatae?</div>
<div id="padding2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas suscipit voluptatem fugit voluptatibus esse delectus nostrum dolor reprehenderit tempora, maiores libero quam blanditiis facilis nobis iure sint expedita dicta enim?</div>
<div id="padding3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam cumque expedita et voluptates consequatur recusandae pariatur, obcaecati similique assumenda quo fugit corporis, delectus nulla a esse harum reprehenderit iusto nesciunt?</div>
</body>
테두리(border)
- 내용(content)과 안쪽여백(padding) 주변을 감싸는 프레임
- border-style(테두리 모양), border-color(테두리 색상), border-width(테두리 두께)
- border로 한꺼번에 설정<head>
<title>테두리</title>
<style>
div {
width: 200px;
height: 100px;
margin: 15px;
border-width: 5px;
color: black;
border-style: solid;
}
#border1 { border-style: solid; }
#border2 { border-style: dotted; }
#border3 { border-style: dashed; }
#border4 { border-style: double; }
#border5 {
border-color: gold;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
}
#border6 { border: 3px dotted red; }
</style>
</head>
<body>
<h2>테두리</h2>
<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5"></div>
<div id="border6"></div>
</body>
바깥여백(margin)
- 테두리(border)와 이웃하는 요소들 사이의 간격
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 일어남(세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 큰값을 선택하는 현상)<head>
<title>마진</title>
<style>
* { padding: 0; margin: 0; }
div {
width: 200px;
height: 100px;
background-color: deeppink;
}
#margin1 { margin: 30px 50px 30px 50px; }
#margin2 { margin: 30px 50px; }
#margin3 { margin: 50px; }
#margin4 { margin: 30px 5px 10px; }
#margin5 { margin: 30px auto; }
</style>
</head>
<body>
<h2>마진</h2>
<div id="margin1"></div>
<div id="margin2"></div>
<div id="margin3"></div>
<div id="margin4"></div>
<div id="margin5"></div>
</body>
박스사이징(box-sizing)
- width, height는 padding, border 영역을 포함하지 않음
- 만약 width가 100%로 설정되는 경우 padding, border 속성을 추가하면 안됨
- box-sizing 속성값을 border-box로 설정하게 되면 width와 height값에 padding과 border를 포함<head>
<title>박스사이징</title>
<style>
* { padding: 0; margin: 0; }
div {
width: 300px;
height: 150px;
padding: 30px;
border: 3px solid red;
}
#boxsizing1 { box-sizing: content-box; }
#boxsizing2 { box-sizing: border-box; }
</style>
</head>
<body>
<h2>박스사이징</h2>
<div id="boxsizing1">box-sizing = 'content-box'</div>
<div id="boxsizing2">box-sizing = 'border-box'</div>
</body>
CSS 디스플레이
- 웹 페이지의 레이아웃을 결정하는 속성
- block, inline, inline-block, none, flex ...
visibility: hidden; <-> visibility: visible;<head>
<title>디스플레이</title>
<style>
div {
background-color: deepskyblue;
border: 3px solid red;
margin-bottom: 30px;
}
p#none { display: none; }
p#hidden { visibility: hidden;}
</style>
</head>
<body>
<h2>디스플레이</h2>
<div>
<p>display 속성값을 none으로 설정</p>
<p id="none">display 속성값을 none으로 설정</p>
</div>
<div>
<p>visibility 속성값을 hidden으로 설정</p>
<p id="hidden">visibility 속성값을 hidden으로 설정</p>
</div>
</body>
</html>
CSS 폼
로그인 화면, 버튼, 선택창 등 디자인에 대한 폼 css 코드를 아래 사이트에서 참고할 수 있다.
- w3schools, mdn 참고
'Web' 카테고리의 다른 글
| [ HTML ] CSS Float, Flex (0) | 2024.04.11 |
|---|---|
| [ HTML ] CSS Position ( 위치지정방식 ) (0) | 2024.04.09 |
| [ HTML ] CSS 텍스트 + 과제링크 (0) | 2024.04.08 |
| [ HTML ] CSS 선택자 (0) | 2024.04.08 |
| [ HTML ] CSS (0) | 2024.04.08 |