반응형 CSS35 CSS3 다중 칼럼 Multi-column) 레이아웃 다중 칼럼(multi-column) 레이아웃 CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있습니다. 속성 설명 columns 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음. column-count 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정함. column-gap 칼럼 사이의 간격을 설정함. column-width 칼럼의 너비를 설정함. column-span 해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정함. column-fill 칼럼을 어떻게 채울지 설정함. column-rule 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음. column-rule-st.. IT/소프트웨어 2020. 4. 14. 더보기 ›› CSS3 사용자 인터페이스 - resize, outline-offset, box-sizing 사용자 인터페이스(user interface, UI) CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해줍니다. CSS3 사용자 인터페이스(user Interface) 지원 버전 CSS3 사용자 인터페이스(user Interface)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다. resize 속성 resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다. ※ resize 속성은 익스플로러에서 지원하지 않습니다. See the Pen eYppZBW by yunjunshin (@yjshin).. IT/소프트웨어 2020. 4. 14. 더보기 ›› CSS 위치 속성 - Float(플로트), align(정렬) float 속성 float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. 다음 예제는 이미지와 글자를 함께 출력하는 예제입니다. float 속성을 이용한 위치 설정 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare sapien suscipit tincidunt ullamcorper. Cras ac sem sed mauris maximus rhoncus vel in metus. Nam pharetra arcu sit amet dolor interdum, eget sceler.. IT/소프트웨어 2020. 2. 20. 더보기 ›› CSS3 - CSS 반응 hover, 상태, 구조 선택자 반응 선택자 - hover 반응에 따른 속성을 변경 시키는 것 마우스의 반응에 따른 속성을 설정할 수 있다. :hover 를 적용하면 마우스가 올린 반응에 따라 선택되어 진다. menu1 menu2 menu3 menu4 menu5 ul > li { ... } 는 자손 선택자 ul 태그 바로 밑에 있는 li 태그들을 모두 선택한다 li:hover { ... } 는 hover를 주어 마우스가 해당 태그 위로 올라갔을 때를 선택한다 상태 선택자 상태에 따른 속성을 변경하는 것. 폼 태그에서 focus가 맞춰진다던가 type="text" 인 것이 enabled 또는 disabled 처리 되었다던가 할 때 발생 이름 : 아이디 : 비밀번호 : input:focus { ... } 는 input 태그에 커서가 깜박임.. IT/소프트웨어 2019. 7. 9. 더보기 ›› CSS3 - CSS 기본, 선택자 CSS style 시트를 활용하여 html5 본문에 작성된 태그들의 스타일 즉 속성들을 변경하는 역할을 합니다. 선택자 특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용된다. 제목 입니다. 본문 입니다. 제목 입니다. 본문 입니다. 적용 태그와 속성이 중복되어 선언되면 나중에 선언된 내용이 반영된다. h1태그입니다. p태그입니다. 위 그림과 같이 ② 에서 적용한 font-size:small, color:red 가 적용되어 나타납니다. IT/소프트웨어 2019. 7. 8. 더보기 ›› 반응형 이전 1 다음
