22.12.15 배운 내용 정리2
CSS의 기본(웹 문서에 디자인 입히기, 스타일과 스타일 시트, CSS 기본 선택자, 캐스케이딩 스타일 시트)
웹 문서에 디자인 입히기
※ 스타일을 사용하는 이유
웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 생각, 정렬, 각 요소의 배치 방법과 같이
문서의 겉모습을 결정 짓는 것을 가리킴.
이러한 작업을 HTML로 하지 않고 따로 스타일을 사용하는 이유는
① 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있기 때문
HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작임.
이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리함.
② 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있기 때문
CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 대상 기기에 맞게 CSS만 바꿔 주면
같은 내용을 여러 기기에서 볼 수 있음.
※ 반응형 웹 디자인
반응형 웹 디자인이란 사용자가 PC로 접속하든, 모바일로 접속하든
웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔 주는 방법을 말함.
스타일과 스타일 시트
① 스타일 형식 알아보기
CSS 소스에서 한 줄이 하나의 스타일에 해당하고, 조금 더 들여다보면 줄마다 형태가 비슷하다는 것을 알게 될 것임.
기본형 : 선택자 { 속성1: 속성값1; 속성2: 속성값2; }
맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호({ }) 사이에는 스타일 정보를 넣음.
속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며,
세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있음.
※ 텍스트 단락의 글자를 가운데로 정렬하고 글자색을 파랑으로 지정하기
<p> 태그에 스타일 적용하기
p { // p = 선택자
text-align : center; //text-align = 텍스트 정렬 속성, center = 값
color : blue; //color = 글자색 속성, blue = 값
}
※ 스타일 규칙을 작성하는 방법
스타일 규칙은 세미콜론(;)으로 구분하여 중괄호({ }) 안에 나열함.
스타일 규칙은 한 줄로 표기하기도하고 여러 줄로 표기하기도 함.
ex. CSS 한 줄로 표기
p { text-align: center; color: blue; }
ex. CSS 여러 줄로 표기
p {
text-align: center;
color: blue;
}
※ 스타일 주석 표기 방법
스타일에도 주석을 덧붙일 수 있음. 주석을 덧붙일 때는 /*와 */ 사이에 내용을 입력하는데,
이때 한 줄 또는 여러 줄이 들어갈 수도 있음.
② 스타일 시트 알아보기
웹 문서 안에서는 스타일 규칙을 여러 개 사용하는데 이러한 스타일 규칙을 한눈에 확인하고
필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 함.
스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과
사이트 제작자가 만드는 사용자 스타일로 나눌 수 있음.
이 사용자 스타일은 다시 인라인 스타일과 내부 스타일시트, 외부 스타일 시트로 나뉨.
※ 브라우저 기본 스타일
CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용하는데,
이것을 브라우저 기본 스타일이라고 함.
※ 간단한 스타일 정보를 적용하는 인라인 스타일
간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용하고 싶은 부분이 있다면
해당 태그에 style 속성을 사용해 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있음.
※ 스타일을 여러 곳에 적용할 때 쓰는 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고함.
스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로
모든 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 <style> 태그 사이에 작성함.
※ 스타일 정보를 따로 저장해 놓은 외부 스타일 시트
사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고
필요할 때마다 가져와서 사용하는 것이 일반적임.
이렇게 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 하고 *.css라는 파일 확장자를 사용함.
외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않음.
그리고 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용됨.
외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그임.
기본형 : <link rel="stylesheet" href="외부 스타일 시트 파일 경로">
※ 외부 스타일 시트 사용하기(CSS 파일)
<h1> 태그를 사용한 부분에 배경색과 글자색을 style.css라는 외부 스타일 시트 파일에 지정해 놓고,
HTML 파일에서 style.css를 링크한 것임.
CSS 기본 선택자 알아보기
① 전체 요소에 스타일을 적용하는 전체 선택자
전체 선택자는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용함.
전체 선택자로는 *(별표)를 사용함
기본형 : * { 속성: 값; ....... }
또한 전체 선택자는 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용함.
예를 들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록
문서 내용과 브라우저 테두리 사이에 여백을 약간 두는데 이것을 마진과 패딩이라고 함.
이런 여백 때문에 디자인이 깔끔하지 않을 경우 전체 선택자를 이용하여
웹 문서 전체에 마진과 패딩 여백을 0으로 지정할 수 있음.
※ 전체 선택자 사용하기
※ 태그와 요소의 차이점
태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킴.
ex. <p>텍스트 단락 지정하기</p>
이 소스에서 <p>와 </p> 태그는 태그 자체를 말하는 것이고
태그를 포함해 <p> 태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소라고 함.
따라서 <p> 태그를 적용한 스타일이라는 표현은 태그 자체를 적용하는 스타일이 아니므로 틀린 말임.
p 요소에 적용하는 스타일로 표현하는 것이 맞음.
② 특정 요소에 스타일을 적용하는 타입 선택자
타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용함.
기본형 : 태그명 { 스타일 규칙 }
※ 타입 선택자 사용하기
p 선택자를 사용하여 웹 문서에 있는 모든 텍스트 단락의 글자를 이탤릭체로 표시함.
p 요소의 스타일은 한 번만 정의했지만 웹 문서에 있는 <p> 태그를 쓴 요소 3개에 모두 적용됨.
③ 특정 부분에 스타일 적용하는 클래스 선택자
같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때 클래스 선택자를 사용함.
클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데,
이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 함.
기본형 : .클래스명 { 스타일 규칙 }
클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데,
이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class="클래스명"처럼
class 속성을 사용해서 지정하며, 클래스 스타일은 여러 곳에 적용할 수 있음.
클래스 스타일을 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적으면 됨.
※ 클래스 선택자 사용하기
검은색 테두리를 그리는 .accent 스타일을 만든 후 <span> 태그를 사용해서 '레드향' 요소에 적용.
<h1> 태그에 accent 스타일과 bg 스타일을 동시에 적용했으므로 회색 배경도 깔리고 검은색 테두리도 그려짐.
④ 특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
id 선택자도 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용함.
마침표 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같음.
그리고 id 스타일을 웹 요소에 적용할 때는 id="아이디명"처럼 사용함.
기본형 : #아이디명 { 스타일 규칙 }
클래스 선택자와 id 선택자의 가장 큰 차이는
클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면,
id 선택자는 문서에서 한 번만 적용할 수 있다는 것임.
이처럼 id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나
웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용함.
※ id 선택자 사용하기
문서 내용이 화면 중앙에 배치되도록 <div id="container"> 요소로 내용을 묶어 놓고,
스타일 시트에서 #container를 사용해 스타일을 정의함.
⑤ 같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자
선택자를 이용해 스타일을 정의하다 보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있음.
이럴 때는 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 됨.
기본형 : 선택자1, 선택자2 { 스타일 규칙 }
※ <h1>, <p> 태그를 중앙에 정렬하기
h1 {
text-align: center; /* 중앙 정렬 */
}
p {
text-align: center; /* 중앙 정렬 */
}
※ 그룹 선택자를 사용하여 <h1>, <p> 태그를 중앙에 정렬하기
h1, p {
text-align: center; /* 중앙 정렬 */
}
캐스케이딩 스타일 시트 알아보기
① 케스케이딩의 의미
CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래,
즉 계단식으로 적용된다는 의미로 사용함. 다시 말해 CSS는 우선순위가 있는 스타일 시트 정도로 해석할 수 있음.
그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함.
케스케이딩은 스타일끼리 충돌하지 않도록 막아주는 중요한 개념임.
※ 스타일이 충돌하지 않게 하는 두 가지 방법
- 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고,
그 우선순위에 따라 위에서 아래로 스타일을 적용함.
- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달함.
② 스타일 우선순위
첫 번째 원칙인 스타일 우선순위는 캐스케이딩에서 가장 중요함.
우선순위는 *'얼마나 중요한가', '적용 범위는 어디까지인가', '소스 코드의 작성 순서는 어떠한가'라는
3가지 개념에 따라 지정됨.
*얼마나 중요한가
웹 브라우저에 내용을 표시할 때는 단순히 CSS 소스의 스타일만 적용되는 것이 아님.
컴퓨터 사용자가 지정한 스타일과 웹문서를 제작한 제작자의 스타일,
그리고 웹 브라우저가 기본으로 정해 놓은 스타일
이렇게 3가지 스타일을 함께 사용함.
우선순위는 사용자 스타일 → 제작자 스타일 → 브라우저 기본 스타일 순서임.
*적용 범위는 어디까지인가
중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있음.
스타일 적용 범위가 좁을수록, 즉 정확히 필요한 요소에만 적용할 스타일일수록 우선순위가 높아짐.
단, 여기에서 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아짐.
우선순위는 !important → 인라인 스타일 → id 스타일 → 클래스 스타일 → 타입 스타일 순서임.
| 종류 | 설명 |
| !important | 어떤 스타일보다 우선 적용하는 스타일 |
| 인라인 스타일 | 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용함. |
| id 스타일 | 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용 가능함. (선택자 이름 앞에 # 기호 사용) |
| 클래스 스타일 | 웹 문서에서 지정한 부분에만 적용되는 스타일로 한문서에 여러 번 적용 가능함. (선택자 이름 앞에 마침표(.) 기호 사용) |
| 타입 스타일 | 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용함. |
*소스 코드의 작성 순서는 어떠한가
스타일 시트에서 중요도와 적용 범위가 같다면 그다음은 스타일을 정의한 소스 순서로 우선순위가 정해짐.
소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰는 것임.
※ 스타일의 우선순위 알아보기
위 예제에서 1번을 보면 첫 번째 텍스트인 h1 요소에는 타입 스타일과 인라인 스타일을 모두 사용함.
타입 스타일보다 인라인 스타일이 우선 순위가 높지만, 타입 스타일을 정의할 때 !important를 사용해 중요 스타일로
지정했기 때문에 여기에서는 타입 스타일(color : brown)의 우선순위가 높아서 제목은 갈색으로 표시됨.
위 예제에서 2번을 보면 두 번째 문단부터 마지막 문단까지 모두 p 요소임.
스타일 시트 안에 p 타입 스타일 color : black과 color : blue가 선언되어 있음.
두 스타일의 중요도와 적용 범위가 같아서 나중에 적은 스타일의 우선순위가 높음.
그래서 스타일 시트에서 정의한 2개의 p 타입 스타일 중에는 두 번째 선언한 스타일(color : blue)이 적용됨.
그런데 두 번째 문단에서 <p> 태그에 인라인 스타일을 사용하고 있음.
인라인 스타일의 우선순위가 타입 스타일보다 높기 때문에 두 번째 문단은 빨간색으로 표시되고
세 번째, 네 번째 문단은 파란색으로 표시됨.
③ 스타일 상속
웹 문서에서 사용하는 여러 태그는 서로 포함관계가 있음.
이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 함.
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이
자식 요소로 전달되는데, 이것을 스타일 상속이라고 함.
ex. 문서 구조에서 <body> 태그는 웹 문서에 사용한 모든 태그의 부모 요소임.
그래서 <body> 태그 스타일에서 글자색이나 글꼴을 지정하면 그 스타일은 웹 문서 전체에 적용할 수 있음.
'코딩 국비 학원 > Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트]레이아웃을 구성하는 CSS 박스 모델 (0) | 2022.12.18 |
|---|---|
| [Do it! HTML+CSS+자바스크립트]텍스트를 표현하는 다양한 스타일 (0) | 2022.12.16 |
| [Do it! HTML+CSS+자바스크립트]입력 양식 작성 (0) | 2022.12.15 |
| [Do it! HTML+CSS+자바스크립트]웹 문서에 다양한 내용 입력 (0) | 2022.12.14 |
| [Do it! HTML+CSS+자바스크립트]웹 개발 기본, HTML (0) | 2022.12.13 |
