CSS 적용하기 (원형 배치)

 

06. CSS 적용하기 (원형 배치)

[ a 태그 ]

클릭 시 특정 페이지로 넘어간다.

href : 클릭했을 때 어디로 보낼 것인가

href ="#" : 어디 가지 말고 그대로 있어라 (#)

 

- 글자를 표현한다.

실제로 적힌 글자가 없어도 공간을 차지하려면

1️⃣display : block;

2️⃣ width 너비 설정

3️⃣height 높이 설정

 

• 원형 만들기 

border-radius : 150px ;

가로 세로 같기에 완전한 동그라미 형태

 

[ flex 속성 ]

• 특정 div안에 있는 요소들을 정렬할 때 사용

1️⃣ display : flex;

2️⃣ flex-direction : row / column;

3️⃣ justified-content : center;

 

- flex-wrap: wrap;

: 요소의 모양이 달라지지 않게 각각의 요소들이 기존의 넓이를 갖도록 한다.

브라우저 가로-길이 변동에 따라 줄 바꿈 된다.

 

원 하나가 150px 창을 늘릴수록 한 줄에 많은 원이 들어감

원 요소(150px) 밖 영역인 div의 너비(1200px)를 고정시키면 브라우저 창을 넓히거나 줄여도 변하지 않음