CSS25 CSS-레이아웃Ⅰ: float layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다. 또한, 모바일 사용자가 데스크탑 사용자보다 많은 상황을 감안하여 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design)이 모던 웹 사이트의 필수 사항이 되었다. CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다. float을 이용해 기본 레이아웃 구성을 연습해보자. https://hrin-0820.tistory.com/36 CSS-요소의 정렬 : float float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. .. 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 5 ··· 7 다음
