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;
}