[잘난웹디] 한국소비자원 웹사이트 제작 3강 section_main 부분

 

- main에 맨 왼쪽에 위치하던걸 오른쪽으로 가져오고, 위에서 50%정도에 위치시켜준다.

main에 position:relative를 두고 may는 position : absolute; 로 한뒤 top 에서 50% 떨어지게 위치시켜줬다.

.may {position:absolute; width:185px; height:300px; top:50%; background:green; right:300px;  }

 

 

 

- .may를 .title과 비슷한 위치로 올리기

transform:translateY(-50%); 를 이용해 title과 같은 위치로 끌어올려준다.

 

 

- 완성본을 보면 .may 안에있는 a태그에 주황색 st로 원이 들어가져있다.

일단 정사각으로 영역을 만들어준다.

width : 145px; height : 145px ; 로 원을 만들 영역을 설정해주고 border-radius : 50%; 로 조정한다.

border-radius:50%로 하면 모서리 모양이 원으로 바뀐다.

 

ㄴ> 완성본에는 may 부분만 원이 들어가져있는것을 볼 수 있다.

 

 

 

- 우리가 작성한 코드에 a태그가 많기 때문에 ▲처럼 모든 a태그가 다 원으로 바뀐것을 볼 수 있다.

 

 

그렇기 때문에 css를 수정해주어야한다.

> 수정전

 

>수정후

* 바로 속해있는 태그에만 적용시키기 위해 > 를 넣어주면, 해당되는 a태그에만 스타일이 적용된다.

 

 

- background 컬러를 변경해주고, text를 가운데 정렬 해준뒤, a태그 아래로 여백을 준다.

 

 

 

 

 

 

▼ 3강 완성본