CSS 정리하기

이 포스팅은 생활코딩 및 드림코딩의 유튜브강의를 기반으로 작성했습니다.

CSS란

Cascading Style Sheets (계단식 스타일 시트) 라고 함

HTML과 CSS가 만나는 법

1. style 태그 사용
2. style 속성 사용
3. .css 작성 후 link 태그로 연결

<!DOCTYPE html>
<html>

<head> 
	<link rel="stylesheet" href="style.css">
    <style> h1 {
    	color:red; 
        } 
	</style>
</head>
<body>
<h1 style="color:red;">CSS</h1>
</body>

</html>

**선택자 (* 매우 중요)**

선택자(Selector)와 선언(Declaration)

CSS 기본 문법 (https://poiemaweb.com/css3-selector)

선택자의 종류

1) 태그 선택자 (tag)

h1 {
	color : powderblue;
} 
...html
<h1>CSS</h1>

2) 클래스 선택자 (.class)

.class_selector {
	color : red;
}
...html
<h1 class="class_selector">CSS</h1>

3) 아이디 선택자 (#id)

#id_selector{
	color : red;
}
...html 
<h1 id="id_selector">CSS</h1>

범위: 태그 > 클래스 > 아이디 > 태그에 style속성 사용
우선순위 : style속성 -> 아이디 -> 클래스 -> 태그
- 같은 레벨의 선택자라면 나중에 선언된 css가 우선순위가 높음
- 아이디 선택자는 단 한번 사용됨

부모 자식 선택자

ul li {
	color : red; 
}
ul>li {
	border : 1px solid gray;
}
ul, ol {
	background-color : powderblue;
}
ul.important {
	text-decoration : none;
}

A B : A 밑에 B 전부
A>B : A 바로 밑에 B만
A, B : A와 B
A.B : A중에 B class만

가상 클래스 선택자 (pseudo class selector)

클래스 선택자는 아니지만 클래스 선택자 처럼 여러 엘리먼트를 선택하는 선택자

a:link {
	color : blue;
}
a:visited {
	color : red;
}
a:hover {
	color : yellow;
}
a:active {
	color : green;
}
input:focus {
	background-color: gray;
}

:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스 호버했을 때
:active - 마우스 클릭했을 때
:focus - 입력창 or 탭키를 눌렀을 때

cf) visited의 경우 보안상의 이유로 몇가지의 속성만 변경이 가능하다고 함 (color, background-color ...)
cf) CSS3부터는 :after보다는 ::after로 도입

여러가지 선택자 공부

게임 형식으로 선택자를 공부해볼 수 있음

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

* :모두

A * : A 내부 모두

A + B : A태그 바로 뒤따라오는 B를, 같은 레벨 (인접 형제)

A ~ B : A태그 뒤따라오는 B를, 같은 레벨 (일반 형제)

A:first-child : A중에 첫번째 자식일 때

A:last-child : A중에 마지막 자식일 때

A:only-child : 어느 엘리먼트 안에 있는 A중에 자신이 유일한 자식일 때

A:nth-child(B) : A중에 B번째 자식일 때

A:nth-last-child(B) : A중에 뒤에서 B번째 자식일 때

A:first-of-type : 어느 엘리먼트 안에 있는 A중에 첫번째 등장하는 A만

A:nth-of-type(B) : A중에 B번째 (B는 숫자거나 even, odd 일 수 있음, 또한 Xn+Y 꼴로 사용할 수 있음)

A:only-of-type : 어느 엘리먼트 안에 있는 A중에 자신이 유일한 타입일 때

A:last-of-type : A중에 마지막 타입일 때

A:empty :A가 내부에 아무것도 가지지 않았을 때

A:not(B) : A중에 B가 아닌 것

A[B] : A중에 B속성을 가질 때

A[B="value"] : A중에 B속성의 값이 value일 때

A[B^="value"] : A중에 B속성의 값이 value로 시작할 때

A[B$="value"] : A중에 B속성의 값이 value로 끝 날때 (확장자)

A[B*="value"] : A중에 B속성의 값이 value을 포함할 때 (에스크립터)

속성을 공부하는 방법

- 빈도수 기반으로 학습하는 게 좋음 (엄청 많기 때문)
- 혹은 기본적인 것들을 알아놓고 필요할 때 찾기

타이포그래피 (서체, typography)

font-size

