색상 표현
-색을 사용하는 모든 속성에 적용 가능하다.
1.색상의 이름을 작성.
-브라우저에서 제공하는 색상 이름을 입력한다.
-간단한 색상 표현은 가능하지만, 명확한 특정 색상 표현은 브라우저에 따라서 달라질 수 있다.
2.Hex(Hexadecimal): 16진수 색상 코드
-#으로 시작하며, 가장 많이 사용한다.
3. RGB
=========================================
박스 모델
-html 요소의 기본적인 모양을 만드는 속성.
-요소의 너비, 높이, 내부 여백, 외부 여백 등
1. 요소의 너비와 높이 width, height
기본값: auto - 브라우저가 너비를 계산.
2.요소의 최대 너비: max-width, max-height
3.요소의 최소 너비: min-width, min-height
4.요소의 테두리 선을 지정하는 border
-두께: border-width
-종류: border-style
-색상: border-color
작성 방법: border: 두께 종류 색상;
*보더를 사용하면 요소의 크기가 커진다.
이렇게 한 모서리만 radius 적용하고 싶으면 border-radius 0 0 0 0 중에 특정 수 넣어주면 되고
전체 모서리 둥글게 하고 싶으면 border-radius 20px 이런식으로 해주면 됨
============================
여백을 지정하는 속성들
1.요소의 외부(주변)에 여백을 지정하는 margin
-margin 값을 주면, 요소와 요소 사이의 간격을 조정할 수 있다.
기본값 : 0
-마진을 주면, 요소 바깥에 공간을 만들어서 주변 요소들을 밀어내는 개념이다.
2. 요소의 내부에 여백을 지정하는 padding
기본값:0
*padding을 사용하면 요소의 크기가 커진다.
3.박스 모델의 크기 계산
box-sizing : border-box;
border-box:요소에 지정한 너비를 작성한 수치 그대로 사용하고 싶으면 border-box 값을 사용.
border-box > 요소의 내용 + padding + border를 합쳐서 계산해준다.
================================================
배경
-요소의 배경 색상을 지정하는 bgc(background color)
-색상의 적용 범위를 설정 가능: background-clip값
border-box:가장 외곽(테두리)까지 적용. 기본 값
padding-box:테두리를 제외한 padding 범위까지
content-box: 내용 부분에만 적용
배경 이미지
background-image: url("경로")
??이미지를 하나만 넣었는데, 이미지가 삽입될 요소의 크기가 이미지보다 더 크면, 반복해서 보여준다.
배경이미지 반복 제어
background-repeat
값
no-repeat: 반복없음
수평, 수직 반복:repeat
수평 반복:repeat-x
수직 반복: repeat-y
배경 화면의 위치
background-position
수평:left, center, right
수직: top, center, bottom
사용예시
background-position: 50% 50%
-->가로 방향에서 50%만큼, 세로 방향에서 50%만큼
구체적으로 위치와 수치 적용 가능
background-position:.bottom 20px right 100px
-->바닥에서 위로 20px, 오른쪽에서 왼쪽 방향으로 100px만큼.
배경 이미지의 크기 background-size
값
auto:이미지의 실제 크기
cover:배경 이미지로 요소를 모두 덮도록 이미지를 확대 또는 축소한다.
contain:요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 또는 축소한다.
===============
배경 이미지 고정
background-attachment
값
scoll: 이미지가 함께 스크롤
fixed: 이미지가 뷰 포트에 고정
한번에 작성하기
backgroud: url("") no-repeat left top fixed;
-속성과 값이 모두 다르기 때문에 입력 순서는 무관.
-단, background-size는 별도로 작성해야 한다.
==============================================
CSS배치, position
-웹 문서에서 이미지나 글자를 원하는 위치에 넣고 싶을 때 사용한다.
사용방법
1.기준을 먼저 정한다.
2.값을 사용한다. left, right, top, bottom
요소의 위치를 지정할 때, 기준을 설정한다.
값
static
요소 자기 자신 기준: relative
위치 상 부모 요소 기준: absolute
뷰 포트(화면 전체) 기준: fixed
(*relative를 사용하면 정상적인 배치에 어긋나기 때문에, relative를 사용해서 배치하는 경우는 드물다.)
absolute
-부모 요소를 기준으로 배치
-무조건 부모 요소가 아니고 내 위치 상 부모 요소를 기분으로 배치
1)위치 상 부모 요소를 먼저 인식
2)absolute로 기준을 잡고
3)방향설정
위치 설정
값
left, right, top, bottom, z-index
absolute 기준을 잡는다.
relative 위치상 부모요소 지정해줌
뷰 포트(화면전체) 기준:fixed
==============================
요소가 쌓이는 순서
-우리가 화면에서 볼 수 있는 요소 중, 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 있는지) 결정하는 것.
조건
1.요소에 position 속성과 값이 있는 경우, 더 위에 쌓인다.
2. 모든 요소에 position 속성과 값이 있는 경우, z-index 속성의 값이 더 높으면 위에 쌓인다.
3. 1번과 2번까지 조건이 같은 경우, 나중에 작성된 경우, 위에 쌓인다.
z-index
숫자:숫자가 높을수록 위에 쌓인다.
1번부터 순차적으로 사용 가능.
*유지보수를 위해서 순차적으로 사용하면 좋다.
============================================
변환
요소를 변환하는 속성, transform
항목
-원근법, 이동, 크기, 회전, 기울임
translate(); 함수는 요소를 이동시킨다
rotate(); 함수는 요소를 회전시킨다
=============================
전환
전환이란, 사각형>원형. 하나의 스타일을 완전히 다른 스타일로 바꾸는 것.
transition
속성목록
transition-property:대상을 지정. css속성과 이름 명시
transition-duration:필수 속성. 전환 효과가 일어날 시간을 명시한다. 작성하지 않으면, 문법에 어긋나며, 정상적으로 작동하지 않는다.
transition-timing-function:타이밍 함수 지정
transition-delay:대기 시간 지정
transition-property :bgc;
transition-property :width, height;
transition-duration
0s:전환 효과 없음
값
시간을 작성. 소수점 작성 가능하다. 0 생략 가능
0.5 > .5
transition-timing-function
-전환 효과의 타이밍 함수를 지정한다.
값
ease(기본값) 느리게 > 빠르게 > 느리게
linear : 일정하게
ease-in:느리게>빠르게
ease-out:빠르게>느리게
시간을 지정하는 속성 2개
transition :3s 2s linear;
앞에 작성한 시간
뒤에 작성한 시간
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>전환</title>
<style>
#timingFn {
display: flex;
}
#timingFn div {
width: 100px;
height: 80px;
background-color: lightgray;
margin: 5px 20px;
text-align: center;
font-weight: 900;
}
#timingFn:hover div {
height: 300px;
}
#timingFn .ease {
transition-duration: 3s;
transition-timing-function: ease;
transition-delay: 1s;
}
#timingFn .linear {
transition: 3s linear;
transition-delay: 1s;
}
#timingFn .ease-in {
transition: 3s ease-in;
transition-delay: 1s;
}
#timingFn .ease-out {
transition: 3s 5s ease-out
}
</style>
</head>
<body>
<div id="timingFn">
<div class="ease">ease</div>
<div class="linear">linear</div>
<div class="ease-in">ease-in</div>
<div class="ease-out">ease-out</div>
</div>
</body>
</html>
===================================
Flex
1차원 레이아웃을 만드는 Flex 정렬
조건
- 부모와 자식 요소가 필요하다.
-부모 요소: flex 지정
용어
부모 요소: 컨테이너 - 플렉스 컨테이너
자식 요소:아이템 - 플렉스 아이템
메인축(main axis)
교차축(main axis)
*메인축은 항상 수평축이 아님 xxx
1.컨테이너에 적용하는 속성
*플렉스 아이템에 작성하면 동작하지 않는다.
값
1)display:flex;
--> 부모 요소에 display :flex의 시작
2)flex-direction
-아이템들이 배치되는 주 축을 결정한다.
3)flex-wrap
-flex item의 줄 바꿈 여부를 결정한다.
값
nowrap:줄 바꿈 없음. 한 줄에 item을 끼워 넣으려고 시도하며, 밖으로 빠져 나간다.
wrap: 여러줄로 묶는다. 자리가 없으면 다음 줄로 넘어간다
wrap-reverse: 여러줄로 묶는다. 자리가 없으면 다음 줄로 넘어간다. 시작점 끝점이 바뀐다.
3)배치 방향과 줄 바꿈을 한번에 지정하는
flex-flow: row wrap;-->수평 정렬, 여러 줄 배치
4)주축 정렬 방법을 지정하는
justify-content
주축=메인축
값(예시: 주 축이 수평축일 경우)
flex-start: flex-item시작점(왼쪽)으로 정렬한다.
flex-end: flex-item을 끝 점(오른쪽)으로 정렬한다.
center: flex-item을 가운데 정렬한다.
2. flex-item에 적용하는 속성
1)order
-flex item의 순서
값
0순서없음
숫자: 숫자가 작을수록 순서가 빠르다.
2)flex-basis
item의 기본 크기를 설정한다
3)flex-grow
-아이템이 늘어날 비율을 작성한다.
예: div요소 A B C
A:flex-grow :0;
B:flex-grow :2;
C:flex-grow :1;
-->B와C가 2:1 비율로 늘어난다.
css의 미디어 쿼리
반응형 웹 디자인의 기본이 되는 미디어 쿼리
css에서 어떤 스타일을 선택적으로 적용하고 싶을떄 사용한다. 프로그래밍 언어의 if(조건문)유사한 개념.
@media(조건) {
css스타일 규칙
}
==========================================
Grid
flex는 1차원(수평 또는 수직)으로 레이아웃 배치
Grid는 두 방향(수평과 수직)레이아웃 시스템
-가로: row
-세로: column
사용 방법
-부모 컨테이너에 display grid를 작성하는 것이 시작
용어
부모 요소: 그리드 컨테이너
자식 요소: 그리드 아이템
속성
컨테이너에 적용하는 속성이 따로 있고, 아이템에 적용하는 속성이 따로 있다.
(예:grip-gap은 부모요소에만 사용가능)
헬퍼 클래스
.css --> 공통으로 적용되는 스타일 규칙들
flex는 값을 주면, div들이 수평 정렬 되었다.
grid는 아니다.
왜? 몇개의 컬럼 또는 로우를 만들지, 각각의 사이즈는 어떻게 할지 정해줘야한다.
repeat() 함수
하지만, 반응형 px고정단위
%또는 fr이라는 단위 사용
fr=fraction = 비율, 분수
grid-auto-rows:100px;
몇 줄이 나올지 모르는 상황에서 그냥 100px로 고정하겠다.
만약에, item에 작성되어 있는 콘텐츠 사이즈가 다양할 경우, minmax(최소높이, 최대 높이);
grid cell사이의 간격을 조정하는 grid gap
grid item의 배치 순서, order
-작은 숫자일 수록 먼저 배치.
A B C --> C B A
grid-area : 지정할 영역의 이름;
-grid 사용 시, 영역에 이름을 만들어서 배치할 수 있다.
-한 줄에 들어갈 영역은 ""(큰 따옴표)로 묶어 준다.
'UX UI' 카테고리의 다른 글
| 1주일_2일차: UX,UI (0) | 2023.03.09 |
|---|---|
| 1주일차: UX,UI (0) | 2023.03.08 |
| 첫날1일: UX,UI (0) | 2023.03.02 |
