웹 문서에 디자인 입히기
▶왜 스타일을 사용할까
•HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성
> 스타일을 사용하면 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있다
•다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다
> 반응형 웹 디자인
스타일과 스타일 시트
▶스타일 형식 알아보기
속성1 : 속성값1; 식의 형식을 사용한다.
▶스타일 규칙 작성 방법
•중괄호( { } ) 사이에 스타일 규칙 나열
•규칙이 여러 개일 경우 세미콜론(;)으로 구분
▶스타일 주석
•/*와 */ 사이에 주석 내용 입력
•한 줄 또는 여러 줄을 입력 가능
▶스타일 시트
▶브라우저 기본 스타일
•브라우저에서 기본으로 적용하는 스타일
•웹 문서에서 아무 스타일도 적용하지 않고 HTML만 사용해도 그 기능에 따라 크기에 맞게 보여줌
▶인라인 스타일
•스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
•스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=“속성: 속성 값;” 형태로 스타일 적용
▶내부 스타일 시트
•웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
•모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
•<style> 태그와 </style> 태그 사이에 작성
▶외부 스타일 시트
•여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
•<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결
CSS 기본 선택자
▶전체 선택자
•페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
•웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
▶타입 선택자
•문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨
▶class 선택자
•요소의 특정 부분에만 스타일 적용
•마침표(.) 다음에 클래스 이름 지정(중복이 가능하다.)
•문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의
•중복적으로 스타일을 바꿔야할때
▶id 선택자
•요소의 특정 부분에만 스타일 적용
•파운드(#) 다음에 id 이름 지정(중복이 안된다.)
•문서 안에서 한번만 사용한다면 id 선택자로 정의
▶그룹 선택자
•같은 스타일을 사용하는 선택자를 한꺼번에 정의
•쉼표(,)로 구분해 여러 선택자를 나열
캐스케이딩 스타일 시트
▶캐스케이딩의 의미
•캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻. 즉 계단식으로 적용된다는 의미로 사용.
•선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.
▶스타일 충돌을 막는(캐스캐이딩)의 원칙
① 스타일 우선순위 - 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
※ 스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에 일반적으로 ‘스타일 시트’는 ‘캐스캐이딩 스타일 시트(CSS)’와 같은 의미로 사용됨
▶원칙 1: 스타일 우선 순위
2. 얼마나 한정지을 수 있는가에 따라
3. 소스 순서에 따라
•중요도와 명시도가 같다면 소스 순서에 따라 결정
•소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀
▶원칙 2: 스타일 상속
•자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
•상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다
•주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점
(예, 글자 색은 상속되지만 배경 색은 상속되지 않음)
'HTML,CSS > 정리' 카테고리의 다른 글
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.09.24 |
|---|---|
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.09.17 |
| 입력 양식 작성하기 (1) | 2021.09.17 |
| 다양한 내용 입력하기 (0) | 2021.09.15 |
| HTML의 기본구조 (0) | 2021.09.15 |