📚boostcourse의 웹 UI개발 강의 필기
📑CSS문법
1. CSS 문법과 적용
- CSS 구문
✍
h1 { color: yellow; font-size:2em; }
h1 { color: yellow;
font-size:2em;
}
선택자(selector) - "h1"
속성(property) - "color"
값(value) - "yellow"
선언(declaration) - "color: yellow", "font-size: 2em"
선언부(declaration block) - "{ color: yellow; font-size:2em; }"
규칙(rule set) - "h1 { color: yellow; font-size:2em; }"- CSS 주석
- 화면에 노출되지 않음
- 이게 무슨 코드인지 메모하기 위함
✍
/* 주석 내용_여러줄도 가능 */- CSS의 적용
- Inline
👉해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법
✍<div style="color:red;"> 내용 </div>- Internal
👉head내부에 style 태그를 활용한 방법
✍<style> div {color: red;} </style>- External
👉외부 스타일 시트 파일을 이용한 방법
css 파일을 하나 만들고 스타일 규칙을
✍div {color: red;} 이렇게 선언하고
<head> 내부에 <link>를 선언한 후 href 속성을 이용해 CSS 파일의 경로를 적음
✍<link rel="stylesheet" href="css/style.css">
- Import
👉스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식
css 파일을 하나 만들고 스타일 규칙을
✍@import url("css/style.css");
2. 선택자1
- 요소 선택자
- 선택자 부분에 태그 이름이 들어가며 태그 선택자라고도 불림
✍
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }- 그룹화
👉선택자는 쉼표를 이용해서 그룹화 가능
✍
h1, h2, h3 { color: yellow; }
👉선언들도 그룹화가 가능
✍
h1 { color: yellow; font-size: 2em; background-color: gray; }
👉전체 선택자
✍
* { color: yellow; }3. 선택자2
- class 선택자
👉원하는 태그에 class 이름을 적어주고
✍
<p class="class_name"> ... </p>
👉클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어줌
✍
.class_name { font-size: 30px; }- 다중 class
👉class 속성은 2게 이상의 값을 가질 수 있음
👉공백으로 구분
✍
<p class="class_name1 class_name2"> ... </p>
✍
.class_name1 { font-size: 30px; }
.class_name2 { color: blue; }- id 선택자
👉원하는 태그에 id 이름을 적어주고
✍
<p id="id_name"> ... </p>
👉id 선택자를 쓸 때는, 맨 앞에 #(해시)를 찍어주면 됩니다.
✍
#id_name { background-color: yellow; }
👉id 속성값은 문서 내에 유일하게 사용이 되어야 함4. 선택자3
- 선택자의 조합
- 여러 종류의 선택자를 조합하여 사용할 수 있음
✍
/* 요소와 class의 조합 */
p.class_name { ... }
/* 다중 class */
.class_name1.class_name2 { ... }
/* id와 class의 조합 */
#id_name.class_name { ... }- 속성 선택자
- 단순 속성으로 선택
✍
p[class] { color: silver; }
👉<p>이면서 class 속성이 있는 요소
✍
p[class][id] { text-decoration: underline; }
👉<p>이면서 class 속성과 id 속성이 함께 있어야 됨
✍코드
/* 1, 2, 3번째 요소 */
<style>p[class] { color: silver; }</style>
/* 3번째 요소 */
<style>p[class][id] { text-decoration: underline; }</style>
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>
✍결과Hello
HTML
- 정확한 속성값으로 선택
✍
p[class="class_name"] { color: silver; }
👉 <p>이면서 class 속성의 값이 class_name이면 적용
✍
p[id="id_name"] { text-decoration: underline; }
👉<p> 이면서 id 속성의 값이 id_name이면 적용
✍코드
/* 1번째 요소 */
<style>p[class="class_name"] { color: silver; }</style>
/* 2번째 요소 */
<style>p[id="id_name"] { text-decoration: underline; }</style>
<p class="class_name">Hello</p>
<p class="class_name1">CSS</p>
<p id="title">HTML</p>
✍결과Hello
HTML
- 부분 속성값으로 선택
[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
✍코드
/* 1, 2번째 요소 */
<style>p[class~="color"] { font-style: italic; }</style>
/* 1, 3번째 요소 */
<style>p[class^="color"] { font-style: italic; }</style>
/* 2번째 요소 */
<style>p[class$="color"] { font-style: italic; }</style>
/* 1, 2, 3번째 요소 */
<style>p[class*="color"] { font-style: italic; }</style>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
✍결과
1, 2번째 요소
red
blue
rainbow
1, 3번째 요소
red
blue
rainbow
2번째 요소
red
blue
rainbow
1, 2, 3번째 요소
red
blue
rainbow
5. 문서 구조 관련 선택자
- 문서 구조의 이해
✍html 예시
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>-
부모와 자식
👉부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다.👉자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다.
위 html에서 예를 들면
<body>의 부모 요소: <html> ↔ <html>의 자식 요소: <body>
<div>의 부모 요소: <body> ↔ <body>의 자식 요소: <div>, <p>-
조상과 자손
👉조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수도 있습니다.👉자손 요소는 그 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소입니다.
위 html에서 예를 들면
<body>의 조상 요소: <html> ↔ <html>의 자손 요소: <body>, <div>, <h1>, <span>, <p>
<div>의 조상 요소: <html>, <body> ↔ <body>의 자손 요소: <div>, <h1>, <span>, <p>
<h1>의 조상 요소: <html>, <body>, <div> ↔ <div>의 자손 요소: <h1>, <span>- 형제
👉같은 부모를 가지고 있는 요소들은 서로 형제 관계에 있습니다.
위 html에서 예를 들면
코드에서는 <div>, <p>가 형제 요소- 자손 선택자
👉자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
-<div>의 자손 요소인 <span>를 선택하는 선택자
div span { color: red; }-
자식 선택자
👉자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.👉공백은 있거나 없어도 상관이 없습니다.
-<div>의 자식 요소인 <h1>를 선택하는 선택자
div > h1 { color: red; }-
인접 형제 선택자
👉인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.👉공백은 있거나 없어도 상관이 없습니다.
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자
div + p { color: red; }
하루하루 성실하게