🚩 하이퍼링크

<a>

📝 쓰임새

• 하이퍼링크를 넣을 때 사용하는 태그.
• list 태그 안에 사용할 수 있다.

✒️ 사용법

입력

<a href="https://www.apple.com/">Apple</a>

* href : hypertext reference

출력

Apple

속성

• href : 클릭시 이동 할 링크 작성
• target : 링크를 여는 방법
  • _self : 현재 페이지 (기본값, 사용하지 않을 때)
  • _blank : 새 탭
  • _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
  • _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.

🔗 참고 링크 & 도움이 되는 링크

• HTML <a> 태그 - ofcourse

---

🚩 의사 클래스

:

📝 쓰임새

• 선택하고자 하는 HTML 요소의 특별한 상태를 나타낼 때 사용
  

✒️ 사용법

선택자:의사클래스이름 {속성: 속성값;}

선택자.클래스이름:의사클래스이름 {속성: 속성값;} 
선택자#아이디이름:의사클래스이름 {속성: 속성값;}

입력& 설명

a:link { color: seagreen; } /* 방문 전 링크 상태 */
a:visited { color: red; } /* 방문 후 링크 상태 */
a:hover { color: black; text-decoration: underline; } /* 마우스 커서를 올려놓았을 때 변경됨 */
a:active { background: yellow; font-weight: bold; cursor: no-drop; } /* 마우스 클릭하고 있을때(활성화) */

속성

수업 시간에 사용했던 속성들만 정리

• :link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
• :visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
• :hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
• :active 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
• :focus 초점이 맞춰진 input 요소를 모두 선택함.

🔗 참고 링크 & 도움이 되는 링크

• 의사 클래스(pseudo-class)
  

---

🚩 테이블

<table>

📝 설명

• 표를 만들 때 사용하는 태그.
• 셀들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용한다.

table의 자식 요소

• <tr> : 테이블의 행(row)을 정의
• <th> : 테이블 각 열의 제목을 정의
• <td> : 하나의 테이블 셀(cell)을 정의

그 외의 요소들

• <caption> : 테이블의 캡션(설명)을 정의할 때 사용. 단 하나만 사용 가능하다.
• <col> : colgroup요소에 속하는 각 열(column)의 속성을 정의할 때 사용.
• <colgroup> : 열 전체에 스타일을 적용하고 싶을 때 사용.
  • colgroup 내부에 col 태그를 사용한다.
• <thead> : 테이블의 header 영역을 나타낼 때 사용
• <tbody> : 테이블의 body 영역을 나타낼 때 사용
• <tfoot> : 테이블의 footer 영역을 나타낼 때 사용

table의 속성

• rowspan : 행(row)을 병합할 때 사용
• colspan : 열(column)을 병합할 때 사용
• border-collapse: collapse
  • 테두리끼리 겹치게 만든다. (border 1px)

<td rowspan="2" colspan="3">

✒️ 사용법

입력

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>


* 테이블 기본 구조

출력

밥류	면류	분식류
김밥	라면	떡볶이

🔗 참고 링크 & 도움이 되는 링크

• HTML <table> 태그

---