CSS의 기본
HTML이 내용을 입력한다면, CSS는 디자인을 구성한다.
내용을 입력하는 기능과 디자인을 수행하는 기능이 분리됨으로써
다양한 기기에 맞추어 탄력적으로 웹문서를 만드는 게 가능하다.
반응형 웹 디자인 ?
→ PC, 모바일 관계 없이 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꾸어주는 것
2가지 웹 문서를 만드는 게 아닌, 하나의 웹 문서에서 작동하도록 만드는 것이 스타일의 역할이다.
1.스타일과 스타일 시트
CSS 스타일 형식
선택자 { 속성1: 속성값1; 속성2: 속성값2; }
→
선택자는 스타일을 어떤 태그에 적용할 것인지 알려 주는 것이고, 중괄호 {} 사이에는 스타일 정보를 넣는다.
속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며,
세미콜론(;) 으로 구분해서 스타일 규칙을 여러 개 지정할 수 있다.
→
위 예시에서 p는 선택자이고, text-align /color는 속성이고, center/purple은 값이다.
스타일을 텍스트 단락에 적용할 것이기 때문에 선택자를 p로 지정했다.
텍스트 정렬을 지정하는 text-align 속성과, 글자색을 지정하는 color 속성을 사용해서
2개의 스타일 규칙을 생성했다. 또한 세미콜론을 통해 한쌍의 속성을 구분 했다.
예시 1, 예시 2 모두 같은 스타일을 의미한다.
스타일 시트 구분
①기본 브라우저 스타일
CSS를 사용하지 않더라도 기본 스타일을 사용하는데, 이것을 브라우저 기본 스타일이라고 한다
②인라인 스타일
간단한 경우, 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
이것을 인라인 스타일이라고 함
③내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 한다
스타일 정보는 웹 문서 정보를 브라우저 화면에 표시하기 전에 결정해야 하므로
모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 <style> 태그 사이에 작성한다.
④외부 스타일 시트
스타일정보를 따로 저장해 놓은 것을 외부 스타일 시트라고 하며,
*.css라는 파일 확장자를 사용한다
외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다.
또한 만들어진 외부 스타일 시트는 웹 문서에 연결하고나서야 스타일이 문서에 적용된다는 점에 유의하자.
외부 스타일 시트에 연결할 때 사용하는 태그는 <link> 태그다.
ex)
별도로 생성된 외부 스타일 시트
6 Line에서 Link 태그 확인할 수 있다. 외부 스타일 시트 확인 가능하다.
2. CSS 기본 선택자
전체 요소에 스타일을 적용하는 전체 선택자
→ 전체 선택자(Universal selector)는 문자그대로 모든 요소에 적용할 때 사용
ex) * { 속성 : 값 …. }
또한, 전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다
예를 들어, 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에
여백을 약간 두는데 이것을 마진과 패딩이라고 한다.
이런 여백으로 인해 디자인이 깨끗하지 않을 우려가 있는데
전체 선택자를 통해 웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있다.
전체 선택자를 통해 여백이 없어졌다.
특정 요소에 스타일을 적용하는 타입 선택자
→ 타입 선택자(Type Selector)는 특정 태그를 사용한 모든 요소에 스타일을 적용한다.
모든 p 요소에 스타일을 적용한다.
p선택자를 사용해 모든 텍스트 단락의 글자를 이탤릭체로 표시한 예시이다.
특정 부분에 스타일 적용하는 클래스 선택자
→ 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때, 즉 특정 부분만 선택해서
스타일을 적용하고 싶을 때 클래스 선택자(Class Selector)를 사용한다
ex)
.클래스명 {스타일 규칙}
클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 한다.
미리 만들어 놓은 클래스 스타일을 적용할 때는
태그 안에 class=”클래스명” 처럼 class 속성을 사용해서 지정한다.
예를 들어 검은색 테두리를 그리는 .accent 스타일을 만든 후 <span> 태그를 통해 ‘레드향’ 요소에 적용했다.
또한 요소 하나에 클래스 스타일 2개 이상 적용할 수 있다.
클래스 스타일을 2개 이상 적용할 때는 공백으로 구분해 스타일 이름을 작성하면 된다.
특정 부분에 스타일을 한번만 적용하라 수 있는 id 선택자
→ id 선택자도 클래스 선택자와 마찬가지로 특정 부분을 선택해서 스타일을 지정한다.
(.)마침표 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 동일하다.
또한 id스타일을 웹 요소에 적용할 때는 id=”아이디명” 처럼 사용한다.
id선택자는 클래스 선택자와 달리 문서에 한 번만 적용할 수 있다.
즉 중복해서 적용될 수 없다는 점에 유의해야 한다.
ex)
#아이디명{스타일 규칙}
같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
→여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있다.
이때 쉼표(,)를 통해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의할 수 있다.
ex)
선택자1, 선택자2 { 스타일 규칙}
왼쪽을 오른쪽으로 표현한다.
3. 캐스케이딩 스타일 시트
①스타일 우선 순위
→ 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고,
그 우선순위에 따라 위에서 아래로 스타일을 적용
얼마나 중요한가?
적용 범위는 어디까지인가?
***!important : 어떤 스타일보다 우선 적용하는 스타일
소스 작성 순서는 어떠한가?
나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다
②스타일 상속
→ 스타일 시트에서는 자신 요소에서 별도로 스타일을 지정하지 않으면
부모 요소의 스타일 속성들이 자식 요소로 전달되는데 이것을 스타일 상속
cf.배경색, 배경 이미지는 스타일 상속되지 않는다.
'HTML.CSS.JS' 카테고리의 다른 글
| 배경색과 배경 범위 지정하기 (0) | 2022.06.23 |
|---|---|
| 레이아웃을 구성하는 CSS박스모델 (0) | 2022.06.22 |
| CSS 텍스트를 표현하는 다양한 스타일 (0) | 2022.06.21 |
| HTML 입력 양식 작성하기 (0) | 2022.06.16 |
| HTML 웹 문서에 내용 입력하기 (0) | 2022.06.14 |
