css로 a태그 정렬하기(a tag 링크 태그 정렬)

a태그를 정렬하는 방법에 대해서 알아보겠습니다.

css에서 가운데 정렬 명령을 줄 때, 주로 margin이나 text-align:center 등의 명령을 주어 정렬을 합니다.

아무 명령을 주지 않았을 때는 기본적으로 왼쪽 정렬 상태인데, 특정한 위치를 기준으로 정렬을 하려고 할 때

text-align:center; /* 가운데 정렬 */ text-align:right; /* 우측 정렬 (오른쪽 정렬) */ text-align:left; /* 좌측 정렬 (왼쪽 정렬) */
Code language: CSS (css)

위처럼 명령을 해 주면 원하는 대로 정렬을 할 수 있습니다.

하지만, 주로 링크를 걸 때 사용하는 a태그는 블럭 요소가 아닌 in-line 요소(인라인태그) 이기 때문에 margin이나 text-align: center;등의 명령어가 먹히지 않습니다.

h2태그에 border(테두리)를 씌워서 기본적으로 h2태그가 갖는 면적을 확인해보겠습니다.

위처럼 글자가 많지 않아도 h2태그는 한 줄 전체의 면적을 자동으로 차지하는 것을 볼 수 있습니다. 그렇기 때문에 center 명령을 주게 되면 저 면적 중 가운데로 정렬이 되는 것입니다.

하지만 a태그에 h2태그와 똑같이 border를 주게 되면, a태그 내 쓰여진 글자만큼만 면적을 갖는 것을 볼 수 있습니다. 그렇기 때문에 center명령을 주어도 이동할 수 있는 공간이 없다는 것인데요.

이럴 경우 a태그를 정렬하는 가장 간단한 방법을 소개하겠습니다.

a태그를 div태그나, article 태그로 감싼 뒤, div나 article 태그에 text-align:center; 명령을 주는 것입니다.

이렇게 하면 간단하게 a태그를 원하는 대로 정렬 할 수 있습니다.

https://investechnews.com/100%eb%a7%8c%ec%9b%90-%ec%9d%b4%ed%95%98-%ea%b7%b8%eb%9e%98%ed%94%bd%ec%ba%90%eb%93%9c%ec%98%81%ec%83%81%ec%bd%94%eb%94%a9-%ea%b0%80%eb%8a%a5%ed%95%9c-%ea%b0%80%ec%84%b1%eb%b9%84-%eb%85%b8/


1 thought on “css로 a태그 정렬하기(a tag 링크 태그 정렬)”

댓글 남기기

%d 블로거가 이것을 좋아합니다: