CSS
HTML은 웹 페이지의 구조를 담당하는 마크업 언어였습니다. CSS는 웹 페이지를 꾸미는 역할을 합니다. 폰트의 크기, 배경 색, 스크롤 모양 등을 꾸며주는 것이죠. 확장자는 .css입니다. HTML파일에서 작성한 CSS파일을 불러와 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paradigm Shift</title>
<link rel="stylesheet" href="css/main.css">
</head>위의 코드에서 <link>태그를 사용했습니다. 이 태그를 이용해 css파일을 불러오면 됩니다. 이 태그는 head태그 안에 작성되어 있다는 것을 기억하세요.
css파일을 불러올 때는 rel속성에 stylesheet라는 것을 명시해줍니다. href속성에 css파일의 경로를 적어주면 해당 위치의 css파일을 불러오게 되는 것이죠.
그렇다면 CSS를 작성하는 법을 알아보죠.
HTML에 CSS 적용하기
CSS는 파일을 불러와서 작성하는 것 말고도 작성하는 방법이 더 있습니다.
<style> 태그
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paradigm Shift</title>
<style>
/*여기에 css를 작성합니다.*/
</style>
</head>위의 코드처럼 <style>태그에 작성하는 것입니다.
인라인 방식
HTML 요소 자체에 스타일을 적용하는 방법도 있습니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paradigm Shift</title>
<style>
/*여기에 css를 작성합니다.*/
</style>
</head>
<body>
<div style="color:red"></div>
</body>
위의 코드에서 div태그에 css를 입힌 것을 확인할 수 있죠. 이처럼 css를 적용하는 방식은 많지만, 인라인으로 적은 css가 우선순위가 높습니다. 즉, 파일로 불러오거나 head내에서 css를 적용해도 인라인 방식으로 적은 css가 나중에 적용된다는 것입니다. 그렇다고 이전에 작성한 모든 css가 적용이 안되는 것이 아니라 같은 이름의 프로퍼티만 덮어 씌워집니다.
CSS 문법
CSS는 선택자와 프로퍼티, 값으로 이루어져 있습니다. 아래의 예시를 보세요.
div{
color: 'red';
font-size: '16px';
}위와 같은 형식으로 사용합니다. 먼저 선택자는 {}앞에 작성하고, 어떤 태그에 css효과를 적용할 지 정하는 역할을 합니다. 선택자의 경우 앞서 보았던 emmet과 굉장히 유사하니 어렵지 않을 것입니다. 마지막에 ;을 붙이는 것을 기억하세요. 여러 프로퍼티를 적용하고 싶다면 그냥 다음줄에 작성하면 됩니다.
프로퍼티는 color나 font-size처럼 다양한 스타일을 정의하는 것인데요. 태그마다 적용할 수 있는 프로퍼티가 다를 수도 있습니다. 하지만, 대부분의 태그가 공통으로 적용할 수 있는 것이 훨씬 많죠.
값은 프로퍼티 뒤에 나오는 것입니다. 해당 프로퍼티가 어떤 값을 갖을 지 적어주면 됩니다.단, 그 프로퍼티가 가질 수 있는 '키워드'나 '크기 단위' 혹은 '특정 단위'로 지정해야 하죠. 위의 경우 color가 가질 수 있는 색상 키워드인 red를 값으로 넣은 것이고, font-size가 가질 수 있는 크기 단위인 px을 이용해서 16px이란 값을 넣어준 것입니다.
절대 단위와 상대 단위
CSS를 작성하다 보면 단위를 적는 경우가 많습니다. 거의 대부분 단위를 적어줘야 하죠. 이때, 단위는 어떻게 적어야 할까요? 우선, 단위에는 절대와 상대의 개념이 존재합니다.
- 절대 단위 : 단위의 크기가 정해진 경우입니다.
- 상대 단위 : 단위의 크기가 유동적으로 변할 수 있는 경우입니다.
모두 같은 크기의 노트북을 가지고 있지 않고, 같은 성능을 내는 모니터를 가지고 있지 않습니다. 그렇기 때문에 절대 단위를 이용해서 CSS를 작성하면 예상치 못하게 레이아웃이 벗어나는 경우가 발생하거나, 폰트의 크기가 맞지 않는 경우가 있을 수 있죠.
하지만, 상대 단위를 사용한다면 웹 페이지가 보여지는 화면에 따라 상대적으로 크기가 정해질 수 있습니다.
그렇다면 단위를 나타내는 것은 무엇이 있을까요? 대표적인 것들만 소개하겠습니다.
- 절대 단위 : px, pt 등
- 상대 단위 : %, vw, vh, rem, em 등
px은 고정된 크기의 단위이기 때문에 앞서 말씀드린 문제가 발생할 수 있습니다. rem을 사용하는 것이 더 좋을 수 있겠죠.
px rem em
px은 절대 단위이고 rem과 em은 상대 단위라는 차이를 알았습니다.
그렇다면 rem과 em이 정확히 무엇일까요?
rem은 현재 문서의 root의 글자 크기의 비율을 의미합니다. 즉, 브라우저의 폰트 크기가 16px이라면 1rem은 16px을 의미하죠. 0.5rem은 8px을 의미하게 됩니다. root는 최상위 요소 즉, html태그를 의미하겠네요.
em은 현재 요소의 font-size를 기준으로 합니다. 최상위 요소가 아닌 것이죠. 이것의 문제는 무엇이냐면 현재 요소의 font-size를 결정할 수 있는 요소가 생각보다 많을 수 있습니다. 기본적으로 font-size는 상속이 되기 때문에 상위 요소에서 정해진 크기가 그대로 사용됩니다. 서로 다른 부모의 자식 태그들이 같이 1em을 써도 부모 태그의 font-size가 다르다면 다른 값을 의미하겠죠. 그렇기 때문에 값을 정확하게 예측할 수 없습니다.
이러한 이유들로 em보다는 rem을 사용하는 것을 권장합니다.
박스 모델
CSS 코드를 작성하다 보면 너비와 높이를 계산하는 경우가 많습니다. 너비를 계산하는 경우 고려해야할 것들을 알아 봅시다.
block vs inline, inline-block
각 태그마다 줄 바꿈이 되는 요소가 있고, 그렇지 않은 태그가 있습니다. 이는 박스 모델과 관련있습니다. 보통 각 태그의 콘텐츠는 하나의 영역을 차지하고 이를 박스라고 합니다.
한 줄 전체를 가지는 태그를 block박스라고 합니다. 한 줄이라는 것은 줄 바꿈이 일어난다는 의미입니다. 즉, 다음 태그는 해당 태그 다음 줄에 보여진다는 것이죠.
그렇지 않은 태그를 inline박스라고 합니다. 크기가 콘텐츠의 크기와 동일한 요소를 말합니다. inline박스 요소들은 block박스에서 적용할 수 있는 css프로퍼티가 무시되는 경우가 있습니다. 예를 들면 width와 height가 있습니다. 쉽게 생각하면, 자신의 콘텐츠 크기만큼 최대한 줄어든다고 생각하세요.
inline-block은 inline박스와 같이 작동하지만, 자체적으로 크기를 갖기 때문에 block박스처럼 width와 height를 변경할 수 있습니다.
박스 구성 요소
박스가 어떤 것인지 알았으니 박스를 구성하는 것을 알아 봅시다. 박스는 단순히 콘텐츠만으로 정해지지 않습니다. 개발자 도구를 열어 요소를 클릭해보세요. style 탭에서 이상한 박스모양을 볼 수 있습니다. 이것이 박스를 구성하는 요소입니다.
위 사진에서 오른쪽 밑에 보이는 박스입니다.
border
border은 테두리라는 의미입니다. 콘텐츠의 바깥에 테두리를 담당합니다. 사진에서 보면 노란색에 위치합니다. 실제로 보고싶다면 아래의 css를 적용하면 테두리가 적용됩니다.
div{
border: 1px solid black;
}padding
padding은 border와 실제 콘텐츠 사이의 공간을 의미합니다. 내부 여백이라고도 합니다.
p {
padding: 10px 20px 30px 40px;
}margin
margin은 border 바깥의 여백을 의미합니다. 다른 요소와 간격을 두고 싶을 때 사용하면 됩니다.
p {
margin: 10px 20px 30px 40px;
}여백을 줄 때 순서는 top right bottom left 순입니다. 만약 3개로 적게 되면 top left+right bottom 순으로 적용되고, 2개로 적으면 top+bottom left+right로 적용됩니다. 1개를 적으면 모든 위치에 같은 값이 적용되죠.
쉽게 생각하면 위에서부터 시계방향으로 적용된다고 생각하세요.
박스를 벗어난 경우
만약 콘텐츠 길이가 박스의 너비나 높이를 넘어가게 되는 경우가 생길 수 있습니다. 이런 경우 따로 처리를 하지 않게 되면 넘어간 내용이 모두 출력되어 다른 요소와 겹쳐 보이는 경우가 발생할 수 있죠.
이럴 때 박스 크기에 맞게 처리하는 방법이 존재합니다. 예를 들면 스크롤이 생기는 것이죠.
overflow
overflow는 박스를 넘어가는 콘텐츠의 처리를 담당합니다.
overflow: auto // 넘어가는 콘텐츠에 대해 스크롤을 제공합니다.
overflow: hidden // 넘어가는 콘텐츠 내용을 보여주지 않게 됩니다.위의 방식으로 자주 사용됩니다.
박스 측정 기준
박스의 너비와 높이를 측정하는 기준은 무엇일까요? 눈치를 채셨을 수 있는데, 박스 전체가 너비와 높이의 기준이 됩니다. 즉 콘텐츠만이 아니라 내부 여백과 테두리를 포함하는 것이죠. 이러면 문제가 무엇일까요?
콘텐츠에 따라 박스의 크기가 달라지게 됩니다. 또한, 원했던 박스의 크기를 정확히 선언하기 어렵죠.
div{
width: 300px
padding: 10px;
border: 1px solid black;
}위와 같이 적용하게 되면, 박스의 너비는 300px + 내부 여백 20px + 테두리 2px이 됩니다. 양 옆의 여백과 테두리 너비가 더해지게 되죠.
이를 방지하기 위해서는 box-sizing을 처리하면 됩니다. 기본적으로 box-sizing은 content-box로 설정되어 있습니다. width값이 적용되는 것이 콘텐츠에 적용되어 내부 여백과 테두리 값이 실제 차지하는 너비를 계산할 때 같이 더해야 하죠.
하지만 border-box는 실제 차지하는 너비와 width값이 모두 같게 됩니다. 즉, width로 설정한 값이 내부여백과 테두리를 포함한 값이 된다는 의미죠.
div{
width: 300px
padding: 10px;
border: 1px solid black;
box-sizing: border-box;
}위의 div태그의 실제 크기는 300px이 되는 것입니다.