글꼴의 크기 지정
단위(px, em, rem)가 중요함
- px : 픽셀, 고정된 폰트크기를 지정
- em : 부모 태그의 영향을 받는 상대 크기
- rem : html태그에 적용된 font-size의 상대크기, 이해하기 쉬움, 바람직함, 브라우저(사용자)의 폰트크기에 맞출 수 있음
*특별한 경우를 제외하고 rem 사용하면 됨 (1rem == html태그에 적용된 font-size)
-> 브라우저의 Font size를 변경할 때 px은 변경되지 않으나 rem은 맞춰서 변경됨

#px {
	font-size : 16px;
}
#rem {
	font-size : 1rem;
} 
/* 브라우저 폰트사이즈의 기본값 16px */
/* 브라우저 폰트사이즈가 html태그 폰트사이즈를 설정*/
/* 만약 브라우저 폰트사이즈가 커지면 html태그의 커지고 자동으로 rem은 비율에 맞춰서 커짐 */

color

글의 컬러를 지정
value가 다양함 (color name, hex, rgb, hsla)

#color_name {
	color: red;
}
#hex {
	color: #FF0000;
}
#rgb {
	color: rgb(255, 0, 0);
}
#hsla {
	color: hsla(0, 100%, 50%);
} /* 모두 빨간색 */

cf) hsla (hue(색), saturation(채도), lightness(명도))

hue : 0(red), 120(green), 240(blue)

saturation : 0% shade of gray, 100% full color

lightness : 0% black, 50% neither white or dark, 100% white

text-align

텍스트 정렬
값으로 left, right, center, justify
- justify : 텍스트가 많을 때, 단에 맞춰서 정렬해줌

p {
	text-align : justify;
}

- justify 예시

font

font-family : 서체지정, 맨 앞이 우선순위가 높음(마지막 폰트는 포괄적인 폰트로 지정)
-> serif(장식), sans-serif(장식X), cursive(흘림), fantasy, monospace(고정폭)
-> 띄어 쓰기가 있으면 ""로 묶음
font-weight : 두께지정, 대체로 bold
line-height : 자신 행과 행사이의 간격지정, 기본값은 normal
font : 폰트와 관련된 여러 속성을 축약형으로 표현
-> font : font-style font-variant font-weight font-size/line-height font-family...
-> 이 중 font-size와 font-family는 필수

p {
	font-family : "Times New Roman", Times, serif;
} 
p { 
	font-weight : bold;
} 
p { 
	line-height : 1.3;
} 
p { 
	font: bold 1.2rem/1.3 arial, sans-serif
}

웹폰트 사용하기

구글 웹 폰트 사용 fonts.google.com
- 영어는 가벼우나 한국어는 엄청 용량이 큼

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

cf) 마음에 드는 폰트를 고르고 Select this style을 눌러야 해당 폰트가 장바구니처럼 넣어짐
cf) 참고로 link태그 이후에 href가 만날 때 해당 경로로 가서 다운받음, rel가 stylesheet이면 다운받은 것을 기반으로 css적용
cf) 없는 웹 폰트는 font face generator로 파일로 있는 폰트를 웹폰트로 만들 수 있음

조화 (여러 효과가 엘리먼트를 두고 대치할 때의 규칙)

상속

어떠한 엘리먼트에 효과를 주면 하위의 엘리먼트가 영향을 받는 것 -> 잘쓰면 생산적
근데 중요한 것은 규칙이 있음

body {
	color : red;
    border : 1px solid red; 
}

위의 예제에서 color는 모두 빨간색이 되지만, border는 body에만 생김
-> 즉, 상속에 유리한 속성은 상속하고, 상속에 유리하지 않은 속성은 상속하지 않음
-> 이러한 것은 해보면서 하는게 좋거나 아래 참고 사이트 (css inherit table)
-> 상속을 받고싶으면 border: inherit 처럼 사용하면 됨 (단, 조상이 아닌 부모의 속성을 상속받는 것임에 주의)

Full property table

www.w3.org

stylish 플러그인

웹 사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능, 자신의 취향을 반영
다른 사람이 만든 디자인을 적용해서 간편하게 사이트의 디자인을 변경할 수도 있음
크롬 웹 스토어 -> Stylish -> Chrome에 추가 -> Create New Style -> offonoff토글하기

Stylish - Custom themes for any website

Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

chrome.google.com

/*일시정지시 추천영상 없애기*/
.ytp-pause-overlay{display: none;}

