[HTML & CSS] a태그 / padding / margin

[a태그]

• a태그는 앵커 태그이자 하이퍼링크 태그이다.
• a태그는 URL 주소를 남겨 해당 웹 페이지로 링크되어 이동하는 역할을 가진 태그이다.
• a태그는 클릭할 수 있는 형태가 있어야 이동할 수 있다. 링크만 적어두고 태그의 내용이나 형태가 없다면 링크 이동이 불가능하다.
• a태그의 기본속성인 target="_self"는 링크 이동을 할 때, 내가 보고있는 페이지가 바뀌면서 이동한다.
• target의 속성을 _blank로 한다면 내가 보고있는 페이지가 아닌 새 페이지가 열리면서 이동한다. (target="_blank")
• a태그는 a태그가 가진 너비, 높이의 범위만큼 클릭이 가능하다.
• a태그의 기본 display 속성값은 inline이고 크기 커스텀을 위해서는 상황에 맞는 display 속성값으로 변경 후 커스텀이 가능하다.
• a태그의 속성 중 title은 링크가 적혀있는 영역에 마우스 커서를 올려놓았을 때 자동으로 생성되는 부제목(부연설명)과 같은 기능을 한다.
• title 속성의 텍스트를 작성할 때 줄바꿈을 하고 싶다면 해당 자리에 "
"를 붙혀써준다.
• a태그의 target과 title속성은 html에서 커스텀해줘야 한다.
• a태그는 초반에 노멀라이즈라는 표준화 작업을 해주면 좋다.
• 노멀라이즈 작업에는 두 가지 속성이 있으며, 하나는 텍스트의 색상을 기본 컬러색상인 검은색으로 변경한다. (color: inherit;)
• 다른 하나는 기본 생성된 텍스트 아래의 밑줄을 없애준다. (text-decoration: none;)

See the Pen 앵커태그(하이퍼링크) by psm817 (@psm817) on CodePen.

 

 

[padding 여백]

• padding은 여백을 지정할 수 있는 속성이다.
• padding 속성은 클릭이 가능한 태그 내에 여백이 필요할 때 사용된다.
• padding 속성은 너비, 높이가 포함되어 적용된다.
• a태그 내에 padding 속성값을 적용하면 태그 안에 여백이 생성된다.
• padding 속성은 padding-top(상), padding-bottom(하), padding-left(좌), padding-right(우)와 같이 4군데에 여백을 적용할 수 있다.
• padding 속성은 코드의 가독성을 위해 최대한 같은 위치에 적어주며, 가급적이면 상하좌우 따로 적어주는 것이 유지보수에 유리하다.
• padding의 기본 작성 순서는 padding : 상 우 하 좌 (시계방향)이다.
• padding 속성 중 상하 여백수치와 좌우 여백수치가 같을 때는 생략해서 작성할 수 있다.
• 상하와 좌우의 작성 순서는 padding: 상하px 좌우px; 이다.
• 4방향 모두 같은 크기의 여백을 갖는다면 padding: 상하좌우px; 와 같이 생략해서 작성할 수 있다.
• a태그와 같이 기본 display 속성이 inline인 요소에 padding을 적용하는 경우 padding-top 속성을 주어 태그 내의 위쪽 여백을 주게되면 해당 태그가 고정된 상태로 적용된다.
• a태그의 경우 작성된 여백 수치대로 태그가 보이고 싶게 커스텀하고 싶다면 display 속성을 inline이 아닌 다른 속성값으로 커스텀하여 사용하면 된다.
• 텍스트 크기만큼 태그가 크기를 가지고 한 줄에 같이 배치되어야 한다면 display 속성을 inline-block으로 변경하고, 한 줄에 하나씩 배치되어야 한다면 display 속성을 block으로 변경해줘야한다. (그 때 상황에 맞춰서 변경) 

See the Pen padding by psm817 (@psm817) on CodePen.

 

 

[margin 여백]

• margin은 여백을 지정할 수 있는 속성이다.
• margin 속성은 클릭이 가능하지 않는 태그 밖에 여백이 필요할 때 사용된다.
• margin 속성은 오브젝트와 오브젝트 사이의 간격(태그의 바깥쪽)의 여백을 위해서 사용한다.
• margin 속성은 너비, 높이가 포함되어 적용되지 않는다.
• a태그 내에 margin 속성값을 적용하면 태그 밖에 여백이 생성된다.
• margin 속성은 margin-top(상), margin-bottom(하), margin-left(좌), margin-right(우)와 같이 4군데에 여백을 적용할 수 있다.
• margin 속성은 코드의 가독성을 위해 최대한 같은 위치에 적어주며, 가급적이면 상하좌우 따로 적어주는 것이 유지보수에 유리하다.
• margin의 기본 작성 순서는 padding : 상 우 하 좌 (시계방향)이다.
• margin 속성 중 상하 여백수치와 좌우 여백수치가 같을 때는 생략해서 작성할 수 있다.
• 상하와 좌우의 작성 순서는 margin: 상하px 좌우px; 이다.
• 4방향 모두 같은 크기의 여백을 갖는다면 margin: 상하좌우px; 와 같이 생략해서 작성할 수 있다.
• a태그와 같이 기본 display 속성이 inline인 요소에 margin을 적용하는 경우 margin-top 속성을 주어 태그 내의 위쪽 여백을 주게되면 해당 태그가 고정된 상태로 적용된다.
• a태그의 경우 작성된 여백 수치대로 태그가 보이고 싶게 커스텀하고 싶다면 display 속성을 inline이 아닌 다른 속성값으로 커스텀하여 사용하면 된다.
• 텍스트 크기만큼 태그가 크기를 가지고 한 줄에 같이 배치되어야 한다면 display 속성을 inline-block으로 변경하고, 한 줄에 하나씩 배치되어야 한다면 display 속성을 block으로 변경해줘야한다. (그 때 상황에 맞춰서 변경)

See the Pen margin by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 7일차 복습 by psm817 (@psm817) on CodePen.