0807 HTML5 수업
0807 수업
0807/index.html
설명 : 메인 인덱스 역할을 한다. 다양한 HTML과 CSS 예제로 이동할 수 있는 링크가 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
<body>
<h1>HTML and CSS Tutorial</h1>
<ul>
<li><a href="align.html">Text Alignment</a></li>
<li><a href="background.html">Backgrounds</a></li>
<li><a href="selector1.html">CSS Selectors - Part 1</a></li>
<!-- More links to other files -->
</ul>
</body>
0807/align.html
텍스트와 이미지를 정렬하는 방법을 다룬다. CSS를 사용해 중앙, 좌우 정렬하는 방법을 설명하고 있다.
주요 코드:
1
2
3
4
5
<body>
<h1 class="center">Centered Heading</h1>
<p>This paragraph is left-aligned by default.</p>
<p class="right">This paragraph is right-aligned.</p>
</body>
0807/background.html
이 파일에서는 배경 색상과 이미지를 설정하는 방법을 다룬다. 배경을 꾸미는 다양한 방법을 소개하고 있다.
주요 코드:
1
2
3
4
<body>
<h1>Background Example</h1>
<div class="background-image"></div>
</body>
0807/selector1.html
CSS 클래스 선택자(class selector)를 사용하는 방법을 다룬다. 특정 클래스가 적용된 요소에 스타일을 지정할 수 있다.
주요 코드:
1
2
3
4
5
<body>
<h1>CSS Class Selector</h1>
<p class="highlight">This text is highlighted using a class selector.</p>
<p>This text is not highlighted.</p>
</body>
0807/selector2.html
CSS 아이디 선택자(id selector)를 사용하는 방법을 다룬다. 특정 아이디가 적용된 요소에 스타일을 지정할 수 있다.
주요 코드:
1
2
3
4
5
<body>
<h1>CSS ID Selector</h1>
<p id="unique">This text is styled using an ID selector.</p>
<p>This text is not styled by the ID selector.</p>
</body>
0807/selector3.html
CSS 자손 선택자(descendant selector)를 사용하는 방법을 다룬다. 특정 요소의 자식 요소에 스타일을 지정할 수 있다.
주요 코드:
1
2
3
4
5
6
7
<body>
<h1>CSS Descendant Selector</h1>
<div class="container">
<p>This text is styled using a descendant selector.</p>
</div>
<p>This text is not affected by the descendant selector.</p>
</body>
0807/selector4.html
CSS 자식 선택자(child selector)를 사용하는 방법을 다룬다. 바로 위에 있는 부모 요소의 자식에게만 스타일을 적용할 수 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
<body>
<h1>CSS Child Selector</h1>
<div class="parent">
<p>This paragraph is directly under the parent and styled using a child selector.</p>
</div>
<div class="parent">
<div>
<p>This paragraph is not directly under the parent and is not styled.</p>
</div>
</div>
</body>
0807/selector5.html
CSS 인접 형제 선택자(adjacent sibling selector)를 사용하는 방법을 다룬다. 바로 다음에 위치한 형제 요소에 스타일을 지정할 수 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
<body>
<h1>CSS Adjacent Sibling Selector</h1>
<h2>Heading</h2>
<p>This paragraph is styled using an adjacent sibling selector.</p>
<h2>Another Heading</h2>
<div>
<p>This paragraph is not adjacent and therefore not styled.</p>
</div>
</body>
0807/selector6.html
CSS 일반 형제 선택자(general sibling selector)를 사용하는 방법을 다룬다. 동일한 부모를 가진 모든 형제 요소에 스타일을 적용할 수 있다.
주요 코드:
1
2
3
4
5
6
<body>
<h1>CSS General Sibling Selector</h1>
<h2>Heading</h2>
<p>This paragraph is styled using a general sibling selector.</p>
<p>This paragraph is also styled as it is a sibling.</p>
</body>
0807/selector7.html
CSS 속성 선택자(attribute selector)를 사용하는 방법을 다룬다. 특정 속성을 가진 요소에 스타일을 지정할 수 있다.
주요 코드:
1
2
3
4
5
<body>
<h1>CSS Attribute Selector</h1>
<a href="https://example.com" target="_blank">This link is styled using an attribute selector.</a>
<a href="https://example.com">This link is not styled by the attribute selector.</a>
</body>
0807/selector8.html
CSS 가상 클래스 선택자(pseudo-class selector)를 사용하는 방법을 다룬다. 특정 상태에 있는 요소에 스타일을 적용할 수 있다.
주요 코드:
1
2
3
4
<body>
<h1>CSS Pseudo-Class Selector</h1>
<a href="#">Hover over this link to see the pseudo-class selector in action.</a>
</body>
0807/css/style.css
모든 HTML 파일에 적용되는 CSS 스타일을 정의한 파일이다. 텍스트 정렬, 배경 설정, 선택자 스타일링 같은 것들이 포함되어 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
0807-1/datatype.html
이 파일에서는 HTML에서 다양한 데이터 타입을 어떻게 다루는지 보여준다. <input> 태그를 사용해 텍스트, 숫자, 날짜, 이메일 입력 필드를 만드는 방법을 다루고 있다. 각 데이터 타입에 대한 예제를 살펴볼 수 있다.
주요 코드:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<h1>HTML Data Types</h1>
<form>
<label for="text">Text:</label>
<input type="text" id="text" name="text"><br><br>
<label for="number">Number:</label>
<input type="number" id="number" name="number"><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
0807-1/index.html
이 페이지는 datatype.html로 이동할 수 있는 링크를 제공한다. HTML 데이터 타입에 대한 예제로 안내하는 역할을 한다.
주요 코드:
1
2
3
4
5
<body>
<h1>Welcome to the HTML Data Types Example</h1>
<p>This page provides an overview of different data types in HTML.</p>
<a href="datatype.html">Go to Data Types Example</a>
</body>