/*하단 그림자(재생바 아래 그림자) 없애기*/
.ytp-gradient-bottom{display: none;}

/*재생시 상단 타이틀, 그림자 바로 없어지게*/
.playing-mode .ytp-chrome-top, .playing-mode .ytp-gradient-top{display: none;}

/*자막켰을 때 항상 보이도록*/
.caption-window{display: block !important;}

Cascading (폭포, 계단)

가장 중요한 기능 및 CSS의 철학
- 웹브라우저, 사용자, 생산자 사이의 조화를 중요한 철학으로 삼음
- 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려 할 때 어떤식으로 조화를 이루기 위함
-> 그러기 위해서는 "우선순위(질서)"가 중요함
1. style attribute
2. id selector
3. class selector
4. tag selector
-> 우선순위가 같은 선택자라면 뒤에 선언된 것이 우선순위가 높음

<style> 
	h1 { 
    	color : blue; 
	}
    .class {
    	color : green;
	}
    #id { 
    	color : yellow;
	}
</style>
<h1 class="class" id="id" style="color:red;">Cascading</h1>

이러한 우선순위를 무시하는 키워드가 존재
-> !import 키워드

<style>
h1 { 
	color : blue !important;
}
.class { 
	color : green;
} 
#id { 
	color : yellow;
}
</style>
<h1 class="class" id="id" style="color:red;">Cascading</h1>

- Author Style -> User Style -> Browser
- style속성 -> #id -> .class -> tag
- 이러한 연결고리를 끊는 것은 "!important" (가능하면 쓰지 말기)

**===== 레이아웃 (*매우중요) =====**

block VS inline

HTML의 엘리먼트들은 크게 두가지로 구분
block : 화면 전체를 사용하는 엘리먼트
inline : 화면 일부를 사용하는 엘리먼트
display 속성과 많이 이용될 것

selector {
	display: inline;
    display: block;
    display: inline-block;
    ... 
}

display
- block : width, height 받음, 전후 줄바꿈(한 줄에 하나)
- inline : width, height 무시 (only content)
- inline-block : width, height 받음, 전후 줄바꿈하지 않음

box model

border가 매우 중요 -> 박스모델의 기준점
박스 모델링 할 때 힘들면 border 두고 설정하는 것도 나쁘지 않을 듯

block 엘리먼트는 width, height 값이 잘 먹지만
inline 엘리먼트는 width, height 값이 먹지 않음 (margin, padding은 잘 먹음)
-> 그래서 사용하는 방법이 inline-block임

<style>
	a { 
    	border: 1px solid red;
		height : 40px;
        width : 150px; 
	}
    #sel { 
    	display: inline-block;
	}
</style>
<a href="#">Hello</a>
<a href="#" id="sel">Hello</a>

box-sizing

엘리먼트의 width와 height를 지정할 때 border나 padding이 있는 경우 원하는 만큼 적용이 되지 않을 때가 있음
-> 왜냐하면 width/height는 Content 박스의 크기를 지정하는 것이기 때문 (box-sizing : content-box; 가 기본값)
-> border 경계선까지의 크기를 지정하고 싶을 때 사용하는 것이 box-sizing: border-box임
box-sizing : border-box;
box-sizing : content-box;

<style>
	div {
    	margin : 10px;
        padding : 10px;
        width : 300px; 
	}
    #first { 
    	border : 1px solid red;
	}
    #second { 
		border : 20px solid red;
	}
</style>
<div id="first">Hello</div>
<div id="second">Hello</div>

-> 같은 width를 주고 실행한 결과, box-sizing을 모른다면 생각하는 결과가 안나올 수 있음
-> 물론 box-sizing을 알면 이럴 일 없음

-> box-sizing:border-box를 주고 실행한 결과 (cf. box-sizing:content-box가 기본값임에 명심)

<style>
	div { 
    	margin : 10px;
		padding : 10px;
		width : 300px;
		box-sizing : border-box;
	}
    #first { 
    	border : 1px solid red;
	}
    #second { 
    	border : 20px solid red;
	}
</style>
<div id="first">Hello</div>
<div id="second">Hello</div>

마진겹침

일단 알아두기, "왜 이렇게 되지?"의 경우에 마진겹침인가를 알면 될 것
-> margin 겹침이 없으면?
-> li같은 경우, margin겹침이 없다면 더욱 복잡할 것

