4. CSS

1.CSS

• Cascading Stlye Sheets
• HTML 태그들에 디자인을 꾸며주는 것
• HTML이나 XML과 같은 구조화 된 문서(Document)를 화면.. 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다.
• CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

2. CSS적용_ 인라인 스타일

• 형태 : <태그 style="스타일 내용"> 내용 </h1>
• 태그 안에 style이라는 속성을 통해 스타일을 꾸민다.
• 매우 간편하지만 스타일 내용이 많으면 코드가 더럽고 관리하기 힘듬.
• 예) <h1 style="color: red; font-size: 30px; background-color: yellow; font-weight: bold;">FRONTEND 101</h1>

3. CSS적용_ 스타일 태그

• 형태 : <style> 스타일 내용 </style>
• html 파일 내에 style태그를 통해 스타일을 작성하는 방법
• 간편한 방법이지만.. html과 css를 분리하지 않으므로 유지보수 x

4. CSS적용_ css파일 적용

• 형태 : <link href="파일이름.css" rel="stylesheet" type="text/css" />
  1) link — link태그로 사용할 css파일을 링크
  2) href — href 속성에 css 파일 경로를 작성
  3) type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다.
  (css file을 연결하므로 type값은 항상 "text/css")
  4) rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성.
  (css파일을 링크할 때는 항상 "stylesheet"값을 대입)

5. css파일 스타일 작성법 - selector

1) 일반 태그

• 형태 : 태그이름 { propert : value }
• 예)
  p {
  color : red
  }

2) class 속성 가져오기

• 형태 : . 클래스 이름 { propert : value }
• 예)
  .profile-detail {
  font-weight: bold;
  }

3) id 속성 가져오기

• 형태 : #아이디이름 이름 { propert : value }
• 예)
  #profile {
  border-width: 1px;
  }