반응형
- CSS 는 웹 페이지의 레이아웃 형식을 지정하는데 사용된다.
- 한번에 여러 웹페이지의 레이아웃 컨트롤이 가능하다.
- 부모 element에 적용을 하면 자식 element에 까지 자동으로 적용된다. 예를 들면, body에서 text 컬러를 blue로 지정 했을때, heading 과 paragraph 까지 text가 blue로 적용된다.
- CSS를 사용하는 3가지 방법이 있다. 일반적으로 사용되는 방법은 external.
1. Inline : HTML 요소 내부의 style 속성 사용
2. Internal : <style> 섹션의 <head> 요소 사용
3. external : <link> 요소를 사용하여 외부 CSS 파일에 연결
<Inline CSS> : 내부 style 속성
- Inline CSS는 HTML 요소에 고유한 스타일을 적용하는데 사용된다.
- 컬러, 글씨체, 텍스트 사이즈 등...
<Internal CSS> : <head> 요소로 <style> 사용
- Internal CSS는 single HTML 페이지에 대한 스타일로 정의된다.
- HTML 페이지의 <head> 섹션에서, <style> 로 감싸주면 그 안에 속한 body, headings, paragraphs는 style로 일괄 적용된다.
<External CSS>
- External 스타일 시트는 많은 HTML페이지의 스타일을 정의할 수 있다.
- 이를 사용하려면, 각 HTML 페이지의 <head> 섹션에 링크를 추가하면 된다.
- External 스타일 시트는 모든 텍스트 편집기에서 작성 가능하며
- 파일에는 HTML 코드가 포함되서는 안된다.
- .css 확장자로 저장해야 한다.
- "style.css" 안에 지정된 태그가 포함된 형식을 띄고 있다.
- 텍스트 컬러 : color
- 글씨체 폰트 : font-family
- 폰트 사이즈 : font-size
- CSS border 는 테두리 박스를 표현하는 요소이다.
- 예를 들어,에만 적용시키고 싶다면, head로 감싼 뒤 > style로 감싸고 > p 의 스타일을 지정해주면 된다.
- CSS padding 은 텍스트와 border(테두리 박스) 사이의 빈공간(space)를 넣어주는 특성을 가지고 있다.
- CSS Margin 은 border(테두리 박스) 밖의 margin(공간)을 의미한다.
- External 스타일 시트는 full URL 주소를 끌고 올 수도 있고,
- 현재 웹사이트의 html 폴더의 위치 링크를 지정해 끌고 올수도 있고,
- 현재 페이지와 같은 폴더에 있는 스타일 시트로 연결할 수도 있다.
반응형
'코딩일지 -언어공부방 > HTML' 카테고리의 다른 글
| HTML Images 이미지 기본 서식 (0) | 2022.08.10 |
|---|---|
| HTML Links 하이퍼링크 | CSS로 링크 꾸미기 (0) | 2022.08.09 |
| HTML Colors | 색상 (0) | 2022.08.07 |
| HTML Comments | 주석 표시 (0) | 2022.08.06 |
| HTML Quotation | 서식태그 | 인용태그 (0) | 2022.08.05 |