2024-02-21-오전:Eclipse첫실습
이클립스 실습
1. 단축키 추가
첨부자료 참고하기
2. Html 구조 간단 설명
1) HTML 언어 설명
- Hyper text : 문서를 연결해 주는 링크
- markup Language : 문서가 화면에 표시되는 형식을 나타내거나 태그를 이용하여 데이터의 논리적 구조를 명시하기 위한 규칙들을 정의한 언어의 일종.
- HTML : 웹 문서 작성을 위한 언어.
2) HTML 문서 트리 구조
3) HTML 노드 특성
3. 태그 실습
1) <h1>
- 제목 태그
- h1~h6까지만 가능
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
2) 문자 강조에 관련된 태그
- <p> : 하나의 문단을 만드는 태그
- <b> : 굵은 글씨
- <strong> : 중요한 내용
- <em> : 강조
<p>이 문장은 <i>이탤릭체</i>로 표시됩니다.</p>
<p>이 문장은 <b>굵은 글씨</b>로 표시됩니다.</p>
<p>이 문장은 <strong>중요한 내용</strong>을 담고 있습니다.</p>
<p>이 문장은 <em>강조된 내용</em>을 포함하고 있습니다.</p>
3)  
- 공백
<p>이 문장은 한 개의 공백을 유지합니다.</p>
<p>이 문장은 여러 개의 공백을 유지합니다.</p>
4) 개행문자
- 줄 바꾸기
<p>이 문장은 br태그를 적용하지 않은 문자입니다.</p>
<p>이 문장은 br태그를</p>
<p>적용하지 않은 문자입니다.</p>
<p>이 문장은 br태그를 <br>적용한 문자입니다.</p>
4) 미디어 태그
<section>
<span class="font3">미디어 태그</span>
<div class="align_cont">
<div>
<span class="font1">
미디어(이미지,오디오,비디오 등)을 표시하거나 재생하기 위해 사용되는 몇가지
</span>
</div>
<p><img src="" alt="이미지 태그"></p>
<p><audio src="" alt="오디오 태그" controls></audio></p>
<p><video src="" controls alt="비디오 태그"></video></p>
<p><iframe src="" alt="아이프레임 태그"></iframe></p>
</div>
</section>
5) CSS 선택자
- 선택자 설명 링크 참고 : https://www.nextree.co.kr/p8468/
6) 브라우저 디버깅
- 브라우저를 열어 F12누르고 화살표 아이콘을 누른후 확인하고픈 소스를 누르면 해당 소스의 코드가 하단에 표시됨.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.font1{font-size: 25px;}
.font2{font-size: 30px;}
.font3{font-size: 35px;}
#font4{}
section{margin-left: 30px;}
.align_cont{}
.align_cont p
{
width:300px;
height: 300px;
}
.align_cont p *{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<section>
<span class="font3">미디어 태그</span>
<div class="align_cont">
<div>
<span class="font1">
미디어(이미지,오디오,비디오 등)을 표시하거나 재생하기 위해 사용되는 몇가지
</span>
</div>
<p><img src="https://images.unsplash.com/photo-1608848461950-0fe51dfc41cb?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D" alt="이미지 태그"></p>
<p><audio src="" alt="오디오 태그" controls></audio></p>
<p><video src="C:\Users\ksmart\Downloads/cat.mp4" controls alt="비디오 태그"></video></p>
<p><iframe src="https://tt.hancomtaja.com/?pr=SW" alt="아이프레임 태그"></iframe></p>
</div>
</section>
</body>
</html>
7) 웹 표준
- 웹 표준 검사 사이트 : https://validator.w3.org/
- 웹 표준 검사 크롬 확장 도구 : openwax
8) 목록 태그
- ul과 li를 대부분 사용
<section>
<span class="font3">목록 태그</span>
<div>
<span class="font1"> 목록을 생성하는 데 사용되는 태그 </span>
</div>
Unordered List(순서가 없는 목록)
<u1>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</u1>
Ordered List(순서가 있는 목록)
<o1>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</o1>
Definition List(용어와 정의 목록)
<d1>
<dt>용어 1</dt>
<dd>정의 1</dd>
<dt>용어 2</dt>
<dd>정의 2</dd>
</d1>
</section>
9) 하이퍼링크 태그
- index.html
<section>
<span class="font3">링크 태그</span>
<div>
<span class="font3"> 클릭하여 링크로 이동 </span>
</div>
<a
href="D:\hansonglee\ksmartHtml\workspace\eduHtml\src\main\webapp\WEB-INF\index2.html">이동</a>
</section>
-index2.html
<span>
<a href="">이동</a>
2페이지 입니다.
</span>
10) 참고 사이트
- html, css 연습 사이트 : https://www.w3schools.com/
- 네이밍 참고 사이트 : https://www.curioustore.com/#!/
- 브라우저별 css 호환성 확인 사이트 : https://caniuse.com/
- 스크립트 + css 효과 참고사이트 : https://wsss.tistory.com/
- 벤치마킹 사이트 : gdweb.co.kr