출처 : 드림코딩

CSS(Cascading Style Sheet)

Cascading Style Sheet : 세부적인 정의가 있다면 스타일 적용을 하고 정의되어있는 게 없다면 다음 기본으로 지정된 스타일을 적용한다.

Style 종류

• Author Style : 우리가 작성하는 style sheet
• User Style : 사용자가 지정한 style sheet. 사용자의 취향에 맞게 browser가 style을 바꿀 수 있다.
• Browser : Browser 내에서 기본적으로 지정된 style sheet.

Author Style> User Style> Browser 순으로 스타일 우선순위가 적용된다.

!important: 위의 연결고리를 무시하고 이 코드가 적용된 스타일을 가장 중요한 정의로 한다. (쓰지 않는 것이 좋음)

Selector

• *=모든 태그들을 고르는 것
• tag= 특정 tag
• #id= ID
• .class= Class
• : = state
• []= attribute

기본 문법 : selector{property : value;}

ex)

*{color: green;}

div{
width: 100px;
height: 100px;
background: yellow;}

div자체는 비어있지만 width, height를 줌으로써 꾸밀 수
있음!

button:hover{
	color:red;
    	background: beige;}

button:hover 띄어쓰기 하지 않음!
hover : 커서가 요소 위에 올라가 있으면 선택된다.

a[href^="naver"]{
	color:purple;}
a[href$=".com"]{
	color:black;}

a[href^="naver"] : naver로 시작하는 a tag
a[href$=".com"] : .com로 끝나는 a tag

li #special{
	color: pink;}

li 내의 태그들 중 id가 special인 태그들을 선택한다.

padding : contents 안에 들어가는 공간
margin : contents 밖에 들어가는 공간.

<padding 문법>
padding (padding-top) (padding-right) (padding-bottom) (padding-left)
padding (padding-top,bottom)(padding-right,left)

div{padding 20px 20px 20px 20px};

span{padding 20px 0px};

참고) MDN css reference 에서 css 정보들 확인 가능!

layout

display

display : inline => 문자 자체만 꾸며준다. 문자 자체의 공간만 차지한다. 한줄에 여러 item 들어갈 수 있다.
display : block => item 하나가 한줄 전체를 차지한다.
display : inline-block => 한줄에 item 전부 들어가지만, 지정한 style대로 표기가 가능하다.

position

position 의 기본값 : static

▪️ position : relative

원래있던 자리에서 상대적으로 효과가 적용된다.
ex)

.container{
	left:20px;
    top:20px;
    position:relative;}

원래있던 자리로부터 상대적으로 위치가 변경이 된다.

▪️ position : absolute

내 item과 가장 가까운 item 안에서 효과가 적용된다.

.container{
	left:20px;
    top:20px;
    position:absolute;}

가장 가까이 있는 박스 내에서 위치가 변경이 된다.

▪️ position : fixed

container에서 완전에 벗어나 page상에서 효과가 적용이 된다.

.container{
	left:20px;
    top:20px;
    position:fixed;}

▪️ position : sticky

원래 있던 자리를 고정한다. scrolling을 해도 위치가 고정이 된다.

.container{
    position:sticky;}

참고)

• MDN/ Can I Use 이용하기 => 각각의 browser에 해당 기능 이용할 수 있는지 확인하기
• PostCSS => css framework