본문 바로가기

프론트엔드/CSS24

특정 영역의 문자를 ... 으로 표현하는 방법 The brown fox jumps over the lazy dog div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 확인 필터 처리 방법 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } div::after { content: ""; position: abso.. 2021. 9. 16.
오버워치 영웅 선택 화면 실습 출처: GitHub - ParkYoungWoong/overwatch-hero-selector-vanilla ParkYoungWoong/overwatch-hero-selector-vanilla Contribute to ParkYoungWoong/overwatch-hero-selector-vanilla development by creating an account on GitHub. github.com css 초기화: www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network an.. 2021. 4. 29.
CSS 변환 효과 (요소의 변환 효과) transform: 변환함수1 변환함수2 변환함수3 .... ; transform: 원근법 이동 크기 회전 기울임; 2D 변환 함수 translate(x,y): 이동(x축, y축) translateX(x): 이동(x축) translateY(y): 이동(y축) scale(x,y): 크기(x축, y축) scaleX(x): 크기(x축) scaleY(y): 크기(y축) rotate(degree): 회전(각도) ex) 45deg skew(x,y): 기울임(x축, y축) skewX(x): 기울임(x축) skewY(y): 기울임(y축) matrix(n,n,n,n,n,n): 2차원 변환 효과 AB body { padding: 100px; } div { width: 100px; height: 100px; backgrou.. 2021. 4. 28.
전환 효과 transition: 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition-property: 속성명 transition-duration: 지속시간 (단축형으로 작성할 때 필수 포함 속성) transition-timing-function: 타이밍함수 transition-delay: 대기시간 transition-property: 전환 효과를 사용할 속성 이름을 지정 all: 모든 속성에 적용 (기본값) 속성이름: 전환 효과를 사용할 속성 이름 명시 div { width: 100px; height: 100px; background-color: orange; transition: width .5s, background-color 2s; } transition-timing-function: 전환.. 2021. 4. 28.
요소의 정렬(플렉스) display: Flex Container의 화면 출력(보여짐) 특성(block, inline) flex: 블록 요소와 같이 Flex Container 정의 inline-flex: 인라인 요소와 같이 Flex Container 정의 flex-direction: 주 축을 설정 row: 행 축 (좌 => 우) row-reverse: 행 축 (우 => 좌) column: 열 축(위 => 아래) column-reverse: 열 축(아래 => 위) flex-wrap: Flex Items 묶음 (줄 바꿈) 여부 nowrap: 묶음(줄 바꿈)없음 (기본값) wrap: 여러 줄로 묶음 wrap-reverse: wrap의 반대 방향으로 묶음 1 2 3 4 5 .container { width: 300px; backgro.. 2021. 4. 26.
요소의 배치 position: 요소의 위치 지정 기준 (기준 -> 위치) static: 기준 없음(기본값) relative: 요소 자신을 기준(실제로 거의 사용되지 않음) absolute: 위치 상 부모 요소를 기준 fixed: 뷰포트(브라우저)를 기준 sticky: 스크롤 영역 기준 top, bottom, left, right: 요소의 각 방향별 거리 지정 auto: 브라우저가 계산(기본값) 단위: px, em, rem등 단위로 지정 1 2 3 .container .item:nth-child(2){ width: 140px; height: 100px; position: relative; top: 30px; left: 200px; } .container { width: 300px; background-color: ro.. 2021. 4. 25.

티스토리툴바