<meta name = "viewport" content = "width=device-width, initial-scale=1.0"'너비'를 기기의 너비에 맞추고
배율을 그 '너비'에 맞춘다
| 단위 | 설명 |
| vw | 뷰포트 너비의 100분의 1 |
| vh | 뷰포트 높이의 100분의 1 |
| vmin | 뷰포트 너비와 높이 중 작은 쪽의 100분의 1 |
| vmax | 뷰포트 너비와 높이 중 큰 쪽의 100분의 1 |
| CSS animation (0) | 2023.09.15 |
|---|---|
| transform 속성 (0) | 2023.09.15 |
| css 용어설명 1탄 (1) | 2023.09.15 |
| 오즈의 코딩야학 1일차 (0) | 2023.09.12 |
| 접미사 | 의미 |
| -name | 적용할 키프레임 이름 |
| -duration | 애니메이션 지속시간 |
| -delay | 애니메이션 시작 전 시간 |
| -timing-function | 속도 그래프 |
| -direction | 동작 진행 방향 |
| -iteration-count | 반복횟수 |
| -fill-mode | 전후 상태 설정 |
| -play-state | 애니메이션 적용 여부 |
| 뷰포트 설정하기 with<meta> (0) | 2023.09.15 |
|---|---|
| transform 속성 (0) | 2023.09.15 |
| css 용어설명 1탄 (1) | 2023.09.15 |
| 오즈의 코딩야학 1일차 (0) | 2023.09.12 |
| 함수 | 설명 |
| translate(x,y) | 지정한 크기만큼 x, y축 방향으로 이동 |
| scale(x,y) | 지정한 크기만큼 x,y축으로 확대 및 축소 |
| skew(x,y) | 지정한 각도만큼 x,y축으로 비틀어 왜곡 |
| rotate(deg) | 지정한 각도만큼 회전 |
| 접미사 | 설명 |
| -property | 변화 대상 속성을 지정 |
| -duration | 변화가 실행될 시간을 지정 |
| -delay | 변화 시작 전 지연시간 지정 |
| -timing-function | 변화 실행 시 실행 곡선 방식 지정 |
| 함수 | 설명 |
| ease | 기본값으로, 점점 속도가 빨라지다가 끝날 때 다시 느려지는 방식 |
| linear | 처음부터 끝까지 같은 속도로 진행 |
| ease-in | 느리게 시작했다가 점점 빨라진다. |
| ease-out | 빠르게 시작했다가 점점 느려진다. |
| 뷰포트 설정하기 with<meta> (0) | 2023.09.15 |
|---|---|
| CSS animation (0) | 2023.09.15 |
| css 용어설명 1탄 (1) | 2023.09.15 |
| 오즈의 코딩야학 1일차 (0) | 2023.09.12 |
항상 헷갈리는 css 용어 정리
박스모델
| 영역 | 설명 | 관련 속성 |
| 콘텐츠 영역 | 요소 내에 포함된 콘텐츠를 표시하는 영역 | width, heigth |
| 안쪽 여백 | 테두리 안에서 콘텐츠 주변을 감싸는 여백 | padding |
| 경계선(테두리) | 콘텐츠와 안쪽 여백을 둘러싸는 테두리 | border |
| 바깥쪽 여백 | 테두리 바깥에서 요소를 감싸는 여백 | margin |
테두리 스타일
| 속성명 | 용도 |
| border-width | 테두리의 두께를 지정 |
| border-style | 점선, 실선, 겹선 등으로 테두리의 모양을 지정 |
| border-color | 테두리의 색상을 지정 |
| border | 테두리의 두께, 모양, 색상 등을 한번에 지정 |
여백
| 개수 | 설명 | 예 |
| 1 | 여백의 모든 면에 동일한 값을 지정 | margins : 10px; |
| 2 | 위,오른쪽순서대로 각각을 따로 지정 | margins : 10px 10px; |
| 3 | 위,오른쪽,아래순서대로 각각을 따로 지정 | margins : 10px 10px 10px; |
| 4 | 위,오른쪽,아래,왼쪽 순서대로 각각을 따로 지정 | margins : 10px 10px 10px 10px; |
background
| 접미사 | 설명 | 속성값 유형 |
| -color | 요소의 배경 색상 지정 | 색상 |
| -clip | 요소 내 배경의 적용 범위 | 별도의 키워드 |
| -image | 요소의 배경 이미지 지정 | 이미지 url |
| -origin | 요소 내 배경의 시작 위치 | 별도의 키워드 |
| -size | 배경 이미지의 크기 | 수치와 단위 |
| -position | 배경 이미지의 위치 | 수치와 단위 |
| -repeat | 배경 이미지의 반복 패턴 | 별도의 키워드 |
| 뷰포트 설정하기 with<meta> (0) | 2023.09.15 |
|---|---|
| CSS animation (0) | 2023.09.15 |
| transform 속성 (0) | 2023.09.15 |
| 오즈의 코딩야학 1일차 (0) | 2023.09.12 |
매우 간단한 시스템!
첫날부터 코딩야학이 진행되는동안 들을 10일치 강의를 전부 받았다!
하루강의를 모두 듣고 과제를 제출하면 끝!
특이하게 상태관리툴이 아니라 구글드라이브에 코드를 복붙해서 그냥 올리면 됐다.
처음에 신청했을땐 꾸준히 참석해서 과제만 제때 제출하면 강의비 49,000을 돌려준다고 해서 기간도 짧고 뭐가됐던 바쁘게 살고싶어서 신청했었다.(무슨강의인지도 모르고)
OT를 하고나니 css와 html만 배우는곳!
어차피 약한 부분이니 잘됐지뭐!
스파르타 내일배움캠프 시작일까지 아직 여유가 있으니 기초나 탄탄히 하고 가야지!
=>자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
=>자기에게 필요한 만큼의 공간만 차지한다.
<mark>형광펜 효과</mark>
<strong>스트롱 텍스트 요소</strong>
<em>이텔릭체 효과</em>
<q>"인용구 효과"</q>
<s>취소선 효과</s>
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 요소
콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 사용
-<div></div> : 블록레벨 컨테이너
-<span></span> : 인라인 컨테이너
div 태그가 다른 요소를 묶어서 관리하기 위한 태그라는건 알고있었는데 그걸 컨테이너라고하는건 까먹고있었다.
요즈 flutter에서 자꾸 강사님이 "컨테이너로 묶으세요","칠드런으로 묶으세요" 하셔서 뭔소린가 했는데 그냥 내가 기본이 부족한거였다;;
그래서 내가 만든 결과물!
참고로 사진은 내가 좋아하는 하이큐!의 히나타
깃허브 프로필사진입니당
| 뷰포트 설정하기 with<meta> (0) | 2023.09.15 |
|---|---|
| CSS animation (0) | 2023.09.15 |
| transform 속성 (0) | 2023.09.15 |
| css 용어설명 1탄 (1) | 2023.09.15 |