linking to html

<link href="./style.css" type="text/css" rel="stylesheet">

style.css 파일을 만들기

 p {
    font-family : Arial;
  }

  h1 {
    color: maroon;
  }

.title {
  color: teal;
}
.uppercase {
  text-transform: uppercase;
}
#title {
}

• p, h1은 모든 <p> / <h1>에 적용된다.
  .title, .uppercase 는 class name.

• html에서
  <h1 class="title uppercase"> ... </h1> 이런 식으로 띄어쓰기로 구분하여 여러개 사용이 가능하다.

• #title : html의 id에 바로 적용시키는 것

속성

display

element들의 배치를 결정

inline : 전후 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치된다.

ex : <span> <a> <em>

• 주의할 점 : width와 height 속성을 지정해도 무시된다. 애초에 wrap-content이기 때문. margin과 padding은 좌우 간격만 반영되고 상하 간격은 반영되지 않음

block : 전후 줄바꿈이 들어가 혼자 한 줄을 차지한다.

ex : <div> <p> <h1>

• 주의할 점 : inline element와는 달리 width, height, margin, padding 속성이 모두 반영된다

inline-block

inline element처럼 전후 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치되지만 inline에서 불가능한 width, height 속성 지정 및 margin, padding 상하 지정이 가능.

ex : <button> <select>

span {
	display : inline-block;
}

명시적으로 해당 element의 스타일을 지정해주어야 한다.