코드 정리/CSS13 CSS 기본속성(7) 전환 효과와 변환 효과 전환 효과 - 요소의 전환을 자연스럽게 만들어주는 속성 transition : 요소의 전환 효과를 지정하는 단축 속성 - transition: 속성명 지속시간(필수 포함 속성) 타이밍 함수 대기시간; - transition-property 전환 효과를 사용할 속성 이름 지정 - 기본값 all - 속성 이름 명시 (width, background-color ...) - transition-duration 전환 효과의 지속시간 지정 - 기본값 0 - 시간 (1s , 2s ...) - transition-timing-function 전환 효과의 타이밍 함수 지정 - 기본값 ease (느리게-빠르게-느리게) - linear 일정하게 - ease-in (느리게-빠르게) - ease-out (빠르게-느리게) - e.. 2022. 11. 24. CSS 기본 속성(6) 플렉스 정렬 플렉스 정렬 - 부모 요소에 display 값을 flex로 지정하여 정렬하는 방법 - flex : 블록요소 - inline-flex : 인라인 요소 - 블록 요소는 기본적으로 수직으로 쌓이지만 flex를 통해 수평 정렬이 가능하다. 1 2 3 .parent { width: 400px; height: 300px; background-color: royalblue; display: flex; } .child { width: 100px; height: 100px; border: 1px solid red; background-color: orange; } => flex 적용으로 블록 요소를 쉽게 수평 정렬하였다. => 이렇게 flex를 사용하면 부모 요소는 flex container라고 부르며 자식 요소는 fl.. 2022. 11. 24. CSS 기본 속성(5) 요소의 배치와 쌓임 순서 position - 요소의 위치 지정 기준 - 기본값 static : 기준 없음 - relative : 요소 자신을 기준 - 요소를 옮겼을 때 배치 전 자리는 시각적으로만 비어 있음 - absolute를 위한 사용 - absolute : 위치 상 부모 요소를 기준 - 사용 시 형제 요소와의 상호 작용이 무너지고 요소가 위로 뜨면서 요소가 겹침. - 위치상 부모 요소를 relative로 지정 필요 - 부모/상위 요소에 position값이 없다면 뷰포트를 기준으로 함. -fixed : 뷰포트를 기준 (화면에 고정) - 스크롤을 해도 위치가 변하지 않음. => absolute와 fixed는 display 속성이 block으로 변경됨. 위치 지정 top, bottom, left, right -> 음.. 2022. 11. 24. CSS 기본 속성(4) 배경 속성 background-color - 요소의 배경 색상 - 기본값 transparent (투명) - Hex , rgb, rgba background-image - 요소의 배경 이미지 삽입 - 기본값 none - url("경로") - 이미지 경로 삽입 .img { background-image: url("./image/logo.jpg") } background-repeat - 요소의 배경 이미지 반복 - 기본값 repeat - repeat-x (수평 반복) , repeat-y (수직 반복) , no-repeat => 기본값과 no-repeat 적용 background-position - 요소의 배경 이미지 위치 - 방향 : top, bottom, left, right, center - 단위: .. 2022. 11. 24. CSS 기본속성(3) 글꼴과 문자 속성 font-style - 글자의 기울기 속성 - 기본값 normal - italic : 이텔릭체 (기울어진 글자) font-weight - 글자의 두께 속성 - 기본값 normal (400) - bold (700) - 100~900 : 100단위로 굵기 설정 가능 - 보통 normal(400)과 bold(700) 사용 font-size - 글자의 크기 속성 - 기본값 16px - 단위로 지정 : px em rem line-height - 한 줄의 높이 (행간과 유사) - 기본값 normal - 숫자 (요소의 글꼴 크기의 배수로 지정) - 단위 (px em rem으로 지정) - 한 줄의 높이에서 글자는 수직 가운데 정렬됨. span { line-height: 2; } /*기본 글꼴 크기인 16px의 2배로 .. 2022. 11. 24. CSS 기본 속성 (2) overflow - 요소의 크기 이상으로 내용이 넘쳤을 때, 보임을 제어하는 속성 - 기본값 visible hidden : 넘친 내용을 잘라냄 scroll : 스크롤바 생성 / 넘치지 않은 영역도 같이 생성 됨. auto : 넘친 부분만 스크롤바 생성 overflow: visible; overflow: hidden; overflow: scroll; overflow: auto; - 개별속성 : overflow-x , overflow-y display - 요소의 화면 출력(보임) 특성 block - 상자 요소 inline - 글자 요소 inline-block - 글자 + 상자 요소 ==> 위 세 가지는 html의 각 요소에 이미 지정되어 있는 값이 기본값이다. flex - 플렉스 박스 (1차원 레이아웃) =.. 2022. 11. 15. 이전 1 2 3 다음
