CSS Fundamentals

DESCRIPTION

• HTMl은 뼈대라면 css는 꾸미기입니다.
• Cascading Style Sheets의 의미로 스타일링을 통하여 원하는 디자인 요소들을 적용 시킬 수 있습니다.

적용 방법

• inline-style : 가장 점수가 높으며, 빠르고 편하다. 하지만 가독성이 떨어 질 수 있고 태그 와 코드가 혼재되어 유지보수에 좋지 않다.
• style tag : HTML 파일 내에서 css코드로 작성 할 수 있는 방법이다. <style> code </style> 방법으로 사용 가능하다. 하지만 inline-style과 마찬가지로 html과 css 코드가 혼재되어 유지보수에 좋지 않다.
• on css file : html과 css의 코드를 분리하여 작성하는 방법이다. html은 뼈대 css는 스타일링을 담당하기 때문에 코드가 역할이 나눠져 있어 코드를 보기 쉬워진다. 유지보수에 좋은 방법이다.
• html과 css는 다른 파일이기에 html에 css를 링크 걸어줘야 한다. <link href="style.css(css file name)" rel="stylesheet" type="text/css">
• link : link태그로 css파일을 링크해줍니다.
• href : href 속성에 css 파일 경로를 작성합니다.
• type : link태그로 연결되는 파일이 어떤 것인지 알려줍니다.
• rel : html과 css의 관계를 설명하는 속성입니다.

CSS Syntax

p {
  color: red;
}

• color는 property에 해당한다.
• red는 property value에 해당한다.

CSS 종류

태그이름

p {
  font-size: 15px;
}

태그이름이며, 모든 p태그가 값에 적용된다.

클래스 이름

.className{
  code
}

클래스에 적용시키기 위해서는 .을 필요로 한다.
나중에 태그들의 대하여 class를 부여할 수 있다.

ex) <p class="profile"></p>

id 이름

  #idName{
  code
}

아이디에 대하여 스타일 요소가 들어간다.