HTML/CSS

Font

Font family

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

앞에서부터 우선순위가 있고 브라우저에서 지원되지 않으면 뒤쪽의 폰트로 구현됨. serif는 모든 브라우저에서 지원되는 폰트. 폰트에 "Times New Roman"과 같이 띄어쓰기가 있으면 ""로 묶어서 표현.

Font size

h1 {
  font-size: 30px;
}

.big-size-font {
  font-size: 50px;
}

말그대로 폰트 사이즈. 원래 h1과 같이 이미 폰트 사이즈가 정해져있는 태그들의 폰트 사이즈도 바꿀 수 있다. 폰트 사이즈의 단위는 pixel뿐만 아니라 em, pt 등이 있다. (아직 뭔지 모름)

Font weight

.bold-font {
  font-weight: bold;
}

.font {
  font-weight: 400;
}

글씨의 두께를 조절하는 property이다. normal,bold 등 뿐만 아니라 100, 200,...의 숫자 값들도 지정 가능. 노말은 400 볼드는 700.

Font style

.font {
  font-style: italic;
 }

글씨 스타일을 바꾸는 property.

Font color

.pink {
  color: pink;
  color: #FFC0CB;
  color: rgb(255,192,203);
  color: hsl(350, 100%, 88%);

글씨의 색상을 바꾸는 property. 단순히 이름으로도 바꿀 수 있지만 다른 방법 또한 존재한다.

• hex code
• rgb
• hsl (hue, saturation, lightness)

문구 스타일

텍스트 정렬

text-align property를 통해 left, center, right으로 정렬할 수 있음. span의 경우 inline-element이기 때문에 오른쪽 정렬을 하여도 길이만큼 차지함.

indentation & space

들여쓰기의 경우 text-indent의 property를 통해 px만큼 들여쓰기를 할 수 있다. 또한 스페이스 바는  를 통해 구현할 수 있다.

Margin & Padding

p.example {
  margin: 50px;
}
<
p.example {
  margin: 50px 50px 50px 50px;
}

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

모두 같은 코드이다

순서는 위-오-아-왼. Padding에 대해서도 margin과 같은 방식이다.

Border

p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

순서는 크게 상관없지만 관례상 두께, 선스타일, 선색깔 순으로 작성한다.

blockquote {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
}

보통 밑줄을 그을때 text-decoration: underline으로도 하지만 custom하기 쉽게 border-bottom으로 많이 하는 편이다.

Box sizing

html에서는 요소들이 box 형태로 나타내어지고 이때 width 값을 줄 때 예를 들어 300px로 주어도 300px보다 더 크게 나타는 경우가 있다. 이는 처음 width 값을 정해주었을 때 요소 자체의 width는 정해주었지만 padding값과 border값이 추가되어 더 커지는 것이다. 이러한 상황을 해결하기 위해 생긴 것이 box-sizing이다.

* {
  box-sizing: border-box;
}

이와 같이 해주면 정해준 width 값이 보이는 그대로가 되어 일일이 패딩값을 생각해서 width를 주지 않아도 되게 된다.

상속&그룹

상속이란 CSS에서 부모가 가진 스타일이 자식에게도 적용된다는 것을 의미한다.
여러 태그나 클라스에 같은 스타일을 적용하고 싶을 때는 아래와 같이 selector들을 grouping 하여 한꺼번에 스타일을 줄 수 있다.

.what-is-blockquote, span {
  color: green;
}

 

Selector

결합

p.new {
  color: gray;
}
p#third {
  text-decoration: underline;
}

Selector들끼리 결합할 수 있는데 위의 예시의 경우 첫번째는 p 태그 이면서 new 클래스, 두번째는 p 태그이면서 third id인 것을 의미한다.

.a div .b .pre span {
  background-color: yellow;
}

위의 경우는 a 클라스 안의 div 안의 b 클라스 안의 pre 클라스 안의 span에게만 스타일을 적용한다는 의미이다. 한가지 예시를 더 살펴보자.

div .container li.first-list

위와 같이 작성된 경우 first-list 클라스를 가지는 li 태그인데 그 중에서도 div 안의 contatiner 클라스 안에 있는 li 태그에만 스타일을 적용한다는 의미이다.

우선순위

동일한 요소에 태그, 클라스, 아이디, 인라인으로 각각 별개로 스타일이 지정되어 있을 때 어떤 스타일이 적용되는지에 대한 우선순위가 존재하고 이는 다음과 같다.

tag <<< class <<< id <<< inline css