Frontend/CSS, HTML
[CSS] #12 아이콘 링크/ 화살표 아이콘(angle)/같은 비율로 요소 정렬하기
blueprint-12
2021. 10. 23. 21:57
▶아이콘 링크 만들기
html 코드에서 내가 아이콘을 눌렀을 때 다른 스크린으로 전환(해당 링크로 이동)을 원한다면,
이런식으로 a태그 안에 i태그(아이콘)을 넣어줘야 합니다.
span 태그 안에 따로 따로 닫아주면 아이콘을 눌러도 해당 링크로 전환되지 않습니다.
<span>
<a href="#"></a><i class="아이콘"></i>
</span> //틀린 예제
▶font-awesome에서 작은 화살표는 angle(앵글)이라고 부릅니다.
검색 시, angle 이라고 검색해주면 됩니다.
▶3요소를 각각 같은 비율로 분배하여 가로 정렬하기
(아래의 예제에서는 3요소가 "3개의 컬럼"이라고 생각하면 됩니다.)
CSS코드의 첫번째 컬럼에 margin-right: auto;
마지막 컬럼에 margin-left: auto;
위의 코드를 적용한 ↓결과물↓