FRONT END/CSS
1일(06.29) 여백 / 크기와 관련된 CSS 속성 -박스모델, display 속성
라미보
2022. 7. 10. 21:16
-박스 모델은 블록 레벨요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다.
블록 레벨 요소와 인라인 레벨 요소
블록 레벨 요소는 태그를 사용해 요소를 삽입 했을때 혼자 한줄을 차지하는 요소이다.
한줄을 다 차지한다는것은 넓이가 100%라는 의미, 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다.
너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다.
대표적인 태그: <div> <p>
인라인 레벨요소는 줄을 차지하지 않는 요소.
즉, 화면에 표시되는 콘텐츠만큼만 영역으 ㄹ차지하고 나머지 공간에는 다른 요소가 올 수 있다.
따라서 한 줄에 여러 개의 인랑니 레벨요소를 표시 할 수 있다.
대표적인 태그: <img><strong>
💾 박스모델(box model) - 박스 형태의 콘테츠
box model
- 웹문서 안에서 여러 요소들을 원하는 위치에 배치하려면 css 박스모델에 대해 알고있어야 한다.
- 모든 요소(태그)는 여러 겹의 box로 둘러 쌓여 있다고 가정한다.
박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠영역 사이의 여백인 패딩(padding), 박스의 테두리(border),
그리고 여러 박스 모델 사이의 여백인 마진(margin)등의 요소 구성
연관된 속성들
| 영역 | 설명 | 속성 |
| 내용(content) | 요소에 포함된 내용 | |
| 패딩(padding) | 내용과 보더 사이의 여백 | 안쪽 여백 지정하기 |
| 보더(border) | (내용+패딩)의 테두리 선 | 테두리 지정하기 |
| 마진(margin) | 보더와 다른 요소 사이의 여백 | 바깥 쪽 여백 지정하기 |
- trbl = top right bottom left 순으로 여백을 지정한다.
- margin-left : 왼쪽 여백만 지정한다.
<!DOCTYPE HTML>
<html>
<head>
<title>요소의 크기 지정 및 여백 처리하기</title>
<meta charset="UTF-8" />
<style type="text/css">
p{
border :2px dotted cyan;
padding:10px 20px 50px 100px; /*trbl = top right bottom left 순으로 여백을 지정해준다. padding:안쪽여백*/
margin: 50px 20px; /*margin:바깥쪽여백*/
margin-left:30px; /*왼쪽 여백만 지정*/
}
/*p영역 테두리*/
</style>
</head>
<body>
<h1>알버트 아인슈타인 어록 </h1>
<div>
<p>It's not that I'm so smart , it's just that I stay with problems longer. <br />
나는 똑똑한 것이 아니라 단지 문제를 더 오래 연구할 뿐이다. </p>
<p>I never came upon any of my discoveries through the process of rational thinking. <br />
나는 단 한번도 이성적인 사고를 통해 발견한 적이 없다. </p>
<p>Technological progress is like an axe in the hands of a pathological criminal. <br />
기술의 진보는 마치 병적인 범죄자의 손에 든 도끼와 같다.</p>
</div>
</body>
</html>
✔ width, height 속성 - 콘텐츠의 영역 크기
- 박스모델에서 콘텐츠 영역의 키기를 지정할 때는 너비를 지정하는 width, 높이를 지정하는 height 속성을 사용
width: <크기> | <백분율> | auto
height : <크기> | <백분율> | auto
| 속성 | 설명 |
| <크기> | 너비나 높이 값을 px(픽셀)이나 cm같은 단위와 함께 수치로 지정 |
| <백분율> | 박스모델을 포함하는 부모요소를 기준으로 너비나 높이 값을 백분율(%)로 지정 |
| auto | 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정, 기본 값 |
.box1 {
width: 400px; → 고정 너비
}
.box2 {
width: 50%; → 가변 너비 - 브라우저 창 너비의 50%
}
✔ display 속성 - 화면 배치 방법 결정하기
- display 속성은 해당 요소가 화면에 어떻게 보일지를 지정 할 때 사용
- display 속성을 사용하면, 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있다.
display : none | contents | block | inline | inline-block | table | table-cell 등
💾 border -테두리
✔ border-style : 테두리 스타일
- 네 곳의 테두리선 스타일을 동시에 정함
- border-top-style, border-right-style, border-bottom-style, border-left-style 순으로 결정된다.
border-style : none | dotted | dashed | solid | double | groove | ridge | insert | outset
| 속성 | 내용 |
| dotted | 테두리를 점선으로 표시 (.....) |
| dashed | 테두리를 짧은 선 (직선으로 된 점선 ) 으로 표시합니다. |
| solid | 테두리를 실선(----)으로 표시 |
| double | 이중선으로 표시 , 두 선 사이의 간격은 border-width로 값 지정 |
| groove, ridge | groove(오목한 실선), ridge(볼록한 실선) |
| inset, outset | 테두리 선에 음영이 있음 |
<!DOCTYPE HTML>
<html>
<head>
<title>다양한 속성으로 테두리 표시하기 </title>
<meta charset="UTF-8" />
<style type="text/css">
p{
/* border-bottom: 1px dashed; /*p영역의 아래쪽만 테두리를 적용시킨다.*/
border-bottom: dashed;
border-bottom-style: 1px;
border-bottom-color: blue;
}
</style>
</head>
<body>
<h1>알버트 아인슈타인 어록 </h1>
<div>
<p>It's not that I'm so smart , it's just that I stay with problems longer. <br />
나는 똑똑한 것이 아니라 단지 문제를 더 오래 연구할 뿐이다. </p>
<p>I never came upon any of my discoveries through the process of rational thinking. <br />
나는 단 한번도 이성적인 사고를 통해 발견한 적이 없다. </p>
<p class="removeLine">Technological progress is like an axe in the hands of a pathological criminal. <br />
기술의 진보는 마치 병적인 범죄자의 손에 든 도끼와 같다.</p>
</div>
</body>
</html>
✔ border-radius : 박스 모서리 둥글게 만들기
- border-radius 속성을 이요하면 박스 모서리 부분을 손쉽게 다양한 형태로 처리
| 속성 | 값 | 기능 |
| border-radius | px, em 과 같은 다위를 사용한 문자 (CSS3) | 상하좌우 각 방향으로 모서리가 둥근 형태의 모델 요소를 만들어 준다. |
| border-top-left-radius | ||
| border-top-right-radius | ||
| border-bottom-left-radius | ||
| border-bottom-right-radius |
<!DOCTYPE HTML>
<html>
<head>
<title> 모서리가 둥근 테두리 만들기 </title>
<meta charset="UTF-8" />
<style type="text/css">
.round1{
border: 10px solid #ff9933; /*round1 자리에만 테두리가 생긴다.*/
/*border-radius: 10px 20px 30px 40px;*/ /*시계방향으로 위치마다 둥글게 되는 각도가 달라진다.*/
border-radius: 50px 30px; /*테두리의 둥근모양을 조절할 수 있다.*/
}
</style>
</head>
<body>
<div>
<p class="round1">
Whenever you are asked if you can do a job, tell <br />
"Certainly I can!" Then get busy and find out how to do it. <br />
(Theodore Roosevelt)
</p>
<p class="round2">
당신이 어떤 일을 해낼 수 있는지 누군가가 물어보면 대답해라. <br />
"물론이죠!" 그 다음 어떻게 그 일을 해낼 수 있을지 부지런히 고민하라. <br />
(시어도어 루스벨트)
</p>
</div>
</body>
</html>
💾 background 속성
| 속성 | 값 | 기능 |
| background-repeat | repeat, repeat-x, repeat-y, no-repeat, inherit | 배경 이미지의 반복 여부를 지정 |
| background-attachment | background-attachment : scroll | fixed fixed(배경 이미지 위치 고정), scroll(기본 값으로 배경움직인다.), inherit |
배경 이미지가 존재하는 경우 화면의 스크롤이 이동하더라도 이미지를 고정적으로 보여줄 것인지 여부 지정 브라우저의 화면에 고정/비고정 정해주는 속성 |
| background | 배경 속성을 한 번에 지정할 수 있는 축약 속성 속성의 값은 배경색, 베경 이미지의 반복 여부, 스크롤시 배경 이미지 고정여부, 배경 이미지 위치 순서대로 지정해야 한다. |
|
| background-clip(CSS3) | padding-box, border-box, content-box | 배경 이미지가 잘리는 영역을 지정 |
| background-origin(CSS3) | padding-box, border-box, content-box | 배경 이미지가 처음 시작하는 위치 기준 지정 |
| background-size(CSS3) | cover, contain 숫자와 함께 px, % 같은 단위 사용 | 배경 이미지가 채워지는 크기 지정 |
✔background-Repeat
- 배경 이미자가 존재하는 경우, 이것을 화면에 반복해서 표시할지 여부를 결정하는데 사용
- 배경으로 사용하는 그림은 기본적으로 바둑판 식, 즉 x,y 방향 모두 연속되게 출력
- 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있음
| 속성 | 내용 |
| repeat | 가로, 세로 모두 연속됨 |
| repeat-x | 가로 방향으로만 연속 |
| repeat-y | 세로 방향으로마 연속 |
| no-repeat | 그림 한개만 나옴 |
✔background -position
- 배경 그림이 들어갔을 때, 이미지의 초기 위치를 지정한다.
- 기본값은 0%, 0%임
background-position : [퍼센트값 | 길이][top | center | bottom] || [left | center | right]
✔background -size
- 배경 이미지의 크기를 조정할 수 있는 옵션
- 백분율 지정시에는 배경 이미지가 적용되는 요소의 크기를 기준으로 한다.
예시) div 요소의 크기가 300*200 일 때, 배경 이미지 크기를 50%, 50%로 지정했다면, 실제 이미지 크기는 150*100 픽셀이 된다.
background-size : px | % | auto | cover | contain
background-size : 가로크기 세로크기;
<!DOCTYPE HTML>
<html>
<head>
<title>요소의 배경 처리하기</title>
<meta charset="UTF-8" />
<style type="text/css">
body{
background-color:silver;
background-image: url(./../images/shoes1.png);
/* background-repeat: repeat-y;*/ /*y축 세로로 반복해라*/
background-position: top right; /*시작하는 위치*/
background-attachment: fixed; /*배경 고정*/
}
div{
background: url(./../images/bg1.png) repeat-y top left fixed;
}
</style>
</head>
<body>
<div>
<p>Well done is better than well said.</p>
<p>Seeing much, suffering much, and studying much, are the three pillars of learning. </p>
<p>Education is a progressive discovery of our own ignorance. </p>
<p>I want to know God's thoughts; the rest are details.</p>
<p>When all think alike, no one thinks very much.</p>
<p>Science is a wonderful thing if one does not have to earn one's living at it. </p>
<p>It's not that I'm so smart , it's just that I stay with problems longer.</p>
<p>Theories should be as simple as possible, but not simpler. </p>
<p>Technological progress is like an axe in the hands of a pathological criminal.</p>
<p>I never came upon any of my discoveries through the process of rational thinking. </p>
<p>Try not to become a man of success but rather to become a man of value. </p>
<p>Gravitation cannot be held responsible for people falling in love.</p>
<p>What is written without effort is in general read without pleasure. </p>
<p>Sincerity is the way of Heaven. </p>
<p>The man who moves a mountain begins by carrying away small stones.</p>
<p>While there's life, there's hope. </p>
<p>Paradise is where I am. </p>
</div>
</body>
</html>
💾 그림자 효과 속성 - 선택한 요소에 그림자 효과 내기
| 속성 | 값 | 기능 |
| text-shadow | 사용법 text-shadow : h-shadow v-shadow blur color 속성값의 의미는 다음과 같다. h-shadow : 그림자의 가로 위치(필수) v-shadow : 그림자의 세로 위치(필수) blur : 그림자의 번짐 정도(선택) color : 그림자 색(선택) |
텍스트에 그림자 효과를 적용 |
| box-shadow | 사용법 box-shadow: h-position v-position blur spread color inset; h-position : 가로 위치(필수) v-position : 세로 위치(필수) blur : 그림자의 흐림 정도(optional) spread : 그림자의 크기(optional) color : 그림자의 색깔(optional) inset : 그림자를 박스 안쪽에 만든다.(optional) |
박스에 그림자 효과를 적용 |
<!DOCTYPE HTML>
<html>
<head>
<title>그림자 효과 만들기</title>
<meta charset="UTF-8" />
<style type="text/css">
h1{
width: 400px;
background: yellow;
text-align: center;
text-shadow: 10px 20px 15px #000; /*그림자의 위치:10px 20px 그림자의 번짐정도:15px 그림자색: #000*/
box-shadow: 10px 20px 15px #ff0066;
}
</style>
</head>
<body>
<h1>Box Shadow</h1>
<div>
<p>Try not to become a man of success but rather try to become a man of value. <br />
(Albert Einstein)
성공한 사람이 아니라 가치 있는 사람이 되려고 힘써라. <br />
(알버트 아인슈타인)
</p>
</div>
</body>
</html>
text-shadow: 10px 20px 15px #000;
: 그림자의 위치:10px 20px 그림자의 번짐정도:15px 그림자색: #000
💾 투명도와 관련된 속성
| 속성 | 값 | 기능 |
| opacity | inherit 0.0(완전 투명) ~ 1.0(완전 불투명) | 요소의 투명도를 지정 숫자가 낮을수록 투명에 가깝다. |
| RGBA Color | rgba(red, green, blue, alpha) red, green, blue 값은 0 ~ 255 alpha 값은 0.0 ~ 1.0 |
color, border-color 등과 같은 색상 값에 사용 되며 쉼표를 이용해 빨강, 녹색, 파랑과 함께 투명도를 지정합니다. |
| HSLA Color | hsla(hue색상, saturatuin 채도, luminance 휘도, alpha) hue 값은 0~255 saturation , luminance는 0~100% alpha 값은 0.0 ~1.0 |
color, border-color 등과 같은 색상을 지정하는데 사용(CSS3) 색상 : 0~360도 채도 : 0(흑백) ~ 100% (색상을 모두 나타낸다.) 휘도 : 명도와 같은 개념으로 밝기를 나타내는데, 값이 높을수록 밝아진다. |
💾 테이블과 관련된 속성
| 속성 | 값 | 기능 |
| border-collapse | collapse : 이웃하는 테이블이나 셀의 테두리 선을 겹쳐서 표현 separate(디폴트) : 이웃하는 테이블이나 셀의 테두리 선을 분리시켜 표현(셀 구분을 두 줄로)한다. |
테이블 요소에 사용 테두리가 겹쳐져 있을 경우 분리시키거나 병합 |
| border-spacing | inherit 숫자와 함께 px와 같은 단위 사용 | 테이블 요소에 사용하며 셀과 셀 사이의 간격을 지정 |
| caption-side | top, botton,inherit | caption 요소를 사용하여 삽입할 테이블 캡션(표 제목)의 위치를 지정합니다. |
| empty-cells | hide, show, inherit | 내용이 없는 빈 셀의 처리 방식을 지정 |
| table-layout | auto, fixed, inherit | 테이블에 사용하는 레이아웃 형식을 지정 |
<!DOCTYPE HTML>
<html>
<head>
<title>테이블에 관련된 속성 알아보기 </title>
<meta charset="UTF-8" />
<style type="text/css">
#table1{
border: 1px solid; /* 전체 겉에만 테두리가 생긴다.*/
}
#table1 th, #table1 td { /*안쪽 테두리가 생긴다.*/
border: 1px solid;
padding: 5px 10px; /*위 아래*/
}
#table1 th{ /*테이블 th의 자손에 배경색을 넣었음*/
background-color: #b2ebf4;
}
#table1 td:first-child{
background-color : #f00;
}
/*
#table1 td[colspan]{ [colspan] : 속성있는곳에
background-color : yellow;
}*/
#table1 tr:last-child td{ /* table 자식 tr의 마지막자손 td에 접근하여 색을 바꾼다.*/
background-color : yellow;
}
</style>
</head>
<body>
<table id="table1">
<caption>렌터카 요금표</caption> <!-- 테이블에 제목을 달고싶을때 -->
<tr>
<th>차종 </th> <!-- th를 쓰면 굵고 가운데정렬을 해준다. -->
<th>24시간</th>
<th>48시간</th>
<th>72시간</th>
<th>추가요금</th>
</tr>
<tr> <!-- td는 자식이다. th의 첫번째 자식 -->
<td>SM3</td> <!--th의 첫번째 자식 -->
<td> 45,000</td>
<td> 90,000</td>
<td> 135,000</td>
<td> 6,000</td>
</tr>
<tr>
<td>모닝</td>
<td>42,000</td>
<td>84,000</td>
<td>126,000</td>
<td>6,000</td>
</tr>
<tr>
<td>쏘울</td>
<td> 61,000</td>
<td> 122,000</td>
<td> 183,000</td>
<td> 9,000</td>
</tr>
<tr>
<td>윈스톰</td>
<td> 94,000</td>
<td> 188,000 </td>
<td> 282,000</td>
<td> 13,000</td>
</tr>
<tr>
<td colspan="5">제주 5월 기준이며 추가 요금은 시간당입니다. </td>
</tr>
</table>
<table id="table2">
<caption>렌터카 요금표</caption>
<tr>
<th>차종 </th>
<th>24시간</th>
<th>48시간</th>
<th>72시간</th>
<th>추가요금</th>
</tr>
<tr>
<td>SM3</td>
<td> 45,000</td>
<td> 90,000</td>
<td> 135,000</td>
<td> 6,000</td>
</tr>
<tr>
<td>모닝</td>
<td>42,000</td>
<td>84,000</td>
<td>126,000</td>
<td>6,000</td>
</tr>
<tr>
<td>쏘울</td>
<td> 61,000</td>
<td> 122,000</td>
<td> 183,000</td>
<td></td>
</tr>
<tr>
<td>윈스톰</td>
<td> 94,000</td>
<td> 188,000 </td>
<td> 282,000</td>
<td></td>
</tr>
<tr>
<td colspan="5">제주 5월 기준이며 추가 요금은 시간당입니다. </td>
</tr>
</table>
</body>
</html>