[1] Internal Linking
- 같은 문서 내에서 위치 간의 이동을 가능하게 하는 방식이다.
id속성을 사용해 특정 요소에 고유 식별자를 부여하고,href에#id명을 사용하여 해당 요소로 이동시킨다.
1) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Links</title>
</head>
<body>
<h1 id="features">The Best Features of the Internet</h1>
<p><a href="#bugs">Go to <em>Favorite Bugs</em></a></p>
<ul>
<li>You can meet people from countries around the world.</li>
<li>Access to new media as it becomes public:
<ul>
<li>New games</li>
<li>New applications
<ul>
<li>For Business</li>
<li>For Pleasure</li>
</ul>
</li>
<li>Search Engines</li>
</ul>
</li>
</ul>
<h1 id="bugs">My 3 Favorite Bugs</h1>
<p><a href="#features">Go to <em>Favorite Features</em></a></p>
<ol>
<li>Fire Fly</li>
<li>Gal Ant</li>
<li>Roman Tic</li>
</ol>
</body>
</html>2) 설명
id: 특정 HTML 요소에 고유한 식별자를 부여하여 다른 위치에서 해당 요소로 이동시킨다.<a href="#id명">: 링크를 클릭하면 지정된id요소로 이동한다.- 용도: 긴 페이지에서 특정 섹션으로 바로 이동하거나, 목차 기능을 구현하는 데 유용하다.
[2] Meta element
- HTML 문서의 메타데이터를 정의하는 요소이다.
- 이 요소는 웹 크롤러나 검색 엔진이 사이트를 분류하는 데 중요한 역할을 한다.
meta요소는 페이지 정보, 설명, 키워드, 인코딩 방식 등을 제공하여 사이트의 SEO(검색 엔진 최적화) 성능을 향상시킨다.
1) 형태
<meta name="이름" content="데이터" />2) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<meta name="keywords" content="web page, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, deitel" />
<meta name="description" content="This website will help you learn the basics of XHTML and web page design through the use of interactive examples and instruction." />
</head>
<body>
<h1>Welcome to Our Website!</h1>
<p>We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>.</p>
</body>
</html>3) meta element가 필요한 이유
-
SEO 최적화:
meta태그는 검색 엔진에 페이지에 대한 정보를 제공하여, 사이트가 적절한 검색 결과에 노출되도록 돕는다.keywords와description속성은 검색 엔진이 페이지 주제를 파악하는 데 중요한 역할을 한다. -
브라우저 정보 제공:
meta charset="UTF-8"과 같은 인코딩 설정을 통해 문서가 올바르게 렌더링되도록 한다. -
사이트 관리:
meta태그를 통해 페이지의 키워드와 설명을 구조적으로 제공하면, 사이트 관리가 더 용이해진다.
4) 추가 내용
- viewport 설정:
meta name="viewport"태그는 모바일 기기에서 사이트가 올바르게 보이도록 설정하는 중요한 메타 태그이다. 반응형 웹 디자인을 구현할 때 필수적이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">[3-1] Inline Style Sheet
- HTML 요소에 직접 스타일을 적용하는 방식이다.
- 개별 요소에
style속성을 사용해 CSS 규칙을 지정한다. - 이 방식은 특정 요소에만 한정적으로 스타일을 적용할 때 유용하다.
- 하지만 대규모 스타일링에는 비효율적이므로, 간단한 경우에 사용된다.
1) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styles</title>
</head>
<body>
<p>This text does not have any style applied to it.</p>
<p style="font-size: 20pt;">This text has the <em>font-size</em> style applied to it, making it 20pt.</p>
<p style="font-size: 20pt; color: blue;">This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt and blue.</p>
</body>
</html>2) 설명
- 용도: 특정 요소에만 개별 스타일을 적용하여 빠르게 스타일링하고자 할 때 유용하다.
- 단점: 코드가 지저분해질 수 있으며, 여러 요소에 일관된 스타일을 적용할 경우에는 관리가 어려워진다. 동일한 스타일을 여러 요소에 적용하려면 별도의 CSS 파일이나 Embedded 방식이 더 적합하다.
[3-2] Embedded Style Sheet
- 문서 내부에
<style>태그를 사용하여 CSS 규칙을 정의하는 방식이다. - HTML 파일의
<head>태그 내에 스타일을 작성하며, 문서 전체에 적용된다. - 전체적인 페이지의 스타일을 관리하기에 적합하며, 여러 요소에 동일한 스타일을 적용할 수 있다.
1) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embedded Styles</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 16pt;
color: black;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to Embedded Styles</h1>
<p>This paragraph is styled using an embedded style sheet.</p>
<p class="highlight">This paragraph has a special highlighted style.</p>
</body>
</html>2) 설명
- 용도: 한 문서 내에서 다양한 요소에 스타일을 적용하고자 할 때 적합하다. 여러 HTML 요소에 일관된 스타일을 쉽게 적용할 수 있다.
- 장점: 외부 CSS 파일을 사용하지 않고도 문서 내부에서 스타일을 통합적으로 관리할 수 있다.
- 단점: 여러 문서에서 동일한 스타일을 적용하려면 각각의 문서에 동일한 스타일을 작성해야 하므로, 외부 스타일 시트가 더 효율적이다.
[4-1] id selector
- 특정한 HTML 요소에 고유한 스타일을 적용하기 위해 사용된다.
- 각 HTML 요소에 하나의
id만 부여할 수 있으며, 해당id를 선택하여 스타일을 지정한다. id선택자는 문서 내에서 유일해야 하므로, 페이지의 특정 요소를 스타일링하거나 특정 작업을 적용하는 데 적합하다.
1) 사용법
#id명 { 스타일 규칙 }형식으로 사용한다.- HTML 요소에서
id="고유명"을 지정하고, CSS에서#고유명을 사용해 해당 요소에 스타일을 적용한다.
2) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Selector Example</title>
<style>
#header {
background-color: lightgray;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<p>This paragraph is not affected by the ID selector.</p>
</body>
</html>[4-2] class selector
- 여러 HTML 요소에 공통된 스타일을 적용하기 위해 사용된다.
class선택자는 문서 내에서 여러 번 사용할 수 있어, 동일한 스타일을 여러 요소에 적용하거나 특정 그룹의 요소들에 스타일을 통일하고자 할 때 유용하다.
1) 사용법
.class명 { 스타일 규칙 }형식으로 사용한다.- HTML 요소에서
class="공통명"을 지정하고, CSS에서.공통명을 사용해 해당 요소들에 스타일을 적용한다.
2) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector Example</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">This paragraph is styled using the class selector.</p>
<p class="highlight">Another paragraph with the same class applied.</p>
<p>This paragraph does not have the class applied to it.</p>
</body>
</html>3) 차이점
id는 문서 내에서 유일하게 사용되며, 특정 하나의 요소에 스타일을 적용할 때 사용한다.class는 여러 요소에 반복적으로 적용할 수 있으며, 공통된 스타일을 그룹화하여 여러 요소에 동일한 스타일을 적용할 때 사용한다.
수정된 내용을 아래와 같이 제공한다.
[5] :선택자
- 특정 조건을 만족하는 요소를 선택하여 스타일을 적용하는 CSS 선택자이다.
- 이 선택자는 주로 사용자 인터랙션에 따라 스타일을 변화시키거나, 특정 상태에 있는 요소에 대해 스타일을 적용할 때 사용된다.
1) .nodec
- 앵커 태그(
<a>)에서 기본적으로 설정된 장식(예: 밑줄)을 제거하는 클래스 선택자이다. - 이 클래스를 사용하면 링크가 클릭되거나 마우스 오버되지 않을 때의 기본 스타일을 변경할 수 있다.
- 주로 사용자가 링크의 외관을 사용자 정의하고자 할 때 사용된다.
사용법
.nodec {
text-decoration: none;
}예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Decoration Example</title>
<style>
.nodec {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<p>
<a class="nodec" href="https://www.example.com">This is a link with no underline.</a>
</p>
</body>
</html>2) :hover
- 마우스 포인터가 특정 요소 위에 있을 때 스타일을 변경하는 선택자이다.
- 사용자 인터페이스의 일부로서 사용자 경험을 향상시키기 위해 자주 사용된다.
- 버튼이나 링크의 시각적 피드백을 제공하여 클릭 가능한 요소임을 강조하는 데 유용하다.
(1) 사용법
selector:hover {
스타일 규칙;
}(2) 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Example</title>
<style>
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<p>
<a href="https://www.example.com">Hover over this link to see the effect.</a>
</p>
</body>
</html>요약
:noddec선택자는 링크의 기본 장식을 제거하여 사용자 정의 스타일을 적용하는 데 사용된다.:hover선택자는 요소에 마우스 포인터가 있을 때 시각적 피드백을 제공하여 사용자 경험을 향상시킨다.
[6] External Linking
: External Linking이란 외부 파일에 저장된 CSS 스타일 시트를 HTML 문서에 연결하여 스타일을 적용하는 방식이다.
- 이를 통해 여러 HTML 문서에서 동일한 스타일을 일관되게 관리할 수 있으며, 파일을 분리해 웹사이트 구조를 체계적으로 관리할 수 있다.
1) 형태
<link rel = "stylesheet" type = "text/css" href = "style.css"/>2) 예시
(1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1 id = "title">Welcome to Our Website!</h1>
<p id = "content">We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>.</p>
</body>
</html>(2) style.css
#title {
color : blue;
}
#content {
color : gray;
}
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com