CONTENTS
Section1 CSS 사용법과 선택자
8.상속
Section2 CSS3 박스 속성
3. 박스 속성
4.레이아웃 속성
Section3 CSS3 레이아웃
참고사이트) CodePen
-------------------------------------------------------------------------------
Section1 CSS 사용법과 선택자
8.상속
◎상속
-부모 요소의 스타일이 자식요소에 적용되는 것
-특정 요소는 상속을 통해 하위 요소들에게 적용
-모든 요소가 적용되지는 않으며 특히 다음과 같은 문자계열들이 상속이 적용(text관련)
·font: font-size color text-align text-indent text-decoration letter-spacing
font-weigh
font-style
line-height
font-family
cf)상속x: background, border, margin, padding, width, height, position, top, right, bottom, left, z-index
-특정한 경우 상속되지 않는 속성도 inherit라는 값을 사용하여 부모에서 자식으로 강제 상속 시킬 수 있음
-자식을 제외한 후손에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아님
Section2 CSS3 박스 속성
3. 박스 속성
◎ box-sizing
-요소의 크기 계산 기준을 지정
| 속성 값 |
의미 |
기본값 |
| content-box |
너비(width, height)만으로 요소의 크기를 계산 |
content-box |
| border-box |
너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 박스모델</title>
<style>
* {
margin: 0;
padding: 0;
}
div{
width: 100px; /* 요소의 가로 영역 */
height: 100px; /* 요소의 세로 높이 */
margin: 50px; /* 테두리 바깥쪽 여백 */
padding: 20px; /* 테두리 안쪽 여백 */
border: 5px solid black; /* 테두리 */
background-color: orange;
font-size: 24px;
font-weight: bold;
}
/* 1. content-box : 기본값, 패딩과 테두리 수치를 영역 밖으로 아웃사이드 처리 */
/* 요소의 가로폭 = width + padding*2 + border*2 */
/* 150 = 100 + 20*2 + 5*2 */
.box01{ box-sizing: content-box; }
/* 2. border-box : 패딩과 테두리 수치를 영역 안으로 인사이드 처리 */
/* 요소의 가로폭 = width */
.box02{ box-sizing: border-box; }
</style>
</head>
<body>
<div class="box01">Content-Box</div>
<div class="box02">Border-Box</div>
</body>
</html>
◎display
| 속성 값 |
의미 |
기본값 |
| block |
블록 요소(<div> 등) |
|
| inline |
인라인 요소(<span> 등) |
|
| inline-block |
인라인 요소(<input> 등) |
|
| 기타 |
table, table-cell, flex 등 |
|
| none |
요소의 박스 타입이 없음(요소가 사라짐) |
|
dispaly_inline
<head>
<style>
span {
display: block;
width: 200x;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<span></span>
</body>
인라인 요소는 기본적으로 너비와 높이를 가지지 못하며 텍스트를 다루는데 특화 되어 있음
하지만 디스플레이를 사용하여 불록으로 변경하면 너비 높이를 사용가능하게 바꾸므로 블록의 특성을 사용헐 수 되었음
display_inlineblock
<head>
<style>
input {
display: inline-block;
width: 100px;
height: 20px;
margin: 50px 0;
padding: 20px 0;
}
input:nth-child(2) {
display: none;
}
</style>
</head>
<body>
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
</body>
<input> 태그가 옆으로 쌓이므로 기복적으로 인라인 요소임. 하지만 블록요소의 기능도 가지므로 너비와 높이를 가질 수 있고 패딩과 마진 또한 설정가능함. display를 none으로 설정하면 화면에서 보이지 않는 것이 아니라 아예 사라짐
Section3 CSS3 레이아웃
◎position
-텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성
<position에 사용되는 속성값>
| 구분 |
속성값 |
설명 |
| 정적 위치 설정 |
position: static; |
각종 요소를 웹 문서의 흐름에 따라 배치 |
| 상대 위치 설정 |
position: relative; |
웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 져 있는지 표시하여 배치하는 방법 |
| 절대 위치 설정 |
position: absolute; |
전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치하는 방법 |
| 고정 위치 설정 |
position: fixed; |
요소의 위치를 '절대 위치 설정'과 똑같은 방법으로 배치하되, 창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음 |
◎정적 위치 설정
-텍스트, 이미지, 표 등을 웹 문서의 흐름에 따라 배치하는 방법
-블록 요소는 위에서 아래로 쌓이고, 인라인 요소는 같은 줄에 순서대로 배치
정적 위치 설정으로 요소 배치하기
<head>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.sp1 {
position: static;
top: 100px; /* 적용되지 않음 */
background-color: cyan;
width: 400px;
height: 50px;
}
.sp2 {
position: static;
left: 30px; /* 적용되지 않음 */
background-color: orange;
width: 400px;
height: 50px;
}
.sp3 {
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style1</h1>
<p class="sp1">정적 위치 설정 적용1</p>
<div class="sp2">정적 위치 설정 적용2</div>
<p class="sp3">기본 위치 설정</p>
</body>
◎ 상대 위치 설정
-각종 요소가 웹 문서의 정적 위칫값에서 상대적으로 얼마나 떨어져 있는지 표시하여 배치하는 방법
상대 위치 설정으로 요소 배치하기
<head>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.sp {
position: static;
left: 30px; /* 적용되지 않음 */
background-color: cyan;
width: 400px;
height: 50px;
}
.rp1 {
position: relative;
left: 30px; /* 적용되지 않음 */
top: -10px;
background-color: orange;
width: 400px;
height: 50px;
}
.rp2 {
position: relative;
left: 60px; /* 적용되지 않음 */
top: 20px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style2</h1>
<p class="sp">정적 위치 설정 적용</p>
<div class="rp1">상대 위치 설정 적용 - left 30px, top -10px</div>
<p class="rp2">상대 위치 설정 적용 - letf 60px, top 20px</p>
</body>
◎절대 위치 설정
-웹 문서의 흐름과는 상관없이 전체 페이지를 기준으로 top, right, bottom, left의 속성을 이용하여 원하는 위치에 배치시키는 방법
절대 위치 설정으로 요소 배치하기
<head>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.ap1 {
position: absolute;
left: 30px;
top: 70px;
background-color: yellow;
width: 400px;
height: 50px;
}
.ap2 {
position: absolute;
left: 40px;
top: 90px;
background-color: lightgreen;
width: 400px;
height: 50px;
}
.rp {
position: relative;
left: 50px;
top: 80px;
background-color: cyan;
width: 400px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style3</h1>
<div class="ap1">절대 위치 설정 적용 - left 30px, top 70px</div>
<div class="ap2">절대 위치 설정 적용 - left 40px, top 90px</div>
<div class="rp">상대 위치 설정 적용 - left 50px, top 80px</div>
</body>
◎고정 위치 설정
-창의 스크롤을 움직여도 사라지지 않고 고정된 위치에 그대로 있음
고정 위치 설정으로 요소 배치하기
<head>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.p {
background-color: yellow;
width: 300px;
height: 50px;
}
.fp {
position: fixed;
right: 5px;
top: 5px;
background-color: lightgreen;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<h1>positioning style4</h1>
<p class="p">기본 위치 설정 박스1</p>
<p class="p">기본 위치 설정 박스2</p>
<p class="p">기본 위치 설정 박스3</p>
<p class="p">기본 위치 설정 박스4</p>
<p class="p">기본 위치 설정 박스5</p>
<p class="fp">고정 위치 설정 박스 : 오른쪽 스크롤 위아래로 이동해보기</p>
</body>
◎position-sticky
-창의 스크롤 영역 기준으로 배치
-스크롤을 생성하여 Sticky의 영역을 조절 할 수 있음
◎overflow
-auto로 설정하면 이미지가 박스 영역을 벗어나는 현상을 해결할 수 있음
-요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어하는 기능
| 속성 값 |
의미 |
기본값 |
| visible |
넘친 부분을 자르지 않고 그대로 보여줌 |
visible |
| hidden |
넘친 부분을 잘라내고, 보이지 않도록 함 |
|
| scroll |
넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함 |
|
| auto |
넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 볼 수 있도록 함 |
|
cf) visibility: hidden;
overflow
<head>
<style>
.parent {
width: 300px;
height: 250px;
border: 4px solid;
overflow: visible;
/* hidden, scroll, auto */
/* overflow-x: hidden;
overflow-y: hidden;*/
}
.parent .child {
width: 100px;
height: 100px;
border: 4px solid;
background: green;
border: 4px solid red;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
◎opacity
-요소의 투명도를 지정하는 기능(opacity를 0으로 한 것과 display: none으로 한 것은 다름)
overflow
<head>
<style>
div {
width: 300px;
height: 250px;
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div>안녕하세요</div>
</body>
ch) 0:투명, 1:불투명
◎z-index
-한 요소 위에 다른 요소를 쌓을 때 사용
-z-index 속성값이 작을수록 아래에 쌓임
z-index 속성값에 따라 요소들이 쌓이는 순서 확인하기
<head>
<style>
#box1 {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background: blue;
z-index: 3;
}
#box2 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: yellow;
z-index: 2;
}
#box3 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background: green;
z-index: 1;
}
</style>
</head>
<body>
<div id="box1">box#1</div>
<div id="box2">box#2</div>
<div id="box3">box#3</div>
</body>
◎Stack order
-요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자가 가깝게 있는지(더 위에 쌓이는지)를 결정(z축)
1.static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)
2.position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3.position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면 'HTML'의 마지막 코드일수록 위에 쌓임(나중에 작성한 코드(요소))
position>z-index>HTML마지막코드
참고사이트)
<코딩 테스트>
CodePen
https://codepen.io/
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io