728x90 Programming/CSS5 CSS로 글자 양 옆으로 선 그리기 CSS로 글자 양 옆으로 선 그리기. 방법은 before와 after를 통해서 선을 그리면 된다. 1) css 2) body 선 위 텍스트 가나다라마바사아자차카타파하 하하하하하 양 옆으로 선이 그려집니다 선 아래 텍스트 abcdefghijklmnopqrstuvwxyz 3) 결과 2020. 12. 1. [CSS] flex로 div 왼쪽 - 가운데 - 오른쪽 3등분하고 정렬하기 이전 포스팅에서는 flexbox의 기본개념과 flex의 속성에 대해 알아보았는데 이걸 사용해서 div를 3등분 또는 n등분으로 쉽게 나눌 수 있다. 부모 div에 flex 속성을 주고 비율 기입하는 방법으로 div를 나눌 수 있다. 1.방법 부모 div에 display : flex; 속성 부여 자식 div에는 저번 포스팅에서 적었던 것처럼 축약형으로 flex를 사용한다. 1)flex: 숫자; 형식으로 비율을 기입한다. 2)flex-basis: 크기; 형식으로 크기를 지정하는 방법도 있다. *flex-grow값만 지정하는거고 나머지는 1 0으로 사용하는것이다. *flex:2로 주면 (flex-grow:2, flex-shirnk:1, flex-basis:0) flex 값은 flex-grow, flex-shr.. 2019. 4. 17. [CSS] flexbox 개념 및 속성 설명(flex-direction / flex-wrap / flex) Flexbox는 CSS3에 새롭게 반영된 레이아웃 모듈이다(Flexible Box module) 인터페이스 내의 아이템 간 공간 배분 강력한 정렬 기능 1차원 레이아웃 모델 Flexbox는 레이아웃을 다룰때 한번에 하나의 행이나 열만을 다루기 때문에 1차원이라고 이야기를 한다. flexbox는 주축과 교차축이라는 두개의 축에 대해 작동하므로 어떻게 동작하는지 확인하고 이해하는 것이 중요함. 크게 속성을 살펴보면 다음과 같다. 1.flex 컨테이너 -문서의 영역 중에서 flexbox가 놓여있는 영역을 가르킨다. -flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한다. .container { display : flex } 2.flex-directio.. 2019. 4. 16. [CSS]div안에 div를 가운데에 정렬하는 방법 보통 div에서 글을 가운데에 정렬하고 싶은 경우가 많은데 두개의 div를 사용하면 쉽게 중앙에 정렬할 수 있다. # 방법 1) 자식 div에 inline-block을 사용하면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .div-parent { width:100%; text-align: center; padding:30px; background-color: darkgray; } .div-child { display:inline-block; text-align: center; width:50%; height:200px; background-color: white; } 결과 화면 >> # 방법 2) 부모 div에 display:table을 설정하고.. 2019. 4. 11. 이전 1 2 다음 728x90
