TIL 06 | CSS

HTML이 집의 뼈대라면 CSS는 집의 구조와 디자인을 담당한다. 이번 시간에는 CSS를 통해 시각적 스타일링 뿐 아니라 각 요소의 배치와 시각적으로 어떻게 보이는지에 대해 알아보았다.

CSS Visual Rule

• font-family 텍스트의 폰트를 바꿀 수 있다.
• font-size 텍스트 폰트의 사이즈를 바꿀 수 있다.
• font-wieght 텍스트의 굵기를 조절할 수 있다. 디폴트값은 normal이다.
• text-align 택스트의 정렬을 도와준다.
• color 요소의 foreground 색을 지정한다.
• background color 요소의 background 색을 지정한다.
• opcity 요소의 투명도를 지정한다. 0에서 1사이의 값으로 0에 가까울수록 투명하다.
• background-image
• !important 같은 값을 여러번 설정할 때 우선순위를 높여준다.

CSS Box Model

Auto

div.headline {
  width: 400px;
  margin: 0 auto;
}

Margin에 대해 auto값을 설정함으로써 요소를 중앙에 오게 할 수 있다.
그러나 요소를 중앙으로 위치시키기 위해 반드시 width 속성 값이 정의되어야 한다. 그렇지 않으면 width의 디폴트 값이 Parent 요소의 값으로 지정되기 때문에 가운데 배치시키는 것이 불가능해진다.

Margin Collapse

요소의 Horizontal Margin은 서로 더해져 그 값만큼 떨어져 위치하지만, Vertical Margin은 각 요소의 합이 아닌 두 Margin 중 더 큰 값으로 결정된다.

Min-Max Height and Width

p {
  min-width: 300px;
  max-height: 600px;
  }

요소의 최소와 최대 가로,세로 길이를 설정하여 브라우저 윈도우가 좁아지거나 넓어져도 시각적 불편함을 느끼지 않을 수 있게 한다.

Overflow

Parent 요소보다 큰 영역을 차지하는 요소를 Overflow 되었다고 한다. 이런 경우 어떻게 요소의 모든 부분을 보여줄 수 있을까?

• hidden Overflow된 Content를 보여주지 않는다.
• scroll 해당 content에 스크롤 바가 생성되어 타 요소를 잡아먹지 않는다.
• visible Overflow 상태로 부모 요소를 잡아먹으며 빠져나온다. Defualt Value

Visibility

• hidden 요소를 보여주지 않는다.
• visible 요소를 보여준다.

display: none은 웹 페이지 상에서 해당 요소를 완전히 지우지만, visibility: hidden은 해당 콘텐츠를 숨기기만 할 뿐 공간 자체는 여전히 차지한다.

Reset Default

각각의 개발자가 서로 다른 다양한 CSS Rule을 가지고 있으므로 웹 페이지 디자인을 할 경우 어려운 요인으로 작용한다. 이를 방지하기 위해 디폴트 값을 선택할 필요가 있고, 그 코드는 다음과 같다.

* {
	margin: 0;
    padding: 0;
}

Display and Positioning

CSS가 포함되지 않은 HTML 문서는 요소를 왼쪽에서 오른쪽, 위에서 아래로 렌더링한다. 이것을 Flow of HTML Element라고 한다. CSS는 HTML의 요소를 단순히 Styling할 뿐 아니라 positioning하는 속성도 포함하여 각 요소가 어디에 위치해야 하는지에 대한 속성을 설정할 수 있다.

Position

• position:static

• position:relative

.box-bottom {
  background-color: DeepSkyBlue;
  position: relative;
  top: 20px;
  left: 50px;
}

relative는 디폴트 포지션에서 일정 값만큼 상대적으로 위치할 수 있게 만든다.

top: 20px은 20픽셀만큼 내리고, left: 50px은 50픽셀만큼 오른쪽으로 이동시킨다.

• position:absolute

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
}

absolute는 모든 다른 요소가 그 요소를 무시하고 페이지에 존재하지 않는 것처럼 행동한다.

relative에서 top, left의 값은 요소의 디폴트 포지션을 기준으로 했지만 absolute에서는 부모 요소의 포지션을 기준으로 한다.

• position:fixed

.box-bottom {
  background-color: DeepSkyBlue;
  position: fixed;
  top: 20px;
  left: 50px;
}

fixed를 사용하면 absolute와 다르게 스크롤을 해도 주어진 위치에 고정된다.
보통 헤더 메뉴를 고정시키는 데 사용된다.

z-index

.box-top {
  background-color: Aquamarine;
  position: relative;
  z-index: 2;
}

.box-bottom {
  background-color: DeepSkyBlue;
  position: absolute;
  top: 20px;
  left: 50px;
  z-index: 1;
}

absolute가 적용된 경우 아래쪽 박스가 위 밗를 무시하여 오버랩하지만, z-index를 사용해 브라우저가 요소를 먼저 그릴 수 있게 해준다. z-index는 디폴트 상태에서 작동하지 않으므로 position을 relative로 설정하고, 그림과 같이 z-index가 큰 위 박스를 앞으로 이동시키는 것을 볼 수 있다.

Inline-Block Display

지난 시간에 Inline Element와 Block Level Element에 대해서 알아보았다. <em>, <strong>, <a>와 같은 태그들은 디폴트 값이 inline이지만, display를 이용해 특정 태그를 우리가 원하는 요소형태로 만들 수 있다.

• display: inline

h1 {
  display: inline;
}

<h1>와 같이 디폴트 값이 inline이 아닌 것도 inline element로 만들 수 있다.

• display: block
• display:inline-block

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

위와 같이 3 개의 rectangle 클래스를 가진 div를 정의하고 inline-block 속성을 부여하여 각 div가 한 줄에 나타낼 수 있게 한다.

Float

float 속성은 단순히 왼쪽이나 오른쪽으로 붙이고 싶을 때 사용한다.

.boxes {
  width: 120px;
  height: 70px;
}

.box-bottom {
  background-color: DeepSkyBlue;
  float: right;
}

이와 같이 오른쪽으로 배치된다. 이 때 width를 설정하지 않으면 디폴트 값으로 전체 width를 차지하게 되어 의미가 없어진다.