내가 세우는 규칙
1. 위아래(형제) 엘리먼트 중에 margin값이 큰 값을 취함
2. 부모자식 관계중에
- 부모 엘리먼트의 시각적인 요소가 있다면 마진겹침은 일어나지 않음
- 부모 엘리먼트의 시각적인 요소가 없다면 마진겹침은 부모자식 중 margin 값이 큰 값을 취함
3. 어떤 엘리먼트에 시각적인 요소가 없고 margin-top, margin-bottom이 서로 다르면 (cf. top-bottom / left&right 치환해서 봐도 됨)
- 엘리먼트 혼자서 마진이 겹친다고 생각하면 됨
- 이 엘리먼트 혼자서 마진겹침은 top과 bottom중 margin 값이 큰 값을 취함
- 엘리먼트가 시각적인 요소가 있다면 상관없음

포지션 (static, relative, absolute, fixed)

각각의 엘리먼트의 위치를 지정하는 4가지 방법을 꼭 알아놔야 함
엘리먼트의 position 기본 값은 static

position: static
- left/right/top/bottom의 값을 무시함
position: relative
- left/right/top/bottom을 원래 있던 위치(부모아래)를 기준으로 움직임
position: absolute
- left/right/top/bottom을 html태그 기준으로 (X)
-> 정확히는 "가까운 조상 중에 position:static 이 아닌 조상을 기준으로" (모두 없으면 그때, html임)
- absolute를 하고, offset을 설정하지 않았다면 부모 밑에 그대로 있음
-> 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문
- absolute로 설정하게 되면 부모와의 링크가 끊김
-> 크기도 content크기로 바뀜 (따로 설정하면 됨)
position: fixed
- left/right/top/bottom을 화면 기준 (스크롤에 독립적)
- absolute와 마찬가지로 부모와의 링크가 끊김
-> 크기도 content크기로 바뀜 (따로 설정하면 됨)
position : sticky
- 원래 상태 그대로 있다가 스크롤로 인해 자신이 안보일 때 보이게 고정됨

cf) 우선순위 : left > right , top > bottom

flex

- 연습 (https://flexboxfroggy.com/)
- 가이드 (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
1. container에 사용되는 속성과 item에 사용되는 속성이 따로 있음에 유의
2. 중심축과 반대축을 항시 기억
- main axis, cross axis
- items이 가로로 정렬되어 있으면 가로축이 중심축임

container에 적용이 가능한 속성

.container { 
	display :
		flex : block
		inline-flex : inline-block
	flex-direction : 중심축의 방향 지정 
		row
		column
		row-reverse
		column-reverse
	flex-wrap : items꽉 차면 줄바꿈 여부
		nowrap
		wrap
		wrap-reverse
	flex-flow : 위의 두가지를 한번에 사용 
		ex) column nowrap 
	justify-content : 중심축을 기준으로 아이템을 두는 법
		flex-start
		flex-end
		center
		space-around(맨 처음과 맨 끝 공백이 작음)
		space-evenly(공백을 고르게)
		space-between(맨 처음과 끝을 붙이고 공백)
	align-content : 반대축을 기준으로 아이템라인을 두는 법
		justify-content와 동일
	align-items : 반대축을 기준으로 아이템을 두는 법 
		justify-content와 동일
		baseline 
}

item에 적용이 가능한 속성

.itemN {
	order : 순서 0(기본값), 잘 사용하지 않음 
	flex-grow : 아이템들 중에 커질 때의 비율, 0(기본 값)
	flex-shrink : 아이템들 중에 작아질 때의 비율, 0(기본 값)
	flex-basis : 아이템의 차지 비율 auto(기본 값, grow 혹은 shrink의 값에 기준), N%로 사용
	align-self : 아이템 하나만 위치 변경이 필요할 때 사용 (center)
}

cf) float은 텍스트와 이미지사이에서 사용하는 용도이지 레이아웃을 위한 것은 아니였음
cf) height : 100%는 부모의 높이 100%를 채움
cf) height : 100vh는 view height에서 모두 사용하겠다는 뜻

반응형 웹디자인

- flex grid나 flex box, %, vw, vh
- mediaQueries을 이용하면 충분히 반응형 웹디자인을 할 수 있음
- 기본적인 추정 사이즈
-> 모바일 320 ~ 480
-> 태블릿 768 ~ 1024
-> 데스크탑 1024 ~

