728x90 반응형 CSS127 [CSS3] 단나누기 column 일반적으로 글을 쓰면 아래와 같은 결과가 나옵니다. column속성을 이용해 column-count : 3;을 적용하자 단이 3개로 나누어집니다. count로 갯수로 나누는게 아닌 column-width : 300px;를 이용해 width값으로 나눌 수 있습니다. 단의 width값이 300px로 나누어 졌습니다. 단을 나누는 스타일을 정의할 수 있습니다. 단과 단 사이의 간격을 100px 로 설정합니다. column-gap : 100px; 단을 나누는 선을 추가합니다. column-rule-style : dotted; 선스타일은 dotted 점선 solid 실선 이외에 아래와 같은 값을 가질 수 있다. none / hidden / dotted / dashed / solid / double / groove.. 2019. 4. 10. [CSS3] 정렬을 하는 여러가지 방법 1. text-align: center; text-align: center; 가로로 가운데 정렬 (텍스트나 inline으로 된 엘리먼트에 적용된다. ) 2. margin : 0 auto; display: block; margin : 0 auto; 엘리먼트 가운데 정렬, 엘리먼트 양쪽의 마진을 자동으로 계산해서 중앙에 위치하도록 한다.(display:block 이고 position이 설정되지 않았을때 사용한다) 3. vertical-align : middle; display : table-cell; text-align : center; vertical-align : middle; 세로로 가운데 정렬 span 태그와 같은 inline 요소에 사용되며 display:table-cell로 만들어 사용할 수도 있.. 2019. 4. 9. [CSS3] position 사용방법 position : static; position 의 기본값은 static 이다. position : relative; 아무런 값도 설정하지 않는 경우 static과 같은 위치에 위치한다. top, left, right, bottom 값을 설정해 위치를 설정할 수 있다. 이때 기준은 현재위치를 기준으로 움직인다. position : absolute; top, left, right, bottom 값을 설정해 위치를 설정할 수 있다. 그러나 relative와 다른점은 본문 문서를 기준으로 위치가 지정되며, 떠올라있기때문에 다른 엘리먼트 위에 올라간다. 위치 기준을 상위태그로 설정하는 방법이 있다. 보통은 전체 문서를 기준으로 문서 시작 지점이 0,0이 되지만 상위태그에 position값을 주면 부모태그의 시.. 2019. 4. 9. [CSS3] float 속성 사용시 부모태그의 높이 맞추는 방법 float을 사용하게 되면 말그대로 엘리먼트가 둥둥 뜨게된다. 그렇기 때문에 부모는 float을 사용한 엘리먼트를 품고있지 않기 때문에 높이가 맞지않는다. 이를 맞추기 위한 방법으로는 다음과 같다. 1. 가장 간단한 방법 overflow : hidden 부모 태그에 overflow : hidden 값을 준다. 2. 가상요소 ::after 을 사용하는 방법 (가장 권장하는 방법!!) 부모선택자::after { dispaly: block; content: ''; clear: both; } 3. 가장많이 알려진 clear 태그를 사용하는 방법 빈 태그를 만들어 clear: both; height: 0; overflow: hidden; 값을 설정하는 방법이다. 그러나 의미없는 태그가 생성되므로 권장하지 않는 방.. 2019. 4. 9. 이전 1 ··· 28 29 30 31 32 다음 728x90 반응형
