CSS(Cascading style sheets)
Style : 웹 문서에서 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용
CSS Zen Garden(http://www.csszengarden.com/) : HTML 태그로 작성한 문서를 CSS만 수정하여 만들 수 있음
p{text-align: center; }
.p : 선택자(selector), <p>태그가 적용된 요소에 적용한다는 의미
.text-align : 스타일 속성
.center : 속성 값
.속성:속성 값; 형식으로 표시
.주석 /*와 */ 사이 입력
내부 스타일 시트
.웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것
.<head> 태그 안에서 정의
.<style> 태그 안에 작성
외부 스타일 시트
.같은 스타일의 여러 웹 문서에 사용할 때 사용
.별도 파일로 저장하여 필요할 때 가져와 사용, .css 확장자 사용
.<style> 태그 없이 <link> 태그만 사용
.<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
인라인 스타일
.간단한 스타일은 적용할 대상에 직접 표시
.태그 내 style 속성 사용, style="속성:속성 값;"
주요 선택자
universal selector - 모든 요소에 스타일 적용
.*{속성:속성값;
속성:속성값;
}
.보통 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용
tag selector - 특정 태그를 사용한 요소에 스타일 적용
.태그{스타일}
class selector - 클래스 부분에 적용되는 스타일
.'.클래스명{스타일}'
.적용하고 싶은 태그 class속성 지정
.태그.클래스{스타일} 형식으로 사용시 태그와 클래스 모두 만족하는 부분에만 적용됨
.요소 전체가 아닌 일부에만 적용하기 위해 <span class="값">적용 텍스트</span> 사용
id selector - 해당 아이디에만 적용되는 스타일
.#아이디명{스타일}
.id selector는 한 번만 적용 가능, class selector는 제한 없음
group selector - 둘 이상 요소에 같은 스타일 적용하기
. 이름1, 이름2 {스타일}
Cascading
.스타일이 동시에 여러 개가 적용된다면 어느 스타일 규칙을 따라야 할지 결정하는 방법
.스타일 우선순위
.스타일 상속 - 태그 포함 관계에 따라 부모 요소의 스타일을 자식 요소로 전달
스타일 우선순위
.중요도
..사용자 스타일 시트의 중요 스타일 → 제작자 스타일 시트의 중요 스타일 → 제작자 일반 스타일 → 사용자 일반 스타일 → 브라우저 스타일
..중요 스타일은 !important를 붙여 사용
.명시도
..인라인 스타일 → id 스타일 → 클래스 스타일 → 태그 스타일
.중요도와 명시도가 같다면 소스의 순서로 나중에 온 스타일이 덮어씀
스타일 상속
.자식 요소는 부모 요소에 있는 스타일 속성을 전달 받음
.ex <body> 태그는 <h1> 태그의 부모요소, <body> 태그에 스타일 적용 시 <h1> 태그에도 적용
.배경 이미지나 배경 색은 자식 요소에 상속되지 않음, 기본 '투명' 속성
CSS3
.CSS2까지 통합형이었으나, CSS3부터 주제별 규약 별도 묶어 'CSS모듈'
.https://www.w3.org/Style/CSS 에서 관련 뉴스 및 현재 CSS 규약 확인 가능
.브라우저 접두사(prefix)
..-webkit-column-count:3;
.. 브라우저마다 다른 방식으로 지원하여 접두사 붙힘 필요
.. '-prefix-free' 자바스크립트 파일 이용하여 편리하게 사용 가능, <script src="prefixfree.min.js"></script>
'소프트웨어 > HTML+CSS' 카테고리의 다른 글
| CSS 3번째 - 색상/배경 스타일 (0) | 2020.01.15 |
|---|---|
| CSS 2번째 - 텍스트 스타일 (0) | 2020.01.09 |
| HTML5 5번째 - 멀티미디어 (0) | 2020.01.07 |
| HTML5 4번째 - 시맨틱(semantic) 태그 (0) | 2020.01.03 |
| HTML5 3번째- 폼 관련 태그 (0) | 2019.12.24 |
