728x90
반응형
CSS(Cascading Style Sheets)
- 웹 문서에 사용하는 태그에 스타일을 적용하기 위해 W3C에서 고안한 언어
- 태그와 스타일을 함께 사용하던 기존 방식 지양, 태그와 스타일 분리하는 방법으로 발전
1. CSS 문법 살펴보기
- 선택자
- CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역
- 선언부 = 속성 + 값
- 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역
- 중괄호({}) 안에 넣음
- 세미콜론(;) 넣으면 여러 스타일 연속해서 작성할 수 있음
- 선택자{속성:값;}
2. CSS 적용하기
내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트
내부 스타일 시트(internal style sheet)
- HTML 파일 내부에 CSS 코드를 작성하는 방법
- (+) 디자인 빠른 적용
- body 태그에 작성된 내용이 사용자에게 노출하기 전 CSS를 불러옴
- (-) 성능상 좋지 못함
- HTML 문서 해석할 때마다 CSS 코드 매번 다시 읽음
<head>
<title></title>
<style>
</style>
</head>외부 스타일 시트(external style sheet)
- CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방식
- 별도 파일의 확장자는 css, link 태그 ~> HTML 문서에서 연결
- <link rel="stylesheet" href="css 파일 경로">
인라인 스타일 시트(inline style sheet)
- HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법
- 태그에 직접 CSS 코드를 작성하는 방식
- 선택자 부분 필요 X
- <태그 style="CSS 코드"></태그>
출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
'FE > HTML | CSS | JS' 카테고리의 다른 글
728x90
반응형
CSS(Cascading Style Sheets)
- 웹 문서에 사용하는 태그에 스타일을 적용하기 위해 W3C에서 고안한 언어
- 태그와 스타일을 함께 사용하던 기존 방식 지양, 태그와 스타일 분리하는 방법으로 발전
1. CSS 문법 살펴보기
- 선택자
- CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역
- 선언부 = 속성 + 값
- 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역
- 중괄호({}) 안에 넣음
- 세미콜론(;) 넣으면 여러 스타일 연속해서 작성할 수 있음
- 선택자{속성:값;}
2. CSS 적용하기
내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트
내부 스타일 시트(internal style sheet)
- HTML 파일 내부에 CSS 코드를 작성하는 방법
- (+) 디자인 빠른 적용
- body 태그에 작성된 내용이 사용자에게 노출하기 전 CSS를 불러옴
- (-) 성능상 좋지 못함
- HTML 문서 해석할 때마다 CSS 코드 매번 다시 읽음
<head>
<title></title>
<style>
</style>
</head>외부 스타일 시트(external style sheet)
- CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방식
- 별도 파일의 확장자는 css, link 태그 ~> HTML 문서에서 연결
- <link rel="stylesheet" href="css 파일 경로">
인라인 스타일 시트(inline style sheet)
- HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법
- 태그에 직접 CSS 코드를 작성하는 방식
- 선택자 부분 필요 X
- <태그 style="CSS 코드"></태그>
출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
