-
CSS 들어가기프로그래밍/HTML&CSS 2022. 8. 25. 19:33728x90
CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념으로 HTML이 텍스트나 이미지, 표 와 같은 요소를 웹문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당하는 스타일 시트 언어이다.
스타일 시트(Style Sheets)는 웹 문서 안에서는 스타일 규칙을 여러 개 사용하는데 한눈에 스타일 규칙을 확인하고 수정 소요 발생시 수정에 용이하기 위해 한군데 묶어 놓은 집합을 의미한다. 스타일 시트는 크게 '브라우저 기본 스타일'과 사이트 제작자가 만드는 '사용자 스타일'로 구분된다. 또 사용자 스타일은 다시 인라인 스타일과 내부 스타일, 외부 스타일 시트로 나뉜다.
인라인 스타일
인라인 스타일은 간단한 스타일 정보를 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시할 때 사용한다.
<p style="text-align: center; color: orange;">안녕하세요</p>이 방법은 HTML 요소에 직접 표시해주기 때문에 가독성 측면에서 장점이겠지만, HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야하기 때문에 많은 시간이 소요된다는 점과 완성한 후에도 스타일의 변경 및 유지 보수가 힘들다는 단점이 존재한다.
내부 스타일
내부 스타일은 HTML 문서 <head> 요소 안에 스타일 시트를 위치시켜 CSS 문법을 작성하는 것이다.
<style> h2 { text-align: center; font-size: 50px; color: orange; } p { text-align: center; font-weight: bold;} </style>이 방법은 해당 HTML 문서에서만 스타일이 적용된다는 특징이 있다.
외부 스타일
외부 스타일은 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 가져와서 사용하기 위해 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라고 한다. *.css 라는 확장자는 사용한다.
<link rel="stylesheet" href="./css/style.css"> <!--<head> 요소에 <link> 요소를 사용하여 연결-->
CSS의 문법
선택자 { 속성명: 속성값; 속성명: 속성값; ... } p { text-align: center; color: blue; } - ---------- ------ ----- ---- 선택자 속성 속성값 속성 속성값 -------------------------------- 선언부속성과 속성 사이는 ;(세미콜론)으로 표기하여 속성이 끝났음을 의미한다.
CSS의 주석
/* */ 사이에 내용 입력
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <style> /* 내부 스타일 시트을 적용하여 CSS문 작성 */ h2 { text-align: center; font-size: 50px; color: orange; } /* h2태그에 가운데 정렬, 폰트 사이트 50px, 글자색은 오렌지색으로 적용*/ p { text-align: center; font-weight: bold;} /* p태그에 가운데 정렬, 폰트 굵기는 bold로 적용*/ </style> </head> <body> <!-- 첫 CSS 문서--> <h2>CSS</h2> <p>HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어</p> </body> </html>
예제 코드 결과 728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
선택자(selector) (2) (0) 2022.08.27 선택자(selector) (1) (1) 2022.08.26 input 태그 (1) 2022.08.24 form 태그 (0) 2022.08.23 iframe(아이프레임) (0) 2022.08.22