[2D 변환 작업 관련 속성 값] 1. 요소를 이동하는 작업 - translate(x좌표, y좌표) 속성 값 2. 요소를 회전시키는 작업 - rotate(n deg) 속성 값 > 시계 방향(+), 반시계 방향(-) 회전 가능 3. 요소 크기를 조정하는 작업(너비, 높이) - scale(), scaleX(), scaleY() 속성 값 너비 높이 4. 요소의 기울기를 주는 작업 - skew(), skewX(), skewY() 속성 값 요소를 지정된 각도만큼 x축, y축으로 기울인다. 5. 이동/회전/크기/기울기를 동시에 주는 작업 - matrix() 속성 값 [3D 변환 작업 관련 속성 값] 1. 요소 이동 - translateX(), translateY(), translateZ(), tanslate3d(x..

[그라데이션 효과] 1. 선형 그라데이션( linear-gradient(그라데이션 방향, 최소한 두 개의 색상 지정) ) > 지정된 색상 간에 부드러운 전환(빨강->노랑) > 방향: top->bottom(to bottom), to right, to left, to top 또는 각도 2. 방사형 그라데이션( radial-gradient(모양크기, 색상, 색상) ) > 중심으로부터 부드러운 전환 3. 원추형 그라데이션 [적용 결과]

1. background-size 속성 [속성 값] contain : 가능한 크게 배경 이미지를 확대 cover : 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리 [코드 예시] I am Sam Lorem ipsum dolor sit. Hire me Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam placeat omnis asperiores incidunt iste molestias! [적용 결과] 2. background-origin 속성 - background-position : 배경 이미지의 위치를 지정하는 속성 (left top, center middle = x,y 좌표 값을 지정해서 위치 지정) ..

[적용 결과]

[css 특수성(특이성)?] - 동일한 요소를 가리키는 css 규칙이 두 개 이상 있을 경우 어떤 css 규칙을 요소에 적용할 것인지를 나타내는 것 - 점수로 순위가 정해진다. [특이성 수준을 나타내는 점수] 1. 인라인 css 적용 : 1000점(인라인 스타일 적용 방식이 항상 가장 우선순위가 높다.) ex) h1 style="color:red" 1. id 속성 : 100점 #mydiv{} 2. 태그명, 의사요소 : 1점 3. 클래스명, 의사클래스, 속성선택자 : 10점 4. * : 0점 [!important 속성 값] - !important 속성 값을 주면 특수성 규칙에 예외 발생. 인라인 스타일 시트 적용도 무시하고 가장 먼저 적용이 되어진다. [적용결과]

- 이미지 스트라이트란? 단일 이미지에 넣은 이미지 모음 - 왜 사용하는가? 이미지가 많은 웹페이지는 로드할 때 시간이 오래 걸린다.(성능 저하) = 서버가 이미지를 가지러 여러 번 요청을 하게 됨 아래와 같은 이미지가 이미지 스트라이프

1. 반응형 웹 + 이미지 갤러리 css 반응형 웹 + 이미지 갤러리 Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum quisquam accusamus laborum iure omnis repudiandae explicabo culpa deleniti sapiente amet. Sit laudantium iusto ullam nulla nemo illo consectetur nihil ..

[코드] 2021 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam. 2020 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit volupt..

예시1) [코드] ex02.html - css 드롭다운 메뉴 만들기 이미지 설명 [결과] > 이미지에 마우스를 올리면 아래의 이미지 설명 메뉴가 보여진다. 예시2) [코드] Home News Link 1 Link 2 Link 3 DropDown Link 1 Link 2 Link 3 Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. reiciendis inventore delectus nostrum debitis quod aspernatur perferendis! [결과]