1. CSS (Cascading Style Sheets)
CSS는 다중 웹 페이지의 레이아웃을 한번에 컨트롤 할 수 있다.
CSS는 총 3 방법으로 HTML documents에 추가될 수 있다.
1. Inline - 'style' attribute inside HTML elements (엘리먼트 내에서 정의)
2. Internal - <style> element in the <head> section ( 헤더에서 정의, 일괄적 적용)
3. External - <link> element to link to an external CSS file (CSS 파일 불러오기)
Inline CSS
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
External CSS
CSS Colors, Fonts, and Sizes (properties)
color, font-family, font-size
CSS Border
CSS Padding
CSS Margin
Link to External CSS ( full URL, style_sheet ( html folder, same folder))
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<link rel="stylesheet" href="/html/styles.css">
<link rel="stylesheet" href="styles.css">
2. HTML Links
Hyperlinks
- 하이퍼링크는 링크를 클릭 시 다른 다큐먼트(화면)으로 점프 이동한다.
- 텍스트가 아닌, 이미지나 다른 HTML 엘리먼트로 존재.
(1) Syntax
- <a> 태그가 하이퍼링크 정의
<a href="url">link text</a>
- 방문하지 않은 링크는 파란색으로 표시,
- 방문했던 링크는 보라색으로 표시
- 액티브 시 빨간줄 및 빨간색으로 표시 (클릭하고 있을때)
(2) The target Attribute
- default로, 링크 페이지는 현재 창에서 열린다. 바꾸려면 target 어트리뷰트로 가능
- target 어트리뷰트는 _self, _blank, _parent, _top values를 가짐.
- _self - (기본값, 현재창) Default. Opens the document in the same window/tab as it was clicked
- _blank - (새 창) Opens the document in a new window or tab
- _parent - Opens the document in the parent frame
- _top - Opens the document in the full body of the window
(3) Absolute URLs, Relative URLs - URL
- URL 절대연결(직접링크) , 상대연결 (asp, css 등)
(4) 이미지를 링크로 활용할 시
- <img> 태그를 <a> 태그 안에 넣으면 된다.
(5) Email Address
'mailto:' 를 href 에 넣기.
<a href="mailto:someone@example.com">Send email</a>
(6) Button as a Link
JavaScript 코드가 필요.
<button onclick="document.location='default.asp'">HTML Tutorial</button>
(7) Link Titles
title - 추가정보, 마우스 올렸을때 보이는 부분
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
3. Links - Different Colors
(1) CSS를 활용해 링크 컬러도 바꿀 수 있다. (Default 에서 변경)
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
(2) 링크 버튼
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
* HTML Link Tags : <a>
'AI 서비스 기획 > 개발 코딩' 카테고리의 다른 글
| [HTML 7강] Favicon, Tables (0) | 2025.05.02 |
|---|---|
| [HTML 6강] Bookmarks, Image Maps, Background, Picture (0) | 2025.04.29 |
| [HTML 4강] Comments and Color (0) | 2025.04.25 |
| [HTML 3강] Text Formatting, Quotation and Citation Elements (0) | 2025.04.24 |
| [HTML 2강] Headings, Paragraphs, Style (0) | 2025.04.21 |