공부기록/CSS11 vue3 타입스크립트 툴팁 만들기 :title 쓰면 이미지의 title과 똑같이 나옴title {{ prjNm }} {{ prjNm.slice(0, 20) }}... 만든 툴팁 {{ prjNm }} {{ prjNm?.slice(0, 20) }}... [data-tooltip] { position: relative;}[data-tooltip]:before,[data-tooltip]:after { visibility: hidden; opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; transition: all 0.2s ease; font-size: 12px; letter-spacing.. 2024. 5. 31. 2월 27일 (1) CSS - transform, transition transform(모양변환) 요소의 모양을 변화시키는 속성 속성값 (2D) 위치와 기울기 변환할 때만 '-' 단위 사용 가능하다. 1. 위치변환 - translate translate(x, y) - 원래 위치에서 x, y 만큼 이동 보통 position으로 이동하고, translate는 동적인 변화를 줄 때 사용한다. translateX(x) - x 축으로만 이동 translateY(y) - y 축으로만 이동 위치 변환 위치 변환 각도 변환 2. 각도변환 - rotate 단위 deg 기본방향 : 시계방향, '-' 반시계방향 각도 변환 :hover 넣은 예제 (마우스를 가져다 대면 이동하는 모습이 나온다) 위치 변환 각도 변환 각도 원으로 만들기 예제 위치 변환 각도 변환 각도 3. 크기변환 - scale.. 2023. 2. 27. 2월 24일 CSS - flexbox Flexbox display : flex - 부모요소에 설정 Container(부모요소)에서는 item(자식요소)의 배치와 관련된 속성을 처리하고, item에서는 자식요소의 크기 등의 속성을 처리한다. 속성 1. Container 1) flex-direction 내부요소의 배치 방향 row 기본값, 왼쪽에서부터 가로로 배치 row-reverse 오른쪽에서부터 가로로 배치 column 위에서부터 세로로 배치 column-reverse 아래에서부터 세로로 배치 maxmids? 기준값이상 증가가 되지 않는 일정한 수준이 되면 더 이상 줄어들지 않고 삐져나온다. item 높이 160px, container 높이 190px 2) flex-wrap 내부 요소의 줄바꿈 설정 nowarp 감싸지 않음, 줄바꿈 안됨, .. 2023. 2. 24. 2월 23일 (2) CSS selector 2, z-index, display, flex 3. 구조 가상 선택자 HTML 요소의 계층 구조를 기반으로 선택 1) :nth-child(n) - 테이블에서 많이 사용된다. border의 색은 아무것도 지정하지 않으면 검정색이지만 글자색에 따라서 표현된다. n, odd, even 반복활용 가능, 수치를 정해주면 그 수치에 지정된 것만 활용할 수 있다. n 수식이나 특정한 키워드를 사용 even(짝수), odd(홀수), 2n, 3n 등 2) :first-child - 동일 계층의 첫 번째 요소 선택 3) :last-child - 동일 계층의 마지막 요소 선택 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프.. 2023. 2. 23. 2월 23일 (1) CSS clear, selector1 복습 + 추가 설명 @import 전처리 사용자가 작성한 코드를 처리하기 전에 미리 처리되어 준비된 부분 cross origin 두 개의 서버, 보안이 취약하기 때문에 기본적으로는 허용하지 않는다. 요즘은 float 보다는 flex를 많이 쓴다. float 이어서~ clear 속성 : float 속성이 설정된 요소의 float 속성을 제거 방향에 맞추어서 제거해야 한다. 속성값 left - float : left;를 제거 right - float : right;를 제거 both : 둘다 제거 box1 box2 box3 box4 box5 팁) clear로 float 효과를 제거하는 것보다, div로 영역을 분할하여 부분별로 float 속성을 넣는 것이 조절하기 쉽다. Selecor 2 (가상 선택자와 조합.. 2023. 2. 23. 2월 22일 (2) CSS 공간 처리 그림자, 중첩순서, 투명도, 범람 Box-shadow : HTML요소에 그림자를 추가하는 속성 수평(-왼쪽 +오른쪽) 수직(-위, +아래) 흐림 번짐 색상 삽입효과 색이 칠해진 부분은 필수 요소! 중첩이 되어서 나타난다. 흐림 blur 번짐 spread 삽입효과 inset 폴라로이드 효과 img { padding: 20px; padding-bottom: 60px; margin: 20px; box-shadow: 5px 5px 10px black; } opacity : 요소의 투명도 조정 속성 0.0 완전투명 ~ 1.0 완전 불투명, 기본값 박스 스타일링 1 박스 스타일링 2 박스 스타일링 3 박스 스타일링 4 박스 스타일링 5 이미지 갤러리 overflow : 넘침, 범람, 외부 영역 요소에 비하여 내부 .. 2023. 2. 22. 이전 1 2 다음
