스타일과 스타일 시트
- 스타일(style) : HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정짓는 내용들
- 스타일 시트(style sheet) : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것
스타일을 사용하는 이유
- 웹 문서의 내용과 상관없이 디자인만 변경이 가능하다.
- 내용과 디자인의 분리 - 웹 표준의 시작
- 디자인에 영향 없이 내용 수정하거나 내용은 건드리지 않고 디자인만 변경이 가능
- CSS Zen Garden사이트 참고
- 다양한 기기에 맞춰 탄력적으로 바뀌는 문서를 만들수 있습니다.
- 내용은 그대로 두고, 프린터나 스마트폰 브라우저 등 다양한 기기에 맞는 레이아웃을 만들 수 있다.
스타일의 형식
- 선택자 : {와} 사이에 정의한 스타일 규칙이 적용될 대상.
- 속성과 속성 값 : '속성 : 속성 값'과 같은 형식으로 함께 표시하며, 속성/ 속성 값 쌍이 여럿일 경우에 세미콜론(:)으로 구분
p { color : blue; font-size : 16px; } -텍스트 단락의 글자 색 파란색, 글자 크기 16px
h2{ font-size : 20px; color : orange; } -2단계 제목의 글자 크기 20px, 글자 색상 주황색
p{ color : blue; } -텍스트 단락의 글자 색 파란색주석사용은 /**/ 로하면 됩니다.
스타일과 스타일 시트
내부 스타일 시트
- 사용할 스타일을 문서 안에 정리한 것
- 모든 스타일 정보는<head>태그와 </head> 태그 안에서 정의
- <style> 태그와</style> 태그 사이에 작성
주의할점은 section에 적용시키면 여러개의 section이 있다는 가정하에 모든 section에 적용한게됩니다.
하나의 색션만 하고 싶을때는 id="아이디" 를 넣고 스타일에 #"아이디" { } 를해서 사용합니다.
출력 결과
외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용
- <style> 태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일 연결해줍니다.
스타일과 스타일 시트
인라인 스타일
- 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
- 스타일을 적용하고 싶은 태그에 style 속석을 사용해 style="속성 : 속성 값;" 형태로 스타일 적용
결과 출력
스타일 적용해준 부분만 빨간 글씨로 바뀐 것을 볼수가 있습니다.
주요 선택자
전채 선택자
- 페이지에 있는 모든 요소를 대상으로 스타일을 적용 할 때 사용합니다.
- 다른 선택자와 함께 모든 하위 요소에 한꺼번에 스타일을 적용하려고 할 때 주로 사용합니다.
*{속성 : 속성 값; 속석 : 속성 값;...}예를 들자면 웹 브라우저마다 기본적으로 설정해 놓은 패딩 과 마진의 기본 값이 있습니다. 브라우저마다 그 값이 똑같지 않기 때문에 일반적으로 전체 선택자 ( * )를 사용해서 패딩과 마진 값을 0으로 리셋합니다.
이렇게 출력되던게 위에 전체 선택자를 사용하여 패딩, 마진을 0으로 만들어주면
밑에 처럼 변경됩니다.
태그 선택자
- 문서에서 특정 태그를 사용한 모든 요소에 스타일이 적용됨
태그 { 스타일 }
주요 선택자
클래스(class) 선택자
문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의.
마침표 ( . ) 다음에 클래스 이름 지정
이렇게 앞에 .을찍고 class의 "이름"을 적은후 { } 안에 무엇을 할지 쓰면됩니다.
출력 해보면 id인 div 는 변경되지않고 밑에 2개는 색이 파랑색으로 변경된것을 확인 할 수 있습니다.
id 선택자
문서 안에서 한번만 사용한다면 id 선택자로 정의. 파운드( # ) 다음에 id 이름 지정합니다.
class 선택자와 id 선택자의 차이
공통점 : 요소의 특정 부분에만 스타일 적용
차이점
- 클래스 선택자 : 문서 안에서 여러 번 반복
- id 선택자 : 문서 안에서 한번만 사용
그룹 선택자
- 같은 스타일을 사용하는 선택자를 한꺼번에 정의
- 쉼표 ( , )로 구분해 여러 선택자를 나열
이름1, {
속성 : 속성값;
}
이름2, {
속성 : 속성값;
}속성의 값이 둘다 동일할때에
이름1, 이름2 {
속성 : 속성 값;
}이런식으로 변경 가능합니다.
'CSS' 카테고리의 다른 글
| CSS 배경 색, 배경 이미지 02 (0) | 2022.07.01 |
|---|---|
| CSS 배경 색, 배경 이미지 (0) | 2022.07.01 |
| CSS 캐스캐이딩 (0) | 2022.07.01 |
