1. CSS(Cascading Style Sheets)
- CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용된다.
- 이 우선순위가 적용되는 과정이 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙는다
- External CSS >> CSS in <head> >> inline CSS >> CSS applied by the user
- CSS applied by the user : 다크모드처럼 서비스 유저가 브라우저에 직접 설정한 CSS
- 뒤로갈수록 높은 우선순위를 가진다.
작성방법
- 선택자(Selector) - 이 요소에
{- 스타일 적용을 시작할게요- 속성(Property) - 이 속성에
-
:- 대응 값은
- 속성값(Property Value) - 이 값으로 지정해주세요
- 세미콜론(
;) - 해당 속성 선언(명령)을 끝낼게요
}해당 요소에 대한 스타일 적용을 마칠게요.
주석
- 한 줄, 여러 줄 모두 /* */로 작성
2. CSS 적용방식
1. 인라인 방식
- 태그 자체에 style 속성으로 스타일을 주는 방식
- 일부 스타일 적용에 제한이 있다. (:hover, ::before, ::after)과 같은 가상 요소에는 사용 불가
- 보통 이렇게 사용하지 않는다.
<p style="color:yellow; background-color:black;">Hello wold</p>2. 내부 스타일
- head 태그 안 style 태그를 사용하여 스타일을 주는 방식
- 코드가 길어질수록 HTML 파일 길이가 길어지기 때문에 효율적이지 않다
<style>
p {
color:yellow;
background-color:black;
}
</style>3. 외부 스타일
- Link
- 현재 문서와 외부 리소스의 관계를 명시한다
- 빈 태그로 속성만을 포함
- head 요소 내부에만 위치할 수 있다.
- rel : relations 관계. 대상 파일의 속성을 나타낸다. css 파일은 stylesheet
- href : hyper-refernces 경로, 연결 시 참조할 파일의 위치를 나타낸다.
- HTML과 CSS를 분리하면 코드의 가독성과 효율성이 모두 높아지기 때문에 가장 권장하는 방식이다.
<link rel="stylesheet" href="style.css">/* style.css */
p {
color:yellow;
background-color:black;
}3. CSS 상속 (Inheritance)
- CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다
- div의 color 속성은 자식인 h1,h2,p에게 상속이 된다
- 하지만, width, height, margin, padding, border처럼 크기와 관련된 속성은 상속되지 않는다
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>div {
color: red;
border: 5px solid pink;
}
- inherit : 선택한 요소에 적용된 속성값을 상속(부모와 동일하게)받게 한다
- initial : 브라우저 기본 스타일 속성을 따르게 한다
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
</div>div {
color: red;
border: 5px solid pink;
}
h1 { border: inherit; }- button, input 요소처럼 form 관련 태그들은 상속받지 않기도 한다
- 브라우저 별로 적용된 스타일이 있기 때문
<div>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
<button>Hello</button>
<input type="text" value="hello">
</div>div {
color: red;
border: 5px solid pink;
}
h1 { border: inherit; }
4. CSS 선택자
연습 페이지 : https://flukeout.github.io/ | https://css-speedrun.netlify.app/
전체 선택자 (*)
- universal selector
- html을 포함한 HTML 문서 내의 모든 요소를 선택함. *(별표, 애스터리스크) 사용하여 선택할 수 있다.
- A * : A 안에 있는 모든 요소를 선택
타입(유형) 선택자 (태그 선택자, 요소 선택자)
- type selector
- 특정 태그를 선택
h1 {
font-weight:bold;
}
p{
font-size: 24px;
}아이디 선택자 (#)
- ID selector
- [주의사항] HTML 페이지 내에 id는 유일해야 한다
- HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어진다
- 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많다
#header {
padding: 10px;
}클래스 선택자 (.)
- 클래스 네이밍 규칙 : (형태)(의미)(순서)_(상태)
- class selector
- 클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있다.
⇒ 재사용성이 높다
- A.className : A태그중 특정 클래스 명을 가진 요소를 선택
.fc-red {
color: red;
}💡
id, class는 숫자로 시작하면 안된다!
하이픈(
하이픈(
-) 과 언더바(_), 문자로만 시작할 수 있다.특성 선택자 ([ ])
- 주어진 특성을 가진 모든 요소를 선택한다.
- A[attribute] : 특정 어트리뷰트를 가지는 A태그를 선택
- [attribute] : 특정 어트리뷰트를 가지는 모든 태그를 선택
- [attribute=’a’] : a 어트리뷰트값을 가지는 모든 태그를 선택
- [attribute^=’a’] : a로 시작하는 어트리뷰트 값을 가지는 모든 태그를 선택
- [attribute$=’a’] : a로 끝나는 어트리뷰트 값을 가지는 모든 태그를 선택
- [attribute*=’a’] : a를 포함하는 어트리뷰트 값을 가지는 모든 태그를 선택
[type="button"]{
border:0;
cursor:pointer;
}
[class="btn"]{
color:#fff;
background: royalblue;
}그룹 선택자 (,)
h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}h1, h2, h3, h4, h5, h6{ font-weight:bold;}복합 선택자
자손(하위) 선택자( )
- 자식, 자손 모두를 선택할 수 있다.
- 공백, 띄어쓰기를 통해 구분한다!
section p {
border: 3px solid skyblue;
}자식 선택자(>)
>를 통해 구분한다.
- 직계자손만을 선택한다.
section > p{
color:royalblue;
}일반 형제 선택자(~)
~를 통해 구분한다.
- 뒤에 나오는 형제만 선택한다.
section ~ p{
text-decoration:underline;
}인접 형제 선택자(+)
+를 통해 구분한다.
- 바로 뒤에 인접한 형제만 선택한다.
section + p{
background:yellow;
}
가상 클래스 선택자
- 가상 요소 : 존재하지 않는 html 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능
- pseudo selectors
- 선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있다
- 형용사처럼 생각하자
- div:first-of-type = div들중 1번째 요소
가상 클래스
:link | 방문하지 않은 링크 |
|---|---|
:visited | 방문한 링크 |
:hover | 마우스 커서를 올려 놓았을 때 |
:active | 마우스로 클릭했을 때 |
:focus | 포커스 되었을때 |
:focus : 클릭을 하거나 Tab키로 특정 요소를 선택한 경우
구조적 가상 선택자
- : first-child
- 형제 요소 그룹 중 첫 번째 요소
- : last-child
- 형제 요소 그룹 중 마지막 요소
💡
body의 직계 자손의 경우
:first-child 선택자는 사용가능하지만, :last-child 선택자가 적용되지 않는다.- nth-child
- 형제 사이에서의 순서에 따라 요소를 선택
- 여러 종류의 형제 태그가 혼재되어있는 상황이라면, 모든 형제 태그 중 n 번째 태그를 선택
- ul li:nth-child(3) = ul의 첫번째 자식태그가 div 라면 2번째 li 태그를 선택
- n을 활용한 식을 넣는 경우, 덧셈과 뺄셈까지 가능.
- 곱셈은 앞에 계수를 넣어 사용 가능
/* 2번째 li */
li:nth-child(2) {
color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
color: lime;
}
/* 2n+1번째 li. (n은 0부터 1씩 증가합니다)*/
li:nth-child(2n+1) {
color: lime;
}- :only-child
- 유일한 형제요소를 선택
- :first-of-type
- 같은 요소 중 첫번째 요소를 선택
- :last-of-type
- 같은 요소 중 마지막 요소를 선택
- :nth-of-type
- 같은 요소 중 지정한 요소를 선택
- :empty
- 자식을 가지지 않은 요소를 선택
- : not
- 부정 선택자
/* li 중 첫번째가 아닌 li */
li:not(:first-child){
margin-top:20px;
}가상 요소 vs 가상 클래스
- 가상 클래스 (:) : 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어
| 가상 클래스 | 설명 |
| :active | 해당하는 요소를 활성화 했을 때 즉, 클릭한 상태일 때 스타일 부여 |
| :checked | input 태그의 type이 checkbox나 radio일 경우 해당 태그가 체크 되어있을 때 스타일 부여 |
| :disabled | 선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 부여 ex) input, button, a태그 |
| :enabled | :disabled의 반대로 활성화 되어있는 요소에 스타일 부여 |
| :empty | 자식 요소가 없는 태그에 스타일 부여 |
| :focus | input 태그에 focus를 한 상태일 때 스타일 부여 |
| :hover | 해당 요소에 마우스를 올렸을 때 스타일을 부여 |
| :link | 미방문 링크에 스타일 부여 |
| :visited | 이미 방문한 링크에 스타일 부여 |
| :not(selector) | (selector)를 제외한 나머지 요소들에 스타일 부여 ex) .main p:not(.cmt){color:red} (.main 클래스 하위에 있는 p태그 중 .cmt 태그를 제외하고 color:red를 적용) |
| :read-only (읽기전용) | input 태그에 readonly 속성을 지정한 요소에 스타일 부여 |
| :required (필수입력) | input 태그에 required 속성을 지정한 요소에 스타일 부여 |
| :first-child | 형제 요소 중 첫 번째 자식요소(맨 앞)에 스타일 부여 ex) .main div:first-child{color:red;} (.main 클래스 자식 요소인 div 중 첫 번째 div에 color:red 적용) * 만약 div 이전 형제요소 중 다른 태그가 있으면 스타일 적용이 어렵다. <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-child{color:red} -> 아무런 스타일 변화가 없다. |
| :first-of-type | 형제 요소 중 해당하는 태그의 제일 첫 요소에 스타일 부여 ex) <div class="main"> <p>test1</p> <div>test2</div> </div> .main div:first-of-type{color:red} -> div태그 (test2)에 color:red가 적용된다. |
| :last-child | 형제 요소 중 가장 마지막 요소에 스타일 부여 |
| :last-of-type | 형제 요소 중 해당하는 태그의 가장 마지막 요소에 스타일 부여 |
| :nth-child(n) | n번째 요소에 스타일 적용, n에 숫자 뿐만 아니라 even(짝수), odd(홀수), 2n+1 등 특정 수식을 줄 수 있다. |
| :nth-last-child(n) | 뒤에서 n번째 요소에 스타일 부여 |
| :only-child | 형제 요소 중 유일하게 있는 요소에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용x) ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> div의 형제에 p태그가 있으므로 스타일 적용 x |
| :only-of-type | 형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여 ex) <div class="main"> <div>test1</div> <p>test2</p> </div> .main div:only-child{color:red} -> 형제 요소 중 div는 하나기 때문에 스타일 적용 |
- 가상 요소 (::) : 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것
- 가상 클래스와 구분하기 위해 콜론을 2번 사용
| 가상요소 | 설명 |
| ::before | 지정된 요소의 앞에 가상의 요소 생성 <div class="main"> <p>test1</p> </div> .main p:before{content:"- "} -> - test1로 출력된다. (- 표시를 before로 삽입) |
| ::after | 지정된 요소의 뒤에 가상의 요소 생성 |
| ::first-letter | 지정된 요소의 첫 번째 글자에 스타일 적용 |
| ::first-line | 지정된 요소의 첫 번째 줄에 스타일 적용 |
5. CSS 선택자 우선순위
1. 후자우선의 원칙
- 동일한 선택자에 동일한 속성이 사용되었을 경우, 뒤에 적힌 속성을 따른다.
2. 구체성의 원칙(Specificity)
- 어떤 선택자가 더 구체적인가?
2.1 가중치
- inline 스타일 속성
- id #
- class . | 가상 클래스 | 속성선택자
- type(tag) | 가상 요소 선택자
순서대로 가중치가 높다
2.2 우선순위 계산
| inline-style | 1000점 |
|---|---|
id 선택자 # | 100점 |
class ., 가상클래스, 속성선택자 | 10점 |
| 타입, 가상요소 선택자 | 1점 |
전체선택자 * | 0점 |
우선순위 계산기 : https://specificity.keegan.st/
퀴즈 1
<div>
<p id="id" class="class">
1. 이 글자는 어떤 색일까요?
</p>
<p id="id" class="class" style="color:red">
2. 이 글자는 어떤 색일까요??
</p>
</div>
div #id{
color:green;
}
p{
color:black;
}
#id{
color:blue;
}
.class{
color:yellow;
}- 초록색
#id,.class단독으로쓰인것보다 유형선택자와 아이디 선택자 가 함께 쓰인div #id처럼 더 구체적으로 작성된 선택자의 속성이 적용된다.
- 빨간색
inline-style의 속성이 우선으로 적용된다.
퀴즈 2
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자 우선순위 점수</title>
</head>
<body>
<main>
<section>
<article>
<div>
<ul class="ul">
<li>
<p>
<strong>
<span>
<a href="#" class="click">
1. 이 글자는 어떤 색일까요?
2. 배경색은 어떤 색일까요?
</a>
</span>
</strong>
</p>
</li>
</ul>
</div>
</article>
</section>
</main>
</body>
</html>/* 클래스 + 유형 선택자 */
.ul a {
color: yellow;
}
/* 클래스 선택자 */
.click {
color: green;
background: black;
}
/* 유형 선택자 */
html body main section article div ul li p strong span a {
background: purple;
color: blue;
}- 노란색
- 검은색🤔클래스 + 유형은 11점이고,
클래스는 10점이고,
타입 선택자 12점이니,
1번의 답은 파란색, 2번의 답은 보라색이어야하는거 아닌가요?
아무리 구체적으로 작성하였다 하더라도!
가중치의 점수가
클래스선택자 > 유형 선택자 가중치 법칙을 이길 수는 없다!
3. 중요성의 원칙
- !important
- 이 선언은 다른 CSS의 어떤 선언 보다도 우선
- !important는 선택자 우선순위에 직접적인 영향을 미친다
- 하지만 CSS의 자연스러운 상속을 깨트리기 때문에 오류/버그 발생 시 수정을 어렵게 만듦으로 좋지 않은 습관이다.
- 속성 옆에 사용
6. Display 속성
- 박스(html 요소)의 유형을 결정
- 박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정
💡
[주의] CSS 속성으로 시각적인 부분이 바뀌었을 뿐 태그 자체의 요소가 블록 레벨로 바뀐 것은 아니다!
inline 요소에 display:block 을 주면 block 요소의 특성을 가지지만
inline 요소임이 변하지 않는다.
inline 요소에 display:block 을 주면 block 요소의 특성을 가지지만
inline 요소임이 변하지 않는다.
block: 요소 전후에 줄 바꿈을 생성.
inline: 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성.
정상적인 흐름에서 공간이 있으면 다음 요소는 같은 줄에 있다.
inline-block: inline 줄 바꿈 없이 한 줄에 놓이지만, block처럼 box-model의 width, height, margin, padding 값을 모두 설정할 수 있다.
flex: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향(1차원적)으로 설정.
grid: 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해(2차원적) 설정.
none: 해당 속성은 접근성 트리에서 해당 요소가 제거된다. 이렇게 되면 해당 요소 및 해당 하위 요소가 사라지고, 스크린리더에도 읽히지 않는다.
7. CSS Box Model
- HTML 요소를 감싸는 상자
- 웹페이지 = 수많은 상자가 모여있는것
- 요소, 패딩, 테두리, 마진 으로 구성
- element : 텍스트, 사진 등 보여줄 대상 (content)
- padding : border 내부 영역
- border : 요소와 페딩을 감싸는 테두리
- margin : border 외부의 영역
- element + padding + border : 특정 태그의 영역값
- CSS box model은 Block box에 적용
- Inline box 는 박스 모델에 정의된 일부 동작만 사용
- Inline box는 width, height, 상하 margin 값이 적용되지 않는다
width
- 요소의 너비를 설정
- 기본값은 콘텐츠 영역의 너비이지만, box-sizing 속성을 사용하여 테두리 영역의 너비를 설정
- auto : 기본값, 브라우저가 계산하여 지정(요소의 자식 기준으로 가득 채우기)
height
- 요소의 높이를 설정
- auto : 기본값, 브라우저가 계산하여 지정(요소의 자식 기준으로 조절)
padding
- 단축 속성 (padding x x x x)
- padding-top | padding-right | padding-bottom | padding-left 순으로 작성
p{
padding: 10px; /* top, right, bottom, left 모두 10px */
padding: 10px 20px; /* top, bottom :10px, left, right:20px */
padding: 10px 20px 30px; /* top:10px, left,right:20px, bottom:30px */
padding: 10px 20px 30px 40px;
}margin
- 단축 속성 (margin x x x x)
- margin-top | margin-right | margin-bottom | margin-left 순으로 작성
- 가운데 배치
p{
width: 400px;
margin: auto;
}- 오른쪽 배치
p{
width: 400px;
margin: auto 0 auto auto;
}💡
margin auto는 수평 정렬을 할수 있지만, 세로 정렬을 적용할 수는 없다!
margin : 0 auto로 쓰는 이유
margin : 0 auto로 쓰는 이유
마진 병합 현상(Margin Collapsing)
- 요소와 요소의 사이에 마진 탑 혹은 마진 바텀의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
- 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상
- 자식요소의 마진이 부모 요소의 마진값에 영향을 줄 수 는 있다.
마진병합 현상 해결방법
- 부모 요소에 overflow 속성 값을 적용
- 부모 요소에 display: inline-block 값을 적용
- 부모 요소에 border 값을 적용
- 부모 요소에 display: flow-root 를 사용 (IE 지원 X)
왜 이렇게 해결이 되는가?
- Block Level Content (https://developer.mozilla.org/ko/docs/Glossary/Block-level_content)
마진 병합 현상은 왜 일어날까?
- 마진 병합 현상이 왜 발생하는지에 대한 정확한 내용은 mdn과 w3c 공식 문서에서도 나오지 않는다.
- 가장 유력한 가설 : 요소들의 수직 마진을 이용한 레이아웃을 쉽게 설정하기 위해서
border
- 테두리를 지정
- 테두리는 요소가 차지하는 전체 너비, 높이의 일부
- 단축속성 (border [width] [style] [color])
- 선의 두께, 스타일, 색상을 지정할 수 있다
border-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
border-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
border-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
box-sizing
- content-box : 기본값, width, height에 border, padding 포함하지 않음
- border-box : width, height에 border, padding 포함
- width = 콘텐츠 너비 + border + padding
overflow, overflow-x, overflow-y
- 박스보다 콘텐츠가 더 커 콘텐츠가 넘칠 경우 어떻게 처리할지를 지정
visible: 기본값. 박스를 넘는 컨텐츠를 자르지 않는다.
hidden: 요소의 크기만큼 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않는다.
scroll: 요소의 크기만큼 잘라내고, 스크롤을 제공
auto: 자동으로 콘텐츠가 넘칠 경우 스크롤바를 노출
border-radius
- 상자의 모서리를 둥글게 처리
- 모서리를 처리할때 쓰이는 원의 반지름의 길이를 의미
- 단축 속성(border-radius x x x x 형식으로 사용 가능)
- border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius @ @
opacity
- 불투명도를 설정
- 0~1사이의 숫자를 지정 (0 : 투명, 1 : 불투명)
8. 기타
- Reset CSS : 우리가 HTML로 코드를 작성하고 브라우저로 실행을 해보면 우리가 적용하지 않았는데도 자동으로 Margin이 들어간 것을 볼 수 있다
- 이는 웹 브라우저마다 default 값으로 스타일이 적용되어 있기 때문이다
- 브라우저마다 default 스타일 값이 아닌 동일한 css 스타일을 보여주기 위해 이런 default 값을 초기화 해주어야 한다.
- 컬러코드 모음 : https://www.color-hex.com/
9. 오늘의 소감 / 떠오르는 생각
CSS를 각잡고 제대로 공부해본적이 없어서 무지성 class, id를 난사했던 나 자신을 반성하게되었다…
이렇게 한번 배우고 나니 생각보다 어려운게 아니라는걸 알았고, 프론트쪽도 혼자 해볼 수 있겠다는 건방진 생각이 든다
'Dev > ESTsoft 오르미' 카테고리의 다른 글
| JavaScript1 (~조건문과 반복문) (0) | 2024.02.22 |
|---|---|
| CSS2 (Position & Flex) (0) | 2024.02.22 |
| HTML_2 (form, table) (1) | 2024.02.22 |
| HTML_1 (기본개념) (0) | 2024.02.22 |
| GIT & GITHUB (0) | 2024.02.22 |