1. CSS 기본 스타일 변경
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
body > div {
font-size: 16px;
/* 배경 색 */
background-color: azure;
/* 글씨체, 글꼴
웹 폰트를 사용할 수도 있다. */
font-family: "Bell MT";
}
.spanClass {
/* red, rgba(255, 0, 0, 0.5), #ff0000 다양한 표현들 */
color : rgba(255, 0, 0, 0.5);
/* px(고정적인 값), em(상대적인 값, 상위에 있는 크기를 가변하는 것) */
font-size: 2em;
}
</style>
</head>
<body>
<div>
<span class="spanClass"> HELLO World! ☺ </span> <!-- 이모티콘 사용 가능-->
</div>
</body>
</html>
2. Element가 배치되는 방법(CSS layout, Rendering)
엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 한다.
부스트코스 강의에서는 편의상 배치라고 하고 있다.
기본 엘리먼트는 위에서 아래로 배치되는 것이 기본이다.
하지만 웹사이트의 배치는 다양하게 표현 가능하고 있다.
이처럼 다양한 방식으로 배치할 수 있도록 CSS에서 다양한 속성을 활용하고 있다.
중요하게 이해해야 할 속성은 다음과 같다.
display(block, inline, inline-block)
position(static, absolute, relative, fixed)
float(left, right)
1) display
display: block, display: inline-block
display 속성이 block이거나 inline-block인 경우 한 영역을 차지하는 박스형태를 가진다.
block은 width, height, margin, padding 값을 지정할 수 있으며, <div>, <p>, <h1> 태그 등을 대표로 들 수 있다.
inline-block의 경우 한 라인에 나란히 배치되며 width, height, margin, padding 값을 지정할 수 있다.
display: inline
display 속성이 inline인 경우는 우측으로, 그리고 아래쪽으로 컨텐츠 영역만큼 자동으로 설정된다.
줄바꿈 없이 라인에 나란히 배치된다.
보통 <span>, <a>, <em> 등의 태그처럼 주로 텍스트를 주입할 때 사용되는 형태다.
높이(height)와 넓이(width)를 지정해도 반영이 되지 않으며, margin, padding 속성 또한 좌우 간격만 반영이 된다.
2) position
position 속성은 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것
주로 top, left, bottom, right 속성과 같이 사용한다.
position: static
position의 기본 값은 static이며, 그냥 순서대로 배치된다.
.wrap {
position:relative;
}
.wrap > div {
width:150px;
height:100px;
border:1px solid gray;
font-size:0.7em;
text-align:center;
line-height:100px;
}
position: relative
요소를 원래 위치에서 벗어나게 배치할 수 있다.
원래 위치를 기준으로 상대적(relative)으로 배치한다고 생각하면 된다.
.relative {
position:relative;
left:10px;
top:10px;
}
position: absolute
배치 기준점을 자신이 아니라 상위 요소로 단계적으로 찾아간다.
DOM tree를 따라 올라가다가 static 속성이 아닌 position을 기준으로 본다.
그 다음 position: static을 제외한 position 속성이 없다면, 최상위 <body> 요소를 배치 기준으로 잡는다.
.absolute {
position:absolute;
left:130px;
top:30px;
}
position: fixed
요소를 항상 고정된(fixed) 위치에 배치한다.
배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 전체화면이기 때문에 좌측, 맨 위를 기준으로 한다.
.fixed {
position:fixed;
top:250px;
}
3) margin
margin은 top, left, bottom, right의 속성을 가진 테두리(border)와 이웃하는 요소 사이의 간격입니다.
4) float: left, right clear: both overflow: auto
일반적인 배치 상태에서 float는 벗어난 형태로 특별히 배치된다.
따라서 뒤에 block 엘리먼트가 float된 엘리먼트를 의식하지 못하고 중첩되어 배치된다.
float의 속성은 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용된다.
clear 속성으로 float 속성을 적용하고자 하는 요소가 모두 등장한 이후 더는 flaot 속성에 영향을 받지 않도록 설정 가능
float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크다면, 해당 요소의 일부가 밖으로 흘러넘치게 된다.
이때 overflow 속성 값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.
5) box-model
블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.
margin, padding, border, outline, content로 이루어져 있는 것
6) 요소의 크기
block 요소의 크기는 기본적으로는 부모의 크기만큼을 가진다.
예를 들어, width:100%는 부모의 크기만큼을 다 갖는 것과 같다.
7) box-sizing과 padding
padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다.
그리고 box-sizing 속성으로 이를 컨트롤 할 수 있다.
box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 값만 늘릴 수 있다.
