웹 제작 하이퍼태그와 앵커태그

하이퍼링크

1. 하이퍼링크 → 사이트로 이동가능한 형태

• 특징

  1) 클릭해서 이동할 수 있는 형태를 만들어줘야 한다.
  2) a태그에는 target이라는 속성이 기본적으로 들어있고, _self라는 값이 기본값이다.
  _self는 내가 보고있는 페이지가 바뀌면서 사이트 이동
  3) _blank는 새 탭이 열리면서 지정한 링크에 사이트 이동
  4) title속성 → 속성값을 입력하면 마우스를 올렸을 때 말풍선에 나타내줌
  
  5) a태그는 inline 요소이다
  → 너비, 높이를 커스텀 하고 싶으면 상황에 맞게 다른 display속성값으로 바꿔 사용해야한다.
  6) a태그는 가진 크기만큼 클릭할 수 있다. (block, inline-block)

• 속성 설명

inherit → 기본상태로 커스텀
text-decoration → 텍스트 줄 커스텀
none → 없음

• 노멀라이즈

  커스텀 되어있는 태그를 기본상태로 돌려주는 행위
  ex) a태그 노멀라이즈 a {color: inherit; text-decoration: none;}
  ※ 주의사항

  1. 노멀라이즈와 커스텀은 따로 작성해줘야 한다.

a {

  color: inherit;

  text-decoration: none;


커스텀 금지

}

a {

  color: red;

}

7) line-height → 행간 조절 속성
※ 사용처 : 텏트트 세로 중앙 정렬
→ 사용방법: 행간수치와 상자높이수치를 동일하게 작성
ex) height: 50px; → line-height: 50px;
박스 크기가 50px 행간 높이도 50px로 맞춰준다. (세로 중앙 정렬)
→ 위아래 수치가 다른 텍스트들은 세로 중앙 정렬할 때 line-height를 활용한다.
하이퍼링크와 앵커태그

텍스트 가로 정렬

• 브라우저에서 도형취급 받는 요소

1. block(기본)
2. flex(최신)

• 브라우저에서 텍스트취급 받는 요소

1. inline
2. inline-block
3. 텍스트 (text)

※ 도형인지 텍스트요소인지에 따라서 정렬 형태가 달라진다.

• 도형 정렬 속성(코드)
  margin-left auto; → 오른쪽 정렬
  margin-right auto; → 왼쪽 정렬

margin-left auto; + margin-right auto; → 중앙 정렬

• 텍스트요소 정렬 속성(코드)
  text-align: left; → 왼쪽 정렬
  text-align: right; → 오른쪽 정렬
  text-align: center; → 중앙 정렬

1) 텍스트 속성은 적용한 태그에 영향이 가기보단, 아래쪽에 있는 요소에 적용된다고 생각하면 쉽다.
2) 텍스트 정렬하는 text-align속성은 움직이고 싶은 대상을 감싸고 있는 엘리먼트에 적용해야한다.
ex) inline-block요소(커스텀 상태)인 span 정렬 → span 적용x body 적용 o

텍스트 가로 정렬