본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

CSS 기초

• HTML과 함께 웹 페이지의 디자인을 구성하는 언어
• 선택자와 선언부로 구성

블록(block)

• 블록은 한 줄에 하나의 요소만 배치되는 태그를 의미
• 대표적인 블록 요소로는 div, h1~h6, p, ul, li 등이 있음

<div style="background-color: yelow; padding: 10px;">
  <h2>블록</h2>
  <p>한 줄에 하나의 요소만 배치됩니다.</p>
</div>

• div 태그를 이용해 블록 요소를 만듦
• 줄바꿈 현상이 일어남
• width와 height값 사용가능(공간만들기 가능)
• margin과 padding 값 사용가능(상하배치 작업 가능)

인라인(inline) 요소와 인라인블록(inline-block)

• 한 줄에 여러 요소가 배치될 수 있는 태그를 의미
• 대표적으로 span, a, img, input 등이 있음
• 기본적으로 태그가 필요한 영역만 차지하기 때문에 높이와 너비를 임의로 조정할 수 없음

<span style="display: inline-block; background-color: yellow; padding: 10px;">인라인블록</span>
<a href="#" style="display: inline-block; background-color: red; color: white; padding: 10px;">링크</a>

• 인라인블록을 이용하면 한 줄에 여러 요소들이 자연스럽게 배치될 수 있음
• 줄바꿈 현상이 없음
• width와 height값 사용불가
• margin-top, margin-bottom, padding-top, padding-bottom 값 적용 불가

display 및 border 속성

display 속성

• 요소를 블록과 인라인 요소 중 어떤 형태로 처리할지 정의
• display: inline 인라인 속성으로 변경
• display: block 블록 속성으로 변경
• display: inline-block 인라인으로 배치하되, 블록 요소의 속성 추가 가능
• display: none 디스플레이(표시)하지 않음(화면에서 표시되지만 않음)

border 속성

• 요소가 차지하고 있는 영역에 테두리를 그릴 수 있음

.a {
  border: 1px solid blue;
}
.b {
  border-width: 1px;
  border-style: solid;
  border-color: blue;
}

박스 모델(box model)

• CSS에서 요소의 크기와 위치를 결정하는 핵심 개념 중 하나
• content 요소의 실제 내용
• padding content와 border 사이의 여백
• border 요소의 경계선
• margin 요소와 주변 요소 사이의 여백

자주 사용하는 속성

box-sizing

• padding이나 테두리때문에 요소의 크기가 덩달아 커지는 경우 화면을 구성하는 UI가 깨지는 경우가 있음
• box-sizing은 이를 대처하기 위해 사용하는 속성

box-sizing: content-box;
box-sizing: border-box;

• content-box 기본값, 너비와 높이가 콘텐츠 영역만을 포함
• border-box(자주사용) 너비와 높이가 안쪽 여백과 테두리까지 포함

float: 부동요소(떠있는 요소)

• 문서의 일반적인 흐름에서 요소를 제외하여 자신을 포함하고 있는 컨테이너의 주위에 배치

float: none;
float: left;
float: right;

• none 기본값, 원래 상태
• left 자신을 포함하고 있는 박스의 왼 편에 요소를 위치
• right 자신을 포함하고 있는 박스의 오른편에 요소를 위치

clear

• float 요소 이후에 표시되는 요소가 float 속성을 상속받지 않게 설정

clear: none;
clear: left;
clear: right;
clear: both;

• none 기본값, 아래로 이동되지 않습니다.
• left float이 left인 요소의 아래로 이동
• right float이 right인 요소의 아래로 이동
• both float이 left 또는 right인 요소의 아래로 이동

position

• 요소를 배치하는 방법을 정의

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

• static 기본값, 배치가 불가능
• relative 문서의 흐름에 따라 상대적인 오프셋(x, y 값을 적용)을 적용
• absolute 일반적인 문서의 흐름에서 벗어나 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용
• fixed 일반적인 문서의 흐름에서 벗어나 지정된 위치에 고정(top 버튼을 생성할 때 종종 사용)
• sticky 일반적인 문서의 흐름대로 배치하되, 스크롤되어 해당 요소를 벗어날 때 스크롤을 이동하더라도 가장 가까운 상위 요소에 대해 오프셋을 적용(스크롤을 내리더라도 헤더가 붙어있는 경우가 해당)

마진병합

형제지간의 마진 병합

.a {
  margin-bottom: 150px;
}
.b {
  margin-top: 100px;
}

• 위와 같은 경우 서로 겹치는 부분에 margin값을 적용
• 더 큰값이 적용 됨

부모자식간의 마진병합

.parent .a {
  margin-top: 100px;
}

• 위와 같은 경우 자식의 마진이 부모에게도 영향을 미침

브라우저와 공간 사이의 공간 제거하기

<style>
  html, body {
    margin: 0;
    padding: 0;
  }
</style>

• html과 body는 margin과 padding값을 가지므로 초기화 해줘야 함(* 표시 사용 가능)