Web 2일차 3(css)

karatejin 2022. 12. 21. 12:34

CSS (Cascading Style Sheets)

웹페이지를 꾸미려고 작성하는 코드

캐스케이딩의 의미
캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻. 즉 계단식으로 적용된다는 의미로 사용.
선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.

스타일 충돌을 막는(캐스캐이딩)의 원칙
① 스타일 우선순위 - 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용
② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 (지역변수, 전역변수)

인라인 스타일
스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=“속성:
속성 값;” 형태로 스타일 적용

html 태그 안에

내부 스타일 시트
웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의
<style> 태그와 </style> 태그 사이에 작성

외부 스타일 시트
여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할
때마다 파일에서 가져와 사용
<style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부
스타일 시트 파일 연결

선택자

전체 선택자
페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용
웹 브라우저의 기본 스타일을 초기화할 때 자주 사용

타입 선택자
문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨

class 선택자
요소의 특정 부분에만 스타일 적용
마침표(.) 다음에 클래스 이름 지정
문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의 (3개이상 쓰지마라 개발자가 잘못짠 코드다)

class 는 .class

#header_in .menu {
    float: right;
    width: 670px;
    height: 115px;
}

id 선택자
요소의 특정 부분에만 스타일 적용
파운드(#) 다음에 id 이름 지정
문서 안에서 한번만 사용한다면 id 선택자로 정의 (중복하지마라 고유한 녀석)

id 는 #id

#header {
    width: 100%;
    height: 165px;
}

원칙 1: 스타일 우선 순위

1. 얼마나 중요한가에 따라

2. 얼마나 한정지을 수 있는가에 따라

3. 소스 순서에 따라
중요도와 명시도가 같다면 소스 순서에 따라 결정
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어씀

원칙 2: 스타일 상속

자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.
상속을 이용하면 스타일 시트를 효과적으로 만들 수 있다
주의할 것은 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니라는 점
(예, 글자 색은 상속되지만 배경 색은 상속되지 않음)