본문 바로가기

Web/css

 (9)
css transform/transition transform 속성 태그를 변형시킴. 값 종류에 따라 크기, 회전, 이동 등의 변형이 만들어짐 태그의 정중앙을 기준으로 변형 해당 태그가 변형되더라도 주위에 영향을 주지 않고 단독으로 적용됨 x축 2차원 가로, y축 2차원 세로, z축 3차원 원근을 나타냄 scale(숫자): 크기변형 {transform: scale(1.2);}: 원래 크기의 1.2배로 변형 정중앙을 기준으로 사방으로 확대/축소하는 애니메이션 동작 시 사용할 수 있음 scaleX, scaleY로값을 따로 적용할 수 있음 Rotate(숫자): 회전 {transform: rotate(30deg);}: 오른쪽으로 30도 회전 +값은 오른쪽으로, -값은 왼쪽으로 회전 rotateX, rotateY로 값을 따로 적용할 수 있음 translat..
css float float 요소를 좌우 방향으로 띄움(수평 정렬) 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됨 각 요소에 float속성이 적용되면 차례로 정렬됨 속성 none: 요소 띄움 없음 left: 왼쪽으로 띄움 right: 오른쪽으로 띄움 float 해제 float속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야 함 1. 형제 요소에서 해제 float속성이 추가된 요소의 다음 형제요소에 clear속성 추가 2. 부모 요소에서 해제(1) float속성이 추가된 요소의 부모요소에 overflow속성 추가 2. 부모 요소에서 해제(2) float속성이 추가된 요소의 부모요소에 미리 지정된 clearfix클래스 추가 (*추천 방법) di..
css background background (단축속성) 요소의 배경을 설정 속성 background-color: 배경 색상 background-image: 하나 이상의 배경 이미지 background-repeat: 배경 이미지의 반복 background-position: 배경 이미지의 위치 background-attachment: 배경 이미지의 스크롤 여부(특성) background-color (개별속성) 요소의 배경 색상을 지정 속성 색상: 요소의 배경 색상 transparent: 투명 background-image (개별속성) 요소의 배경 하나 이상의 이미지를 삽입 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보임 속성 none: 이미지 없음 url("경로"): 이미지 경로(URL) backgroun..
css position position 태그의 위치 지정 방법의 유형(기준)을 설정 값에 따라 해당 태그의 위치 기준이 달라지게 됨 속성 static: 유형(기준) 없음 / 배치 불가능 relative: 요소 자신을 기준으로 배치 absolute: 위치 상 부모 요소를 기준으로 배치 fixe: 브라우저(뷰포트)를 기준으로 배치 sticky: 스크롤 영역 기준으로 배치 *자식한테 포지션을 전부 다 줘선 안됨 (왼쪽 줄의 자식한테는 포지션x) position: relative; 요소 자신을 기준으로 배치(권장하지 않음) position: absolute; 상위 태그를 기준으로 위치를 정함 태그의 실제 위치는 {top, right, bottom, left} 속성을 반드시 사용해야함 absolute 값을 사용해 위치를 지정할 때, 위..
css Flex flex 요소의 수직/수평에 대한 정렬 속성 스타일값의 조합에 따라 다양한 레이아웃 생성 가능 Flexible Box Container와 item으로 구성되고, Container가 item을 감싸는 구조를 가짐 Flex Container flex container를 위한 속성 속성 display: Flex Container를 정의 flex-flow: Flex-direction와 flex-wrap의 단축 속성 flex-direction: Flex items의 주 축(main-axis)을 설정 flex-wrap: Flex items의 여러 줄 묶음(줄 바꿈) 설정 justify-content: 주 축(main-axis)의 정렬 방법을 설정 align-content: 교차 축(cross-axis)의 정렬 방법..
css 여백 css 속성의 단위 ps(픽셀) 웹에서 사용되는 가장 기본이 되는 단위 em 상대값, 주로 폰트에 사용 {font-size: 1.2em;}: 상위 태그에 지정된 폰트크기의 1.2배 {line-height: 1.2em;}: 현재 태그에 지정된 폰트크기의 1.2배 %(퍼센트) 상대값, 부모태그의 값에 비례적용 됨 vw와 vh 상대값, 브라우저의 크기에 비례적용 됨 css 태그의 성질 태그의 구분 대부분의 태그는 3가지 성질로 구분됨 태그의 성질에 따라 블럭block요소 태그, 인라인inline요소 태그, 인라인블럭inline-block요소 태그로 분류 display속성은 태그의 성질을 결정하는 역할을 함 블럭block요소 태그 {display:block;} 사용 가능한 최대 가로 너비를 사용 크기를 지정할 ..
css border/text/font css border boder 요소의 테두리선을 지정 속성 border-width: 선의 두께(너비) border-style: 선의 종류 border-color: 선의 색상 border-width 선의 두께(너비)를 지정 속성 medium: 중간 두께 thin: 얇은 두께 thick: 두꺼운 두께 단위: px, em, cm 등 border-style 선의 종류를 지정 속성 none: 선 없음 hidden: 선 없음과 동일(table 요소에서 사용) solid: 실선(일반선) dotted: 점선 dashed: 파선 double: 두 줄선 groove: 홈이 파여있는 모양(선) ridge: 솟은 모양(선, groove의 반대) inset: 요소 전체가 들어간 모양(선) outset: 요소 전체가 나온 모양(..
css 선택자 css 선택자 ·선택자 말 그대로 선택하고자 하는 요소 특정 요소를 선택하여 스타일을 적용할 수 있게 해줌 전체 선택자 (요소 내부의)모든 요소를 선택 ex) *{ 속성: 값; } 태그 선택자 태그이름이 E인 요소 선택 ex) E{ 속성: 값; } 클래스 선택자 HTML class 속성의 값이 E인 요소 선택 ex) .class이름{ 속성: 값; } 아이디 선택자 HTML id 속성의 값이 E인 요소 선택 ex) #id이름{ 속성: 값; } 일치 선택자 E와 F를 동시에 만족하는 요소 선택 ex) EF{ 속성: 값; } 자식 선택자 E의 자식요소 F를 선택 ex) E>F{ 속성: 값; } 후손(하위) 선택자 E의 후손(하위)요소 F를 선택 ex) E F{ 속성: 값; } 인접 형제 선택자 E의 다음 형제..

티스토리툴바