스타일과 스타일 시트
스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 디자인을 변경
스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것
웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음
내용과 디자인의 분리
디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 바꾸는 게 가능
다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들 수 있습니다.
내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있습니다.
캐스캐이딩 스타일 시트(Cascading Style Sheets : css )
캐스캐이딩(Cascading) : ‘위에서 아래로 흐른다’는 뜻
선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 ‘위에서 아래로 흐르며 적용되는’ 방법을 선택
① 스타일 우선순위 - 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 우선순위에 따라 위에서 아래로 스타일 적용② 스타일 상속 - 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
※ 스타일 시트에서 ‘캐스캐이딩’은 가장 기본적인 개념이기 때문에 일반적으로 ‘스타일 시트’는 ‘캐스캐이딩 스타일 시트(CSS)’와 같은 의미로 사용됨
css 형식
형식
- 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는 데 사용
- 문서 작성과 디자인을 분리
- 하나의 웹 문서에서 문서 작성은 HTML이, 디자인은 CSS가 담당
디자인을 분리했을 때 장점
- 내용과 디자인 수정이 용이
- 다양한 기능으로 확장 가능
- 통일된 문서 양식 제공
- 전송 및 로딩 시간 단축
구성
- 선택자(Selector): 스타일 시트를 적용할 대상을 지정
- 속성(Property): 어떤 속성을 적용할지 선택
- 속성값(Value): 속성에 어떤 값을 반영할지 선택
/* 한 줄로 작성 */
p { color: blue; background-color: yellow; }
p { /* 여러 줄로 작성 */
color: blue;
background-color: yellow;
}
내부 스타일과 외부 스타일
내부 스타일
<head> 태그 안에 <style> 태그와 <style> 태그 사이에 스타일 규칙 기록
외부 스타일
스타일 정보를 별도의 파일로 저장 확장자는 .css
<link> 태그를 사용해 웹 문서에 링크
<link href="외부 스타일 파일" rel="stylesheet">
선택자
1. 전체 선택자 : 모든 *
* { background-color: hotpink; }
div * { background-color: hotpink; }
section article * { background-color: hotpink;}
2. 그룹 선택자 : , 나열
h1, h2, h3, h4, p { font-size: 20px; color:red }
h1 { background-color: pink;}
h2 { background-color: skyblue;}
h3 { background-color: hotpink;}
h4 { background-color: lime; }
p { background-color: yellow; }
3. 하위 선택자 : 공백
부모요소에 포함된 모든 하위 요소에 스타일이 적용
하위 선택자를 정의할 때 상위요소와 하위요소를 나란히 씀
상위요소 하위요소 { 속성:값; 속성:값....}
div ul { }
div ul li { }
div ul li strong { }
4. 자식 선택자 : >
부모요소의 자식요소만 스타일 적용
div > ul { }
div > ul > li { }
div > ul > li > strong { }
5. 형제 선택자 : +
같은 부모를 가진 형제 요소 중 첫 번째 요소 아래에만 적용
dl dt + dd { }
article + p { }
6. 형제 선택자 : ~
dl dt ~ dd { }
article ~ p { }
# 스타일 초기화 외부파일
- css폴더 만들고 reset.css파일 만들기
- Google에서 reset.css 검색( 초기화 )
- CSS Tools: Reset CSS - Meyerweb 클릭
- 내용복사
- css폴더에 reset.css 붙여 넣기
- html문서 head문 title문 아래 <link rel="stylesheet" href="css/reset.css">
요소는 각각의 기본적인 특성을 가지고 있기 때문에 요소의 특성을 초기화시킨다
reset.css ,. nomalize.css 두 가지 방식 사용
# margin, padding, box-sizing
margin : 요소의 밖의 영역
padding: 요소의 안쪽 영역
| 스타일 | 설명 | mdn |
| margin | 요소 밖의 영역 | 바로가기 |
| margin-left | 바로가기 | |
| margin-right | 바로가기 | |
| margin-bottom | 바로가기 | |
| margin-top | 바로가기 | |
| padding | 요소 안의 영역 | 바로가기 |
| padding-left | 바로가기 | |
| padding-right | 바로가기 | |
| padding-bottom | 바로가기 | |
| padding-top | 바로가기 | |
| box-sizing | 너비안에 패딩,보더 포함 | 바로가기 |
브라우저 사용여부 체크
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
스타일 연습사이트
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
암기
- 인라인 선택자: 1000점
- 아이디 선택자: 100점
- 클래스 선택자, 가상 클래스 선택자, 속성 선택자: 10 점
- 요소 선택자, 가상 요소 선택자: 1 점
# CSS Zen Garden 에 대한 이해
구인 : 자격요건
CSS Zen Garden이란?
"HTML은 고정, CSS만 바꿔서 전혀 다른 디자인을 구현하라"
이것이 CSS Zen Garden의 핵심 철학입니다.
- 사이트 주소: http://www.csszengarden.com/
- HTML 구조는 동일하게 유지하면서,
- CSS 스타일만 변경하여 완전히 새로운 디자인을 구현하는 웹 프로젝트입니다.
목적
- CSS의 가능성 보여주기
단순한 꾸밈 수준이 아닌, 완전히 다른 분위기의 사이트 디자인 연출 가능하다는 것을 보여줌 - 디자인과 코드 분리 원칙 학습
HTML 구조와 CSS 디자인을 분리해 관리하는 웹 표준 접근법을 훈련 - 전 세계 디자이너와 개발자의 창의적인 실험의 장
누구든지 HTML을 그대로 둔 채 CSS만으로 새로운 스타일을 제출 가능
HTML은 변하지 않고, 다음처럼 다양한 CSS만 적용
예)
HTML
<div id="page-wrapper">
<div id="header">
<h1>CSS Zen Garden</h1>
<p>The Beauty of CSS Design</p>
</div>
...
</div>
CSS 예1)
body {
background: white;
color: #333;
font-family: 'Helvetica';
}
CSS 예2)
body {
background: url('zen-pattern.jpg');
font-family: 'Nanum Brush Script', cursive;
color: #5c3d2e;
}'CSS3' 카테고리의 다른 글
| [ CSS3 ] position (0) | 2023.08.27 |
|---|---|
| [ css3 ] flex , 레이아웃구조 (0) | 2023.08.27 |
| [ css3 ] 선택자 , 스크롤, root , coding Convention (0) | 2023.08.24 |
| [ css3 ] 상속, 단위, 웹폰트, 컬러,둥근 사각형, 그림자 , float , 배경 (0) | 2023.08.22 |
| [ css3 ] border, font, text, display (0) | 2023.08.21 |