[CSS]#14 border-radius세분화/flex children기능

▶border-radius세분화 

border-radius는 4개의 CSS 속성의 단축 속성입니다.

1. border-bottom-left-radius 
2. border-bottom-right-radius 
3. border-top-left-radius
4. border-top-right-radius

즉, 반대로 각각의 값을 따로 지정할 수도 있다는 뜻입니다.

e.g.)

아래 코드의 결과물 말풍선

위 말풍선의 코드 

border-radius전체에 15px 값을 주고 그 다음에 border-top-left-radius의 값을 0으로 줌으로써 

말풍선 같은 모양을 만들어냈습니다.

▶flex children 기능: order 

order 라는 속성은 오직 flex children한테만 적용가능하다. (전제조건 - display:flex; )

방법1) 순서를 바꾸길 원하는 자식요소에 order값을 각각 주는 것(하지만 코드가 많이 필요하기 때문에 비효율적)

e.g.)

.자식요소1 {

order: 1}

.자식요소2{

order: 0}

방법2) 부모요소에 flex-direction을 row-reverse로 주는 것

e.g.)

.자식1과 자식2를 포함하는 부모요소{

flex-direnction: row-reverse; }