/* selector */
* {
color: green;
}
/* tag selector */
li {
color: blue;
}
/* #id selector */
#special {
color: pink;
}
/* .class selecor */
.red {
width: 100px;
height: 100px;
background: beige;
padding: 20px /* 데이터가 눌린 수 있는 범위 */
border: 2px dashed red; /* 테두리 픽셀 스타일 색 순 */
margin: 20px /* 데이터가 눌리지 않는 공백 범위 */
}
/* 마우스 포인트가 있을 시 hover */
button:hover {
color : red
background : beige
}
/* tag의 속성을 선택 할 때 [] 사용 */
a[href="naver.com"] {
color : purple;
}
/* 선택 연사자 사용 시 ^와 $연산자 사용시 ~로 시작하는 단어 ~로 끝나는 단어를
선택할 수 있다. */
/* ex) a[href^="naver"] 는 naver로 시작하는 단어
a[href$="naver"] 는 naver로 끝나는 단어를 선택 */
li#special {
color: pink;
} /*처럼 li태그를 넣어서 스페셜 클래스 중 li태그만 효과를 넣을수 있다. */
/* -------------------------------------------------------------------------------------- */
div, span {
width: 80px;
height: 80px;
margin: 8px;
}
div{
background: red;
display : inline-block
}
span {
background : Blue;
display: block;
}
/* display에서 inline은 안에 데이터 크기에 따라 크기가 변함
inline-block은 설정한 크기로 바뀜, 단 한줄에 블럭으로 표시
block은 블럭형식으로 됨 */
/* -------------------------------------------------------------------------------------- */
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red
}
.container {
background : yellow;
left: 20px;
top: 20px;
position: relative;
}
.box {
background : Blue;
left: 20px;
top: 20px;
/* position: relative; 원래 위치를 기준으로 움직이는 것
position: absolute; 객체가 담겨있는 곳을 기준으로 움직이는 것- 여기서는 container을 기준으로 이동
position: fixed; 페이지를 기준으로 움직이는 것
position: sticky; 원래 위치에 고정됨 - 스티커라고 생각하면됨
position: static 그냥 기본값 */
}
/* display에서 inline은 안에 데이터 크기에 따라 크기가 변함
inline-block은 설정한 크기로 바뀜, 단 한줄에 블럭으로 표시
block은 블럭형식으로 됨 */
/* -------------------------------------------------------------------------------------- */
container
내용에는 -display
-flex-direction
-flex-wrap
-flex-flow
-justify-content
-align-items
-align-content
container에는 main axis(메인축)와 cross axis(반대축)가 있다.
메인축을 설정하면 자동으로 메인축의 90도에 위치한 축이 반대축이 된다
item
내용에는 -order
-flex-grow
-flex-shrink
-flex
-align-self
/* -------------------------------------------------------------------------------------- */
/* container : flex 박스
item : item상자 */
/* flex 박스 */
.container {
background : beige;
height: 100vh;
/* 부모태그와 상관없이 보이는 view의 height의 100센트를 채울라면 %가 아닌 vh를 사용
%를 사용 시 부모태그의 퍼센트 만큼 채운다. container의 부모태그인 body의 부모태그인
html의 태그만큼의 퍼센트를 채움 */
display: flex;
/* 너가 flex박스야 라고 선언하는것 */
flex-direction: row;
/* flex박스의 방향 ! 기본값은 row
row(왼쪽에서 오른쪽), row-reverse(오른쪽에서 왼쪽으로)
기본축을 column(수직)으로 바꾸고 싶으면 flex-direction값을 column을 준다 */
flex-wrap: nowrap;
/* 기본값은 nowrap이고
flex박스의 아이템 값이 다 차면 다음줄로 이동하게 하고싶으면 값을 wrap을 준다 */
/* flex-flow: column nowrap; 처럼 한줄에도 가능*/
justify-content: flex-start;
/* 아이템들을 중심축에서 어떻게 배치할건지를 결정하는 부분 !
기본값은 flex-start
오른축으로 배치 : flex-end
가운데로 배치 : center;
item들에 간격을 줌 : space-around
item들에 똑같은 간격을 줌 : space-evenly
첫번째와 마지막 item은 고정하고 나머지 박스에 동일한 간격을 줌 : space-between
*/
align-items: baseline;
/* 아이템들을 반대축에서 어떻게 배치할건지를 결정하는 부분
특이사항으론 align-items: baseline을 입력하면 item안 텍스트를 기준으로 정렬
나머지는 justify-content랑 같음 */
align-content: center;
/* 아이템들을 반대축을 기준으로 간격을 줌
justify-content의 간격을 주는 것과 같음 */
}
/* item상자 */
/* display에서 inline은 안에 데이터 크기에 따라 크기가 변함
inline-block은 설정한 크기로 바뀜, 단 한줄에 블럭으로 표시
block은 블럭형식으로 됨 */
.container{
padding-top:100px;
background: beige;
height:100vh;
display:flex;
}
.item{
width: 40px;
height: 40px;
border: 1px solid black;
}
.item1 {
background: #ef9a9a;
flex-grow: 1;
/* flex-grow는 기본값은 0
1을 넣을 시 flex박스의 크기에 자신을 맞출라고 한다.
다른 item에도 1을 넣으면 동일한 크기고 flex박스에 맞춰 크기를 조절
다른 item들은 1을 넣고 하나만 2를 넣으면 다른 item박스들 보다 두배 크게 맞춰짐 */
align-self: center;
/* align-self를 통해 각 각의 item 혹은 item하나의 위치를 정할 수 있음 */
}
.item2 {
background: #ffcccb;
flex-grow: 1;
flex-shrink: 0;
/* flex-grow와 반대의미 flex박스가 줄어 들시 그 줄어듬에 맞춰 자기 자신을 줄임
기본값은 0 */
}
.item3 {
background: #ba6b6c;
flex-grow: 1;
flex-basis: auto;
/* 아이템들이 공간을 얼마나 차지해야하는지를 보다 자세히 지정하는 것
퍼센트로 나눠서 각 각의 item들을 지정할 수 있다 자주 사용 */
}
/* display에서 inline은 안에 데이터 크기에 따라 크기가 변함
inline-block은 설정한 크기로 바뀜, 단 한줄에 블럭으로 표시
block은 블럭형식으로 됨 */
I'm beginner