CSS 기본 개념
1. HTML 과 CSS 연동 방법
적용할 태그에 style 속성으로 넣기 (인라인 스타일)
가급적 사용하지 않아야 한다.
<html>
<body>
<h1 style="color:blue">Hello World!</h1>
</body>
</html>
HTML 문서 <head> 안에 <style> 태그로 넣기 (내부)
내부 방식보다는 외부부 방식을 많이 사용한다.
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
HTML 문서 <head> 안에 CSS 파일로 링크하기 (외부)
<html>
<head>
<link rel="stylesheet" href="css/sytle.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
2. Selector
HTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 함 CSS Selecotr는 이런 특정 부분을 선택하기 위한 문법이다.
- 전체 셀렉터(``) : 모든 요소를 선택
- 태그 셀렉터 : HTML 태그 이름으로 선택 (예 : p, div, span)
- 클래스 셀렉터 (.) : 특정 클래스가 적용된 요소 선택
- ID 셀렉터(#) : 특정 ID를 가진 요소 선택
- 속성 셀렉터([]) : 특정 속성이나 속성값을 가진 요소 선택
전체 셀렉터 (Universal Selector)
HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다(head 요소 포함)
* { margin: 0; }
태그 셀렉터 (Type Selector)
지정된 태그명을 가지는 요소를 선택한다
p { color: blue; }
클래스 셀렉터 (Class Selector)
class 속성 값을 지정하여 일치하는 요소를 선택한다. class 속성 값은 중복될 수 있다.
.highlight { background: yellow; }
ID 셀렉터 (ID Selector)
id 속성 값을 지정하여 일치하는 요소를 선택한다. id 속성 값은 중복될 수 없는 유일한 값이다.
#header { font-size: 24px; }
속성 셀렉터 (Attribute Selector)
지정된 속성을 갖는 모든 요소를 선택한다.
input[type="text"] { border: 1px solid gray; }
/*input 요소 중에 text 속성을 갖는 모든 요소*/
3. 복합 Selector (Combinator)
태그 안에, 또 다른 태그를 넣을 수 있으므로, 각 태그 또는 요소 간에 부모/자식의 관계가 매겨짐 관계를 기반으로 HTML 문서 특정 부분을 선택할 수 있는 문법이다.
- 후손 셀렉터 (Descendant Selector) : 스페이스로 표시
- 자식 셀렉터 (Child Selector) : > 로 표시
- 인접 형제 셀렉터 (Adjacent Sibling Selector) : + 로 표시
- 일반 형제 셀렉터 (General Sibling Selector) : ~ 로 표시
후손 셀렉터
부모 태그 안에 있는 모든 하위 태그를 하위 요소, 후손 요소라고 부름 부모 태그(Selector1) 안에 있는 모든 태그 중에 selector2를 선택한다.
selector1 selector2
<style>
div span {
color: royalblue;
}
/* div 요소의 후손요소 중 p 요소*/
</sytle>
자식 셀렉터
부모 태그(selector1) 안에 있는 바로 다음 레벨의 태그 중에 selector2를 선택한다.
selector1 > selector2
<style>
h1 { color: black}
div > p {color: red;}
</style>
인접 형제 셀렉터
태그 (selector1) 와 동일 레벨에 위치하고, selector1의 바로 뒤에 위치하는 selector2를 선택한다. 즉, selector1과 selector2 사이에 다른 태그가 위치할 경우 선택이 안된다.
selector1 + selector2
<style>
h1 + h2 { color: red;}
</style>
<body>
<div>
<h1>Hello</h1>
<h2>World!</h2>
</div>
</body>
일반 형제 셀렉터
태그(Selector1)와 동일 레벨에 위치하고, selector1의 뒤에 위치하는 selector2를 선택한다. 즉, selector1과 selector2 사이에 다른 태그가 위치해도 선택 가능하다.
selector1 ~ selector2
<style>
h1 ~ p { color: red; }
</style>
<body>
<h1>Hello</h1>
<h2>world !</h2>
<p>일반 형제 셀렉터는 사이에 다른 태그가 위치해도 선택이 가능합니다.</p>
</body>
4. 가상 클래스 셀렉터 (Pseudo-Class Selector)
가상 클래스는 요소에 특정 이벤트 발생시를 선택하는 문법이다. ex) h1 태그 요소에 마우스가 올라갔을 때 이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다. 가상 클래스는 마침표 대신 콜론을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다
selector:pseudo-class { property: value; }
- link : 방문하지 않은 링크가 적용된 요소
- visited : 방문한 링크가 적용된 요소
- hover : 특정 요소에 마우스가 올라간 상태
- active : 링크 요소를 클릭한 상태
- focus : 특정 요소에 포커스가 있는 상태
<style>
/* a 요소가 방문하지 않은 링크일 때 */
a:link {
color: red;
}
/* a 요소가 방문한 링크일 때 */
a:visited {
color: blue;
}
/* a 요소에 마우스가 올라와 있을 때 */
a:hover {
color: green;
}
/* a 요소가 클릭된 상태일 때 */
a:active {
color: gray;
}
/* input 요소에 포커스가 들어와 있을 때 */
input:focus {
color: brown;
}
</style>
5. 가상 요소 셀렉터 (Pseudo-Element Selector)
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.
- 요소 콘텐츠의 첫글자 또는 첫줄
- 요소 콘텐츠 앞 또는 뒤
가상 요소에는 두 개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 떄문에 임의의 이름을 사용할 수 없다.
- ::first-letter : 요소의 첫 글자 선택
- ::first-line : 요소의 첫 라인(줄) 선택
- ::after : 요소의 뒤에 위치하는 공간 선택
- ::before : 요소의 앞에 위치하는 공간 선택
- ::selection : 요소에서 드래그한 부분을 선택
selector::pseudo-element { property:value; }
<style>
/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }
/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line { color: red }
/* h1 요소 콘텐츠의 앞 공간에 content 속성 값을 삽입 */
h1::before{
content: " HTML!!! ";
color: blue;
}
/* h1 요소 콘텐츠의 뒷 공간에 content 속성 값을 삽입한다. */
h1::after{
content: " CSS3!!! ";
color: red;
}
/* 드래그한 콘텐츠 선택한다. */
::selection {
color: red;
background: yellow;
}
</style>
6. 상속 (Inheritance)
상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.
property Inherit
| width/height | no |
| margin | no |
| padding | no |
| border | no |
| box-sizing | no |
| display | no |
| visibility | yes |
| opacity | yes |
| background | no |
| font | yes |
| color | yes |
| line-height | yes |
| text-align | yes |
| vertical-align | no |
| text-decoration | no |
| white-space | yes |
| position | no |
| top/right/bottom/left | no |
| z-index | no |
| overflow | no |
| float | no |
<style>
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
</style>
<body>
<div class="text-red">
<h1>Heading</h1>
<p>Paragraph<strong>strong</strong></p>
<button>Button</button>
</div>
</body>
color는 상속되는 프로퍼티로서 자식 요소는 물론 자손 요소까지 적용된다. 하지만 button 처럼 요소에 따라 상속 받지 않는는 경우도 존재한다.
강제 상속 설정
부모의 프로퍼티 중 상속되지 않는 프로퍼티값을 상속하고 싶을 때에는, 자식 요소에 해당 프로퍼티를 inherit으로 설정하면 된다.
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
p {
color: OrangeRed;
}
h1 {
border: 1px solid OrangeRed;
}
span {
border: inherit;
}
</style>
</head>
<body>
<p>p 태그 안에 <span>span 태그를</span> 넣어보았습니다.</p>
<h1>p 태그 안에 <span>span 태그를</span> 넣어보았습니다.</h1>
</body>
</html>
CSS 우선순위
중요도, 선언 순서보다 명시도가 주로 우선순위에 많이 영향을 미치며, 계산 방식을 가볍게는 알고 있어야 한다.
- HTML 문서에서 뒤에 나오는 CSS가 우선순위가 높음
- 기본 우선순위
- 프로퍼티 값 뒤에 !important 있는 경우 (우선순위 점수 : 무한대) -> .yellow { background-color: yellow; !important; }
- 태그 안에 속성으로 적은 style에 의해 설정된 프로퍼티 (우선순위 점수 : 1000점) -> <p style="texct-align:center>스타일</p>
- id로 선택한 CSS Selector 에서 적용된 프로퍼티 (우선순위 점수 : 100점) -> #test { color: blue; }
- class, html 속성, 수도 클래스로 선택한 CSS Selector에서 적용된 프로퍼티 (우선순위 점수 : 10점) -> .test { color : green; }, [title="test"]{ color: blue; }
- 태그 또는 가상 요소 셀렉터로 선택한 CSS Selector에서 적용된 프로퍼티 (우선순위 점수 : 1점) -> h1 { color:red; }
- 전체(``)로 선택한 CSS Selector에서 적용된 프로퍼티 (우선순위 점수 : 0점) -> { margin: 0; }
- 상속된 프로퍼티 (우선순위 점수 : 마이너스)
💡 간단하게 정리하면 아래와 같다. !important > Inline Style > id > class > tag
7. CSS BOX MODEL (박스 모델)
block 또는 inline-block 특성을 가지는 요소는 box 형태를 가지며, box 형태의 세부 사항을 수정할 수 있다.
- content : 요소의 텍스트나 이미지 등 실제 내용이 위치하는 영역. width, height 프로퍼티를 가진다
- padding : border 안쪽에 위치하는 요소의 내부 여백 영역. padding 프로퍼티 값은 패딩 영역의 두께를 의미한다. 기본색은 투명(transparent)이므로, 요소에 적용된 배경의 컬러, 이미지가 패딩 영역에 적용된다.
- border : 테두리 영역. border 프로퍼티 값으로 테두리 두께를 지정할 수 있다
- margin : border 바깥에 위치하는 요소의 외부 여백 영역이다. margin 프로퍼티로 마진 영역의 두께를 지정할 수 있다. 기본색은 투명(transparent)이며, 배경색 지정이 불가능하다.
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
div {
/* 배경색 지정: content 와 padding 영역에 적용 */
background-color: orange;
/* 디폴트로 content 영역 너비, box-sizing 프로퍼티를 통해 변경 가능(추후 설명) */
width: 300px;
/* 패딩 영역 두께 */
padding: 20px;
/* 테두리: 두께 형태 색상 (테두리는 색상도 지정 가능) */
border: 10px solid yellow;
/* 마진 영역 두께 */
margin: 20px;
}
</style>
</head>
<body>
</body>
</html>
box-sizing
box-sizing 프로퍼티는 width, height 프로퍼티의 대상 영역을 변경할 수 있다.
box-sizing 프로퍼티의 기본값은 content-box이다. 이는 width, height 프로퍼티의 대상 영역이 content 영역을 의미한다. box-sizing 프로퍼티의 값을 border-box로 지정하면 마진을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 한다.
- content-box : width, height 프로퍼티 값은 content 영역 의미 (디폴트)
- border-box : width, height 프로퍼티 값은 content + padding + border를 포함한 영역 의미
<html>
<head>
<style>
.content-box {
width: 600px;
border: 10px solid;
padding: 50px;
margin: 50px;
background-color: red;
}
.border-box {
box-sizing: border-box;
width: 600px;
border: 10px solid;
padding: 50px;
margin: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="content-box">content-box</div>
<div class="border-box">border-box</div>
</body>
</html>
8. 참고문헌
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
poiemaweb.com
https://www.inflearn.com/course/프런트엔드-풀스택-2
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2] 강
잔재미코딩 DaveLee | 현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이
www.inflearn.com