● CSS
✔ Cascading Style Sheet (위에서 아래로)
✔ html 에 작성할 경우 <style>
✔ css 따로 만들 경우 html <link 걸기>
◾ 크기 종류
px
%
vh : viewport height (screen) ex) 100vh
text-decoration: underline;
text-transform: uppercase; 소문자 > 대문자
|(divider) 만드는 법 : width: 1px, height: 15px,
◾ * : 전부
◾ # : id 사용할 때
◾ . : class 사용할 때
◾ width : 너비(가로)
◾ height : 키(세로)
◾ display
-> inline (높이와 너비가 없음)
-> inline-block (block 으로 인식하게 해줌) : 문제점이 많아서 잘 사용안함
-> block
-> flex : 자식 엘리멘트에는 어떤 것도 적지 말아야함 (부모 엘리먼트에만 해야함)
📕 display-flex 적용해야 사용가능함
❗ ❗ ❗ 주축은 수평←→ , 교차축은 수직↑↓ ❗ ❗ ❗
◾ 1. justify-content (주축에만 적용)
-> center
-> flex-end(오른쪽) , flex-start(왼쪽)
-> space-evenly : 빈 공간을 같은 크기로 나누어서 배치
-> space-between : 양 사이드 경계
◾ 2. align-items (교차축에만 적용)
-> center
-> 부모 height 가 없을경우 바뀌지 않음 이미 중심에 있기 때문에
◾ 3. flex-direction (주축, 교차축 전환)
-> display-flex 했을 경우 디폴트는 : row(수평) , column(수직)
-> column,row reverse : 역순
◾ 4. wrapping
flex-wrap : nowrap
✳ box 속성
◾ margin
-> box 의 border(경계)의 바깥에 있는 공간
-> 그냥 margin 만 사용할경우 전체 다적용
-> margin : 20px 15px (2개 사용 상하, 좌우)
-> 시계방향
-> Collapsing margins 현상 : 경계가 같을시 위, 아래만 일어남
◾ padding
-> box 안쪽 경계
◾ border
-> box의 경계
-> border: 크기 스타일 색깔
-> 이쁘지 않아서 한가지만 씀
-> radius : 사이드 굴곡
◾ style
-> class (. {} 사용)
-> <span class="btn tomato1">안녕 나야</span> ✔ class 두개 사용할 수 있음 (btn, tomato1)
◾ Pseudo Selectors : 특수 상태 지정
1. ex) span:last-child{} , div:first-child{}, span:nth-chile(2) {}
2. ex) span:nth-chile(even) {} : 짝수 , span:nth-chile(odd) {} : 홀수
3. ex) 부모 자식 {}
4. ex) 부모 > 바로 밑 자식 {] ✔ 부모 바로 밑 자식 관계
5. ex) p + span {} ✔ p 다음에 바로오는 span 적용 (다음에 오는 형제 관계)
6. ex) p ~ span {} ✔ p 다음에 오는 span 적용 (다음에 오지 않아도 되는 형제 관계)
7. ex) input[type="password"] {}
button:active : 버튼 눌렀을 시
button:hover : 마우스를 올렸을 때
button:focus : 키보드로 선택했을 떄
* 링크 표시 제거
:visited : 방문했을 때 색 (link 에만 적용가능)
:link : 방문전 색
p:focus-within focus 상태인 자식을 가진 부모 엘리먼트에 적용
input::placeholder
p::selection 글 긁을 때 변화 주기
p::first-letter 첫번 째 글자만 변화 주기
◾ position
-> fixed : 박스 제자리 유지 (가장 위에 있다) 고정시킬 때 사용 ex. 메뉴바
position: fixed;
width: 100%;
box-sizing: border-box;
-> static : 레이아웃이 박스를 처음 위하는 곳에 두는 것
-> relative : top, right, left, bottom
-> absolute : top, right, left, bottom
-> sticky
◾ color (color picker)
-> colorZilla 다운
-> #
-> rgb( )
-> rgba( ) 투명도
컬러 저장
:root {
--main-color: #컬러
}
-> color: var(--main-color);
◾ Transition (전환)
img {
-> transition: background-color 10s ease-in-out, color 5s ease-in-out, all 5s ease-in-out
-> transition = hover 안에서 작동 x
-> hover 안에 있는 값만 가능
img:hover {
-> transform
-> linear
@keyframes
◾ Media Queries (휴대폰에서만 적용됨)
-> @media screen and (max-width :600px)
-> @media screen and (min-width :600px)
-> @media screen and (min-width :600px) and (max-width :800px)
-> @media screen and (min-width :600px) and (max-width :800px) and (orientation: landscape)
-> orientation: landscape : 가로모드
-> orientation: portrait : 세로모드
ex)
@media screen and (orientation: landscape) {
span {
display: none;
}
}
◾ box-sizing:
-> border-box
-> content