1. CSS 란?
👩🏻💻 CSS (style) : 각 요소들이 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어로 홈페이지의 스타일 즉 디자인 요소를 담당
1) 스타일
a. 스타일 형식
[기본구조]
선택자(Selector) { 속성(property) : 값(value); }
(* 스타일은 기본적으로는 마지막에 작성된 순서대로 표현되어짐!)
✏️ 맨 앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것
✏️ 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라 하며, 세미콜론(;)으로 구분해 스타일 규칙을 여러 개 지정할 수 있다.
b. 스타일의 주석 표기
<style>
/* style 안에 작성하는 주석방법! */
</style>
✏️ /* */ 안에 한 줄 또는 여러 줄 들어갈 수 있다.
💡 CSS 소스 경량화
- CSS 소스는 네트워크를 이용해 파일로 내려받으므로 되도록 파일 크기가 작은 것이 좋다.
- 즉, 줄 바꿈, 공백등을 제거하고 꼭 필요한 정보만 남겨 파일을 작게 만드는 것을 'CSS 소스 경량화(minify)' 라고 한다.
2) 스타일 시트
📁 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 '스타일 시트'라고 한다.
a. 브라우저 기본 스타일
· CSS를 사용하지 않은 웹 문서라 하더라도 웹 브라우저에 표시할 때는 기본 스타일을 사용
b. 사용자 스타일
💡 인라인 스타일(Inline style)
- HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법
</h2 style="color:green">
💡 내부 스타일 시트(Internal style sheet)
- <style>태그를 사용하여 CSS 스타일을 적용하는 방법
<head>
<style>
body { background-color: lightyellow; }
</style>
</head>
💡 외부 스타일 시트(External style sheet)
- 외부에 작성된 .CSS문서 즉 스타일 시트 파일을 연결하여 적용하는 방법
<head>
<link rel="stylesheet" href="외부 스타일 시트 파일 경로">
</head>
⚡️ 외부 스타일 시트 작성
1. html 파일이 있는 디렉토리에 css 라는 이름의 디렉토리를 생성
2. css 디렉토리에 main.css 파일 생성
3. html 파일의 <style> 태그 안의 부분을 복사해서 main.css에 붙여넣기
▶️ <style> 태그는 포함하지 않음
4. html 파일의 <style> 태그 삭제
5. <link> 태그로 css 파일을 연결
⚡️ 외부 스타일 시트의 단점
- 캐쉬 때문에 바로 적용이 안 되는 경우가 있음
<!-- main.css 파일 -->
.de {
color: #09F;
}<head>
<meta charset="UTF-8">
<title>CSS 지정 방식</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<p class="de">
디지털 디자인 이란 ?<br>
우선 '디지털(Digital)' 그리고 '디지털 스토리텔링(Digital Storytelling)'이란 말에 대해 생각해보자.
</p>
</body>
2. CSS 기본 선택자
1) 클래스 선택자 class selector
.클래스명 { 스타일 규칙 }
👩🏻💻 클래스 이름을 사용해서 다른 선택자와 구별하는데, 클래스 이름 앞에 마침표(.)를 붙여야 한다.
👩🏻💻 클래스 스타일을 적용할 때는 태그 안에 class="클래스명" 처럼 class 속성을 사용해서 지정
👩🏻💻 요소 하나에 클래스 스타일을 2개 이상 적용할 수 있다.
▶️ 이 때 공백으로 구분해서 스타일 이름을 적으면 된다.
<head>
<meta charset="UTF-8">
<title>CSS 지정 방식</title>
<style>
.de {
color: #09F;
}
</style>
</head>
<body>
<p class="de">
디지털 디자인 이란 ?<br>
우선 '디지털(Digital)' 그리고 '디지털 스토리텔링(Digital Storytelling)'이란 말에 대해 생각해보자.
</p>
</body>
2) 전체 선택자 universal selector
* { 속성: 값... }
👩🏻💻 html내에 등장하는 모든 형태를 선택 (초기화, 기본 설정값) 가급적 사용안하는 것이 좋음.
➡️ reset.css 치면 나오는 글 참고해서 작성하는 것이 좋다.
<style>
* {
margin: 0; /* 바깥여백 */
padding: 0; /* 안쪽여백 */
}
</style>
</head>
<body>
<h4>Artwork Concept Drawing</h4>
<h1>아트웍 컨셉 드로잉</h1>
<p>
편집 포트폴리오에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
</p>
</body>
3) 타입 선택자 type selector
태그명 { 스타일 규칙 }
👩🏻💻 특정 태그를 사용한 모든 요소에 스타일을 적용하는 선택자로, html 화면 내에서 하나의 이름으로 한 번만 사용권장
➡️ 주로 큰 단락, 부모에서 사용
👩🏻💻 여러 태그들을 한 번에 선택해 스타일 속성을 적용할 때 쉼표 사용
💡 태그(tag)와 요소(element)
- 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킴
- 즉 요소는 태그 안에 적힌 문자들을 지칭
<style>
* {
margin: 0; /* 바깥여백 */
padding: 0; /* 안쪽여백 */
}
body {
background: #000000; /* 배경색 지정. #000 -> 검정색 */
color: white; /* 글자색 */
}
</style>
</head>
<body>
<h4>Artwork Concept Drawing</h4>
<h1>아트웍 컨셉 드로잉</h1>
<p>
편집 포트폴리오에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
</p>
</body>
태그 선택자와 클래스 선택자를 함께 사용하면 더 정확하게 태그를 선택할 수 있음
ex. 태그명.클래스명
<head>
<style>
li.select {
color: red;
}
</style>
</head>
<body>
<h1 class="select">Lorem ipsum</h1>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
4) id 선택자 id selector
#아이디명 { 스타일 규칙 }
👩🏻💻 id 선택자도 클래스 선택자와 마찬가지로 특정 부분에 스타일을 적용할 때 사용
👩🏻💻 마침표(.) 대신 # 기호를 사용한다는 점만 제외하면 클래스 선택자와 사용법은 동일
👩🏻💻 주로 큰 단락, 부모에서 사용. 자바 스크립트에서 사용.
<head>
<meta charset="UTF-8">
<title>스타일시트</title>
<style>
* {
margin: 0;
padding: 0;
}
#title1 {color: #666666;}
#title2 {color: blue;}
#title3 {color: orange;}
#title4 {color: red;}
#title5 {color: gray;}
#title6 {color: green;}
</style>
</head>
<body>
<h1 id="title1">웹디자인</h1>
<h2 id="title2">스마트폰 웹디자인</h2>
<h3 id="title3">웹기획</h3>
<h4 id="title4">웹프로그래밍</h4>
<h5 id="title5">웹퍼블리쉬</h5>
<h6 id="title6" style="color:red;">제이쿼리</h6>
</body>
id는 고유값이어야 하지만, 스타일시트에서는 id 속성 중복이 문제가 되지 않음
하지만 자바스크립트는 id 속성이 중복될 경우에 문제가 발생
예) getElementById(), getElementsByClassName()
id 속성은 중복되지 않게 사용해야 함
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#rint { color: red;}
</style>
</head>
<body>
<h1 id="rint">CSS3 Selector Basic</h1>
<h2 id="rint">CSS3 Selector Basic</h2>
<h3 id="rint">CSS3 Selector Basic</h3>
</body>
5) 그룹 선택자
선택자1, 선택자2 { 스타일 규칙 }
👩🏻💻 여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)로 구분해 여러 선택자 나열 후 스타일 규칙을 한 번만 정의
3. 캐스케이딩 스타일 시트
🚀 캐스케이딩 cascading 은 CSS 의 'C'에 해당하며, 스타일 시트에서 우선순위가 위에서 아래로 적용된다는 의미로 사용
🚀 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정
스타일 충돌하지 않게 하는 방법 : 스타일 우선순위 적용 / 스타일 상속
1) 스타일 우선순위
👾 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙
👾 웹 브라우저 내용을 표시할 때 사용자 스타일, 제작자 스타일, 웹 브라우저 기본 스타일 순으로 우선 적용 됨
👾 중요도가 같은 스타일인 경우 필요한 요소에만 적용할 스타일 일수록 우선순위가 높아진다.
a. ! important : 스타일에 강제 스타일 적용 시 사용 ex) background-color: yellow !important;
b. 인라인 스타일 ex) <h2 style="color:green">
c. id 스타일 ex) #id { color: #000; }
d. 클래스 스타일 ex) .class { color:#000; }
e. 타입 스타일 ex) h1 { color:#fff; }
<head>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-style: italic; /* 글자 스타일 */
color: red !important /* 글자 색상. 중요 스타일은 !important 붙임 */
}
p {
color: orange; /* 글자 색상 */
}
</style>
</head>
<body>
<h1>디자인스킬업</h1>
<p style="color:blue;">
2D 그래픽은 모든 그래픽에서 기본이라 할 수 있습니다. 그래픽 작업에서 높은 비중을 차지합니다.
</p>
</body>
💡 소스코드의 작성 순서
- 스타일 시트에서 중요도와 적용범위가 같아면 그 다음은 스타일을 정의한 소스 순서로 우선순위가 정해진다.
➡️ 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓴다.
<head>
<style>
* {
margin: 0; /* 바깥여백 */
padding: 0; /* 안쪽여백 */
}
body {
background: #000000; /* 배경색 지정. #000 -> 검정색 */
color: white; /* 글자색 */
}
body {
background: #999; /* 동일한 속성에 값을 지정하는 경우 나중의 것이 적용됨 */
font-family: '돋움'; /* 기본 글꼴 돋움 */
font-size: 10px; /* 글자 크기 10px */
}
body {
line-height: 30px; /* 줄 간격 30px */
}
a {
text-decoration: none; /* a 속성을 가진 링크에 어떤 꾸밈도 하지 않음 */
color: yellow; /* 링크를 지정한 글자의 색상을 노란색으로 지정 */
}
.color1 {
color:green;
}
</style>
</head>
<body>
<h4>Artwork Concept Drawing</h4>
<h1 class="color1">아트웍 컨셉 드로잉</h1>
<p class="color1">
편집 <a href="#">포트폴리오</a>에 포함될 수 있는 북커버 및 동화책 삽화 제작, 웹 포트폴리오에 포함될 수 있는 아트웍 실습,
3D 캐릭터 디자인이나 모션 그래픽에 사용할 수 있는 아트웍 표현에 대하여 학습합니다.
</p>
</body>
2) 스타일 상속
👾 웹 문서에서 사용하는 여러 태그는 서로 포함 관계
▶️ 이 때 포함하는 태그를 부모 요소, 포함된 태그를 자식요소
👾 '스타일 상속' : 부모 태그에 특정 값을 적용 시 아래, 즉 하위 요소에도 그 속성들이 그대로 적용
▶️ 예를 들어 정렬 text-align, color, font-size...
▶️ body 태그는 웹 문서에서 사용한 모든 태그의 부모요소
<head>
<meta charset="UTF-8">
<title>스타일시트</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: '돋움'; /* 글꼴 */
color: red; /* 글자 색상 */
}
</style>
</head>
<body>
<h1>디자인과정</h1>
<ul>
<li>웹학과</li>
<li>편집디자인학과</li>
<li>CG학과</li>
<li>모션영상학과</li>
<li>건축인테리어학과</li>
<li>기계학과</li>
</ul>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'HTML&CSS > CSS' 카테고리의 다른 글
| [CSS] 배경 이미지 지정과 속성 (0) | 2024.03.22 |
|---|---|
| [CSS] 고급 선택자 | 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0) | 2024.03.21 |
| [CSS] 수직 중앙 정렬 방법, overflow와 scroll (0) | 2024.03.21 |
| [CSS] display 속성과 사용 예, float, clear, 여백 조절-[margin, padding] (0) | 2024.03.20 |
| [CSS] 박스 모델 요소 및 구성, 테두리 스타일 지정 (0) | 2024.03.20 |