HTML - 기본 선택자
-
- CSS 속성들
- https://developer.mozilla.org/ko/docs/Web/CSS/Reference
-
폰트 스타일 설정하기 EX ) <h1 style = "font-weight:bold; color:blue;"></h1>
-
style 태그를 이용한 속성의 집중화 -> 여러개 태그에서동일한 스타일을 가져와야할때
ex) ```html
-> 선택자라고 한다. 한번 태그로 h1의 모든 태그가 동일한 스타일이 적용된다.
- 셀렉터 -> 태그명, 아이디, 클래스가있다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#name1{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a href ="../index.html">홈</a>
<a href ="list.html">공지사항목록</a>
<a href ="../member/login.html">로그인</a>
<a href ="../member/signup-agree.html">회원가입</a>
<h1>공지사항 목록 페이지</h1>
<h1><a href="../index.html">강깸 온라인</a></h1>
<header>
<section>
<h1 class ="g1" id ="name1">서두</h1>
<nav>
<h1>메인메뉴</h1>
<ul>
<li><a href="" class ="g1" id ="name2">학습가이드</a></li>
<li><a href="">강좌선택</a></li>
<li><a href="">AnswerIs</a></li>
</ul>
</nav>
<section>
<h1>강좌검색폼</h1>
<form>
<fieldset>
<legend>검색입력필드</legend>
<lable>과정검색</lable>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>
</section>
<nav>
<h1>회원메뉴</h1>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../member/login.html"></a>로그인</li>
<li><a href="../member/signup-agree.html">회원가입</a></li>
</ul>
</nav>
<nav>
<h1>바로가기메뉴</h1>
<ui>
<li><a href="">마이페이지</a></li>
<li><a href="list.html">고객센터</a></li>
</ui>
</nav>
</section>
</header>
<aside>
<h1>고객센터</h1>
<nav>
<h1>고객센터메뉴</h1>
<ul>
<li><a href="">공지사항</a></li>
<li><a href="">자주하는 질문</a></li>
<li><a href="">수강문의</a></li>
<li><a href="">이벤트</a></li>
</ul>
</nav>
<nav>
<h1>협력업체</h1>
<ul>
<li><a href="">노트펍스</a></li>
<li><a href="">나무랩연구소</a></li>
</ul>
</nav>
</aside>
<main>
<section>
<h1>공지사항</h1>
<section>
<h1>경로</h1>
<ol>
<li>home</li>
<li>고객센터</li>
<li>공지사항</li>
</ol>
</section>
<section>
<h1>공지사항 검색폼</h1>
<form>
<fieldset>
<legend>검색어 입력필드</legend>
<lable>검색분류</lable>
<select>
<option value="title">제목</option>
<option value="writer">작성자</option>
</select>
<lable>검색어</lable>
<input type="text">
<input type="submit" value="검색">
</fieldset>
</form>
</section>
<section>
<h1>공지사항목록</h1>
<table border ="1">
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">안녕하세요. 뉴렉처선생님강의들으면서 연습하고있습니다.</a></td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">html 수업 듣고있는데 너무 재밋어요.</a> </td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
<tr>
<td>3</td>
<td><a href="detail.html">어떻게 변화가될지기대됩니다.</a></td>
<td>kangkkaem</td>
<td>2022-01-09</td>
</tr>
</table>
</section>
<section>
<h1>페이지정보</h1>
<div>
1 / 1 pages
</div>
</section>
<nav>
<h1>페이저</h1>
<div>
<div>이전</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>다음</div>
</div>
</nav>
</section>
</main>
<footer>
<section>
<h1>회사정보</h1>
<section>
<h1>소유권자정보</h1>
<dl>
<dt>주소 : </dt>
<dd>서울특별시 마포구</dd>
<dt>관리자이메일:</dt>
<dd>kangkkaem@naver.com</dd>
<dt>사업자 등록번호 :</dt>
<dd>123-45-67890</dd>
<dt>통신 판매업:</dt>
<dd>신고제 2020-서울-0000 호</dd>
<dt>상호:</dt>
<dd>강깸</dd>
<dt>대표:</dt>
<dd>kangkkaem</dd>
<dt>전화번호 :</dt>
<dd>123-456-7899</dd>
</dl>
</section>
<section>
<h1>저작자연락처</h1>
<div>
Copyright ⓒ kangkkaem.com 2021-2022 All Right Reserved. Contact admin@kangkkame.com
</div>
</section>
</section>
</footer>
</body>
</html>
style 색이름을 변경했고 클래스를 줘서 묶어서 스타일을 줄수있다.
.은 클래스 / #은 아이디
사진은 id name1에 스타일을 줬다.
댓글남기기