CSS기초21 CSS-요소의 위치 정의 : position 1. position : 요소의 위치 정의 1-1. position의 속성 값 속성 값 설명 static (기본위치) - 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태 - relative, absolute, fixed 했던 박스를 원상태로 회복 relative (상대위치) - left, top 송성으로 이동을 할 수 있음 - position: absolute로 지정된 요소의 '부모 요소' 역할을 할 수도 있음 absolute (절대위치) - 원래 위치에서 따로 떼어내 독립적으로 새로운 위치를 설정 - left, right, top, bottom 속성으로 위치를 지정할 수 있음 - 부모 박스를 기준으로 위치를 지정함 (relative 부모가 없을 시에는 body가 부모가 된다) fixed (고정위치).. 2020. 8. 26. CSS-요소의 정렬 : float float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다. 속성 값 설명 none 요소를 떠 있게 하지 않는다 (기본값) left 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 right 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 1. 정렬 float 프로퍼티를 사용하지 않은 블록 요소들.. 2020. 8. 26. CSS-다단편집(multi-column) CSS에서는 신문의 기사와 같은 텍스트의 다단 편집을 쉽게 만들 수 있다. 속성 값 설명 column-count 가로로 나열될 텍스트의 단의 개수 column-gap 단과 단 사이의 여백 column-rule 단과 단 사이의 구분선 구분선의 모양, 두께, 색상을 각각 지정할 수 있음 column-span 다단 안에 포함된 요소를 다단 편집에서 해제시킴 (제목을 나타내는 h2 요소 등) column-width 브라우저에 대한 최소 너비 Festival - 엄정화 이제는 웃는 거야 Smile again 행복한 순간이야 Happy days 움츠린 어깨를 펴고 이 세상 속에 힘든 일 모두 지워버려 슬픔은 잊는거야 Never cry 뜨거운 태양 아래 Sunny days 언제나 좋은 일들만 가득하기를 바라면 돼 항.. 2020. 8. 24. CSS-애니메이션(Animation) Icon 예제 - animation icon 공통 스타일 1. CLOCK & HOURGLASS 2. LOADER 1, 2 3. LOADER 3, 4 4. LOADER 5, 6 5. LOADER 7, 8 > 6. LOADER 9, 10 2020. 8. 24. 이전 1 2 3 4 ··· 6 다음
