CSS/CSS 기초 (4) 썸네일형 리스트형 transform & transition 1. 사용 용도 Element(html 정보)를 다채롭게 만들기 위함 2. transform & transition(transform) Element(html 정보)의 모양이나 위치를 변형하는 속성 (transition) Element(html 정보)에 변형 효과를 주는 속성 3. 속성 실습1. Element(html 정보)를 넣어준다.12345 abc cs 2. css 정보를 넣어준다.123456789 #background { background : #000fff; } #main { font-size : 100px; background : #fff000; }cs 3. 결과 4. CSS 정보 변경12345678910111213 #background { background : #000fff; } #main.. display : inline & block 1. display Element(html 정보)의 어떤 형식으로 전시할지 정의하는 속성 2. inline & block(display:inline) Element(html 정보)를 inline 요소로 정의함 (대표적 inline 배치 tag : a, span) (display:block) Element(html 정보)를 block 요소로 정의함 (대표적 block 배치 tag : div, p) (display:inline-block) Element(html 정보)를 inline-block 요소로 정의함 3. 속성 실습1. Element(html 정보)를 넣어준다.123456789 abc def ghi jkl mno pqrColored by Color Scriptercs 2. css 정보를 넣어준다.12.. :link :visited :hover :active 속성 1. 사용 용도 정보의 알아보기 쉽게 정보에 효과를 주는 속성 2. 정의(:link :visited) a teg 에서 사용 가능:link = 방문 전 변화 상태:visited = 방문 후 변화 상태 (:hover :active) :hover = 마우스를 올려놨을 시 상태 변화:active = click 시 상태 변화 3. :link :visited :hover :active 속성 실습 1. 정보를 넣어준다.123456 코딩분해 Colored by Color Scriptercs 2. css 정보를 넣어준다. 1234567 a:link {background:yellow;} a:visited {background:black;} div {width:100px; height:100px; border:1px sol.. 960 Grid System 1. Grid System 요소 (Container, Column, Gutter) Container : 몇 개의 Column을 사용하는 Grid System 인지 정하는 것이다. Column : 실제 정보가 들어가는 부분이다. Gutter : Column의 양쪽에 들어가며 Column과 Column 간격에 을 주기 위함이다. 2. 960 Grid System (12 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는 Column의 양쪽에 위치하며 폭은 10px이다. Column의 폭은 Class name grid_1은 60px grid_2는 140px grid_12는 940px이다. (16 Column Grid) 한줄당 총 960px을 사용하며, 그림과 같이 Gutter는.. 이전 1 다음
