CSS 2(생활코딩)

박스 모델

• content : width 와 height 으로 차지하는 공간

block level element : 화면 전체를 쓰는 태그
inline element : 자기 content 만큼의 크기를 갖는 태그

cf)
display:inline; 이용해 block level element를 inline element 처럼 사용 가능
display:block; vise versa.
display:none; 태그 보이지 않도록

• 서로 다른 선택자에 대해서 스타일 속성이 동일할 경우 콤마(,)를 사용하여 중복 제거 가능

<style>
    h1, a{
      border-width:3px;
      border-color:gray;
      border-style: solid; 
    }
</style>

• value가 겹칠 경우도 아래와 같이 축약 가능(콤마 없음 주의)

<style>
  h1, a{
    border:gray 3px solid;
  }
  /*
  value의 순서는 중요하지 않음
  */
</style>

padding : 컨텐츠와 border 사이 간격
margin : 다른 태그와의 간격

그리드

div : 의미 없는 태그로 레이아웃 만들 때 사용, block level element
span : 레이아웃 만들 때 사용, inline element

• 기본적인 div 속성
  : style, padding, width, height, margin, etc.

미디어쿼리

• 사이트에 접속하는 미디어 종류의 특징에 따라 다른 CSS 스타일을 적용하도록 도와주는 규격
• @media()
  @media (property) (value)

link 태그

<link rel="" href="">

• 외부 리소스를 불러와 연결할 때 사용
• 동일한 코드를 반복해서 이용할 경우 link 태그를 사용함으로써 불필요한 반복을 피할 수 있음
• html에서 닫는 태그는 없음
• head 태그 안에 사용

cf)
<link rel="stylesheet" href="style.css">

• rel(relationship) : 현재 문서와의 관계 표시
• hrel : 연결 문서의 주소 표시

만든 웹페이지 : https://yoonjink96.github.io/web_css/