@media screen and (min-width: 800px){
	.container { 
		width: 50%;
	}
}

- min-width나 max-width만 가지고도 충분히 반응형으로 디자인 가능
- @media 다음에는 screen, speech, print, all 정도, 그 다음 and not only , 사용 가능
- 자세한 내용은 당연히 MDN

반응형 유닛에 대해서

절대적인 유닛 : px

상대적인 유닛 : %, viewport, em, rem

cf) em은 상속받은 부모의 폰트사이즈크기에 상대적

cf) em을 폰트사이즈가 아닌 다른 곳에서 사용한 경우 자신의 폰트 크기 기준 (padding)

부모 VS 브라우저

- 부모에 따라서 사용하는 경우: %, em

- 브라우저에 따라 사용하는 경우: viewport, rem

cf) 부모 요소에 맞는 "좋아요" 버튼 크기 -> 부모요소에 유동적 -> em

박스요소 VS 폰트

- 박스에 관련된 경우: %, viewport

- 폰트와 관련된 경우: em, rem

cf) 꼭 폰트크기 뿐만이 아님

cf) 폰트에 맞는 패딩을 주고 싶다? -> em, rem

엘리가 주는 팁

- 직관적인 폰트사이즈 크기를 위해서는 em보다는 rem을 권장

- padding도 폰트사이즈에 맞게 변경이 되어야 한다면 em권장

- 요소사이에서 상관없이 padding을 주고 싶으면 rem권장 (h1와 p의 패딩 간격 일치(정렬) 시키기)

- pixel to em 을 해주는 사이트가 있음

- 미디어쿼리에서도 rem을 사용하면 좋음 (768px -> 48rem)

저작자표시 동일조건

'WEB 공부 > HTML & CSS' 카테고리의 다른 글

HTML 정리하기 (0)	2021.01.02

말봉코드_heryu

CSS 정리하기

CSS란

HTML과 CSS가 만나는 법

**선택자 (* 매우 중요)**

선택자(Selector)와 선언(Declaration)

선택자의 종류

부모 자식 선택자

가상 클래스 선택자 (pseudo class selector)

여러가지 선택자 공부

속성을 공부하는 방법

타이포그래피 (서체, typography)

font-size

color

text-align

font

웹폰트 사용하기

조화 (여러 효과가 엘리먼트를 두고 대치할 때의 규칙)

상속

stylish 플러그인

Cascading (폭포, 계단)

**===== 레이아웃 (*매우중요) =====**

block VS inline

box model

box-sizing

마진겹침

포지션 (static, relative, absolute, fixed)

flex

반응형 웹디자인

- min-width나 max-width만 가지고도 충분히 반응형으로 디자인 가능
- @media 다음에는 screen, speech, print, all 정도, 그 다음 and not only , 사용 가능
- 자세한 내용은 당연히 MDN

반응형 유닛에 대해서

'WEB 공부 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

CSS 정리하기

CSS란

HTML과 CSS가 만나는 법

선택자 (* 매우 중요)

선택자(Selector)와 선언(Declaration)

선택자의 종류

부모 자식 선택자

가상 클래스 선택자 (pseudo class selector)

여러가지 선택자 공부

속성을 공부하는 방법

타이포그래피 (서체, typography)

font-size

color

text-align

font

웹폰트 사용하기

조화 (여러 효과가 엘리먼트를 두고 대치할 때의 규칙)

상속

stylish 플러그인

Cascading (폭포, 계단)

===== 레이아웃 (*매우중요) =====

block VS inline

box model

box-sizing

마진겹침

포지션 (static, relative, absolute, fixed)

flex

반응형 웹디자인

- min-width나 max-width만 가지고도 충분히 반응형으로 디자인 가능- @media 다음에는 screen, speech, print, all 정도, 그 다음 and not only , 사용 가능- 자세한 내용은 당연히 MDN반응형 유닛에 대해서

'WEB 공부 > HTML & CSS' 카테고리의 다른 글

'WEB 공부/HTML & CSS' Related Articles

티스토리툴바

**선택자 (* 매우 중요)**

**===== 레이아웃 (*매우중요) =====**

- min-width나 max-width만 가지고도 충분히 반응형으로 디자인 가능
- @media 다음에는 screen, speech, print, all 정도, 그 다음 and not only , 사용 가능
- 자세한 내용은 당연히 MDN

반응형 유닛에 대해서