웹 페이지 백그라운드
반복 이미지 넣기
background 속성
background-image: url(1.jpg); 이미지주소
background-position: top center; 이미지 위치
backgroudn-size: 가로 세로, cover , contain;
background-repeat: no-repeat; 반복(초기값은 repeat)
background-color: red;
/* background-image: url(images/tile.png);
background-repeat: repeat-x;
background-position: top; */
한줄로 적는다면 -> background: url(images/tile.png) repeat-x top;
하나의 이미지!
- 하나의 이미지가 위쪽으로 이미지가 반복되는 모습
배경 비율 맞추기.3
/* 해당 배경에 맞게 비율 조정 */
background-size: cover;
이미지가 짜부가 된다..
background-size: 100% 100%;
다중 이미지 넣기
background: url(images/tile.png) repeat-x top left,
url(images/tile.png) repeat-x bottom left;
을 넣는다면 상단 X 축 이미지, 하단 X 축 이미지를 넣을 수 있다.
linear-gradient (색 그라데이션)
1.
1.background-image: linear-gradient(to bottom, purple, green, red,blue);
2.
2.background-image: linear-gradient(45 deg, purple, green, red,blue);
이미지 스프라이트
✨ 이미지 스프라이트(Image Sprite) : 웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법!
원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들 처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수있는 효과
이 하나의 이미지를 6개로 쪼개서 부분별로 아이콘처럼 사용이 가능하다
.ui-menu a{
text-indent: -999px;
display: block;
width: 50px;
height: 50px;
background-image: url(images/sprite.png);
background-repeat: no-repeat;
}
.ui-menu .ui-profile a{
background-position: 0 -50px;
}
.ui-menu .ui-settings a{
background-position: 0 -100px;
}
.ui-menu a:hover{
background-position: -50px 0;
}
.ui-menu .ui-profile a:hover{
background-position: -50px -50px;
}
.ui-menu .ui-settings a:hover{
background-position: -50px -100px;
}
좌표계의 이동이라고 생각하면된다
Flexbox 레이아웃
부모에서 display: flex; 를 넣으면 default로 가로정렬이 된다.
추가적인 정렬 옵션은
/* 가로 정렬 방법 */
justify-content: space-evenly;
/* 정렬 옵션들 : start/end, center, space-around,
space-between, space-evenly */정렬뿐만 아니라 비율(flex), 순서(order)에 대해 조정도 가능.
.home {
flex: 1;
order: 3;
background-color: #96ceb4;
}
.search {
flex: 1;
order: 2;
background-color: #ff6f69;
/* margin-right: auto; */
}
.logout {
flex: 1;
order: 1;
background-color: skyblue;
}
추가적으로 화면 확대시 구성이 깨질수 있다!
그럴댄 부모에 작성하면
/* 플렉스 wrap 만약 화면크기가 넘어가게된다면 다음 줄로 넘어가게 만들기 */
flex-wrap: wrap;
align-items는 Y축담당, justify-content X축
- justify-content : Flex요소들의 가로선 정렬 (start,end,center,space-between,space-around,space-evenly)
- align-items : Flex요소들의 세로선 정렬(start, end, center, baeline, stretch)
- flex-direction: 정렬할 방향을 지정(row, column, row-reverse, column-reverse)
- align-self: 지정된 align-items 값을 무시, flex요소를 세로선 정렬
- flex-wrap : flex요소 줄정렬(nowrap, wrap, wrap-reverse)
- flex-flow = flex-direction + flex-wrap
- align-content : 세로선 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절..
- text-align : 텍스트 위치 조정..
세부적인 설정
/* 플렉스 %비율을 줄때 */
flex-basis: 30%;
/* nth-child(번호) 해당 아이템에 대한 색깔 */
.call-out:nth-child(1) {
background-color: #c0dbe2;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
}
.call-out:nth-child(3) {
background-color: #ccb9da;
}
반응형 view point
/* 미디어쿼리 : 반응형 웹사이트를 만들때 사용하며, viewport 필요... */
@media (min-width: 900px) {
.call-outs-container {
/* 화면 사이즈 900 이상만 flex가 적용되도록 */
/* 컨테이너에서 flex와 가로정렬을 제거하고 여기에 적용한다 */
display: flex;
justify-content: space-between;
}
}화면 사이즈에 따라 적용on/ off가능.( 900px 넘어 갈때만 적용됨)
