전체 글 (5) 썸네일형 리스트형 5. CSS 응용 1. display : inline-block inline속성과 block속성의 특징을 모두 가짐. inline요소에 margin /padding을 적용하면서 좌측배열로 배치하기위해서 사용함. text1_1 text1_2 text2_1 text2_2 text3_1 text3_2 text4_1 text4_2 2. vertical-align : baseline / sub / super / top / text-top / middle / bottom / text-bottom inline속성들끼리의 수직정렬을 조절하기위한 속성. 아래 예시에서처럼 icon과 text간의 수직정렬을 맞출 수 있다. 타임딜 3. line-height : 행간을 나타내는 속성 * 박스의 height와 line-height를 일치시키면 .. 4. wrap box / 가상선택자 / 특수문자 wrap box 홈페이지 양 옆에 여백을 주기위해 사용하는 box. 너비값은 고정값으로 지정하고 좌우 여백을 auto값으로 지정해주어 고정값외에는 여백처리가 되도록 처리해준다. 시멘틱 태그 내부에 사용 가상선택자 선택자뒤에 가상선택자를 부여하여 특정한 이벤트마다 지정한 속성을 부여한다. selector:first-child() : 해당 요소의 첫번째 요소 selector:last-child() : 해당 요소의 마지막번째 요소 selector:nth-child(n) : 해당 요소의 모든 요소중 n번째 요소 (n번째 자리에 selector요소가 있어야만 적용됨) selector:nth-of-type(n) : 해당 요소의 type중 n번째 요소 (selector요소만 카운트하며 n번째 selector요소에 적.. 3. block 가로배열 / Inline block요소의 여러가지 배열방법 1. float : left / right / none 요소를 화면상에서 띄워 block요소를 가로로 배치시킨다. 다른 요소보다 화면상에서 더 상위 레이어에 존재하게되며 block요소의 특징을 잃어버려 width값이 초기화된다. float을 사용한 요소의 부모는 자식을 인식 못 하고 높이가 0가 되버리는 현상이 생기고 다음 block요소가 그 아래로 끌려 올라와 겹치는 현상이 발생한다. 따라서 float을 사용한 요소의 부모에는 clear속성을 사용하여 float을 해제해줘야한다.!! 사용법 box box box /* CSS */ .clearfix::after{ content:""; clear:both; display:block; } /* 부모요소에 float해제 */ .. 이전 1 2 다음
