TIL

CSS의 기초

• CSS는 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다.( 구조의 외부와 내부를 꾸미는 역활담당)

• CSS 기초문법
  

• CSS를 이용해 텍스트를 꾸밀수 있는다.

• CSS에는 절대적 단위와 상대적 단위가 있는데, 절대적 단위는 다른것과 관련이 없으며 항상 일반적으로 동일한값이 된다.
  반면, 상대적 단위는 다른것에 의해 비례하여 변할수있다.

• 기본적인 셀렉터로 id및 class가 있는데, 먼저 id는 하나의 문서에서 한 요소에만 사용해야한다. 그렇기 때문에, id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.

<h4 id="navigation-title">This is the navigation section.</h4>

* h4요소에 id를 붙인것이고,

#navigation-title {
  color: red;
}

* id로 요소를 선택하여 스타일링을 한것이다.

반면 class는 하나의 class를 여러 요소에 적용할 수 있다.

li {
  text-decoration: underline;
}

* li요소에 밑줄을 치도록 설정을 하고

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

* 여러 요소에 같은 스타일링을 적용하기 위해서 class를 사용

.menu-item {
  text-decoration: underline;
}

* class menu-item을 선택하여 밑줄을 적용

반대로, 여러 class를 하나의 요소에 적용할 수도 있다.

<li class="menu-item selected">Home</li>

* 하나의 요소에 여러 class를 적용

.selected {
  font-weight: bold;
  color: #009999;
}

* 특정 클래스(selected)를 통해 요소를 스타일링

• id와 class 차이

id.	class.
# 으로선택	. 으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정요소에 이름 붙이는데 사용	스타일의 분류(classification)에 사용

• CSS 박스모델

모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가지고, CSS를 이용해 속성과 값으로 그 크기를 설정한다.

박스의 종류는 줄바꿈이 되는 박스(block), 줄바꿈이 되지 않고 옆으로 붙는 크기 지정을 할 수 없는 박스(inline)과 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스가 있다.
대표적 block 요소 :