CSS 기초 정리 및 복습

CSS(Cascading Style Sheet)?

HTML로 구성한 웹 사이트를 다양하게 꾸며주는데 사용된다.

1.Author style (개발자가 지정한 스타일)

2.User style (유저가 설정한 스타일)

3.Browser style (브라우저에서 자체적으로 제공하는 스타일)

1부터 3까지의 우선순위 순서대로 흘러가며 설정되는 Style Sheet(스타일 정리 문서)

 

!important

해당 태그를 사용하면 모든 설정을 무시하고 important에서 지정하는 스타일로 고정할 수 있으나 되도록 지양하는 것이 좋다.

 

선택자(Slection)

Universal (모든 태그)	*
type tag (특정 태그)	tag name
Id	#id
class	.classname
state	선택자:의사클래스 (ex> ddoddi:hover)
attribute	선택자[속성 선택자] (ex> ddoddi:[title="애기 개발자"]

 

간단한 선택자 활용 예시

 

가장 기본이 되는 형태는 selector(property: value;}이다. = 선택자{속성: 값;}

여러 선택자가 한 요소에 대해 다른 값을 지정하고 있을 경우 포괄적인 값보다 구체적인 값을 우선, 먼저 설정한 값보다 나중에 설정한 값을 우선으로 적용한다.

 

 

CSS의 다양한 태그들

 

https://developer.mozilla.org/ko/docs/Web/CSS/Reference

CSS 참고서 - CSS: Cascading Style Sheets | MDN

MDN CSS Reference 항목에서 다양한 CSS 태그와 사용법을 확인할 수 있다.

W3C에서도 확인 가능하지만 MDN이 번역되어 있어서 편하다.

 

 

CSS 선택자 학습

 

https://flukeout.github.io/

CSS Diner

 

30분 정도 분량의 미니 게임으로 CSS 선택자의 기본 이해에 큰 도움이 된다.

쉽게 이해할 수 있도록 그림으로 설명하는 것 같은데 나는 오히려 그림을 보는게 헷갈리고 HTML 소스만 보고 문제를 풀었다.

 

 

레이아웃(layout)

웹 사이트를 만들 때 가장 중요한 것.

정리한 요소들을 원하는 위치에 적당한 사이즈로 배치할 수 있어야 한다.

 

display

position

display와 position

* display

inline : Box가 아닌 Item 형태로 표시되어 따로 크기를 지정할 수 없다. (span 형태로 사용하는 것이라고 생각하면 된다.)

block : 크기를 지정할 수 있으나 1줄에 1개씩만 배치할 수 있다.

Inline-block : 크기를 지정할 수 있으며 1줄에 여러개 배치 가능하다.

=> div여도 inline을 적용하면 span처럼 사용 가능하고, span이여도 display값으로 inline-block 값을 지정하면 div처럼 사용 가능하다.

* position

static : left, top, right, bottom 등 값을 지정해줘도 기본적으로 배치된 자리에서 이동하지 않는다.(default)

relative : static으로 지정된 자리에서 지정한 값만큼 이동한다.

absolute : 상위 요소의 static으로 지정된 자리에서 지정한 값만큼 이동한다.

fixed : 상위 요소의 static으로 지정된 자리에서 지정한 값만큼 밖으로 이동한다. fixed로 지정된 요소는 스크롤을 움직여도 그 자리에 계속해서 유지된다. ex) 네이버의 상단으로 이동 버튼

sticky : static으로 지정된 자리에 그대로 있으나 유저가 스크롤을 움직여 화면의 끝에 닿을 시 따라서 움직인다.(ex> 네이버의 사이드바)

=> fixed와 sticky의 차이점 : fixed는 스크롤을 얼만큼 움직이든 "항상" 고정된 자리에서 따라다닌다. sticky는 스크롤을 움직여 화면을 벗어나게 될 경우에 화면에 걸려서 같이 움직인다.

 

 

Flex box

position, float, table로 웹을 디자인 했었으나 이제는 flex box로 모든 요소를 자유롭게 배치할 수 있다.

flex box 사용 예시

* flex box의 특징

1.container와 box에 각각 속성값을 적용할 수 있다.

Container	Item
display	order
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex
justify-content	align-self
align-items
align-content

 

2. row와 column을 통해 중심축을 x, y중에 선택할 수 있다.

 

+ 위에서 사용된 height: 100vh;이란?

만약 height: 100%를 지정할 경우 부모인 body와 조상인 html에도 각각 값이 주어져있어야 viewport를 100% 채울 수 있다. heightvh(height view port)를 입력할 경우 부모의 지정된 크기와 관계 없이 사용자 디바이스의 viewport를 가득 채우라는 의미이다.

 

 

Flexbox game 

 

즐거운 ^^.. Flexbox 학습용 게임이다.

사실 선택자 게임도 하는 동안은 거의 다 알고 있었는데, 뒤돌아서니 다 잊어버렸다..

한 번 풀고 다시 정리까지 했는데..

그래도 한 번 알고 나중에 다시 외우는 건 효율이 차원이 다르니 이것도 빠르게 한 번 풀고 정리하고 넘어가야겠다.