-
[HTML] 002. Eclipse 설정, HTML 관찰(태그 관찰)SsY/Class 2023. 5. 3. 17:49728x90
Eclipse 설정
더보기Windows - Preferences
WebApp01
- FirstHTML.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>문서의 제목이 들어가는 부분</title> </head> <body> 문서의 내용이 들어가는 부분(이름) </body> </html>
- 어제 만들어둔 서버 돌아가는지 확인
- 매번 위와 같이 서버를 돌리면 힘들기 때문에
Ctrl+F11 누르고 들어가서 Finish
내용 고친 이후에는 저장 후 열려있는 브라우저에서 F5(새로고침) 하면 확인 가능
- Test001
- html 관찰 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test001.html</title> </head> <body> <!-- 이름 --> <!-- 문단 구성 --> <p>항상 그래왔던 것 처럼...</p> <!-- 개행테스트 --> 우리는 익숙해지기 위한 길목에서 <br><BR> 첫 번재 모퉁이를 돌기 위해<BR> 노력하고 있습니다.<br/> 후회 없도록 열심히 합시다.<br><br><br><br> <div> 첫 번째 div 영역 <h1>h1~h6 는 제목을 표현할 때 사용한다.</h1> <h2>숫자가 늘어갈수록 더 작은 개념의 제목을 표현하기 위해 사용된다.</h2> <h3>더 작은 제목이라 함은 보여지는 크기도 포함하고 있지만</h3> <h4>실무적으로 웹 표준을 근거로 사용할 때에는 의미를 담아 사용해야한다.</h4> <h5>여섯 단계로 나뉘며</h5> <h6>그 외의 단계는 존재하지 않는다.</h6> </div> <div> 두 번째 div 영역<br> br 태그(엘리먼트)는 개행을 할 때 사용한다.<br> <p>p 태그(엘리먼트)는 문단을 지정하고자 할 대 사용한다. 문장 여러 개를 감싸서 단락을 표현할 때 주로 사용하게 된다.</p> </div> <br><br> <div> 세 번째 div 영역<br> <p>span 태그(엘리먼트)는 문장의 일부 단어나 문장을 특별한 형태로 처리할 때 사용한다.<br> 일반적으로 <span>CSS</span>와 같이 표현된다.</p> </div> <br><br> </body> </html>
- 주석 처리/해제 하는 법
주석처리할 블록 드래그 후 Ctrl + Shift + /
주석해제할 블록 드래그 후 Ctrl + Shift + \
※ 포트 번호 (채널 개념)
- 하나의 pc에 여러 서버가 있을 때 이용하려는 서버마다 번호가 있으면 트래픽 없이 바로 이용할 수 있음
※ 개인 PC를 서버로 사용하지 못하는 이유?
- 공인IP 를 사용하지 않으면 사설의 경우 여유번호를 그때 그때 할당해주므로 매번 IP 주소가 옮겨다니게 됨
- PC가 24시간 켜져있어야함 (저전력 전용 필요)
- 도메인 ()
※ 도메인은 가장 작은 디렉토리 부터 > 큰 디렉토리 순서로 나열하게 된다.
- 다만 읽을때는 도메인을 담당하는 것에서 뒤에서부터 읽어오긴 함 : DNS(Domain Name Server)
→ 한 주소를 찾기 위해서 수많은 통신이 오고감
ex)
http://localhost:8090/WepApp01/Test001.html
========================
http://www.diver.ac.kr(/default.html) (파일경로)
== 가장 큰 폴더 -- 각 폴더마다 관리하는 서버가 있어 접근, 조회 등 우측부터
- <p></p> 태그(엘리먼트)
- 문단 처리
- <br> 태그
- 개행
- 아래와 같이 가능하긴 하지만, 태그는 최대한 소문자로 사용하는 것이 좋다.
- xml 때문에 <br/> 하고 쓰던 때도 있었으나 굳이 이렇게 쓸 필요는 없다
- <h1></h1> ~ <h6></h6>
- 제목 태그
- <span></span>
- 라인단위 태그
- style 은 css 가 적용되는 영역
- css 에서 속성을 구분하기 위해서는 구분자로서 ; (세미콜론) 사용.
종결자 아니라서 마지막에는 입력하지 않아도 가능하나 다음을 위해서 입력하는것을 권장
하나의 속성이기 때문에 ,(콤마) 사용 안함.
- Test002
- HTML 목록 관련 태그 관찰 실습
새 파일 생성하는 법
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test002.html</title> </head> <body> <div> <h1>목록 관련 태그</h1> <hr> </div> <div> <!-- ※ 관찰 → 앞에 띄어쓰거나 들여쓰기를 하지 않은 상황 --> <ol> <li>텍스트 관련 태그</li> <li>목록 관련 태그</li> <li>다른 여러가지 태그</li> </ol> <!-- 순서 있는 목록 --> <ol> <li>텍스트 관련 태그</li> <li>목록 관련 태그</li> <li>다른 여러가지 태그</li> </ol> <!-- 순서 없는 목록 --> <ul> <li>텍스트 관련 태그</li> <li>목록 관련 태그</li> <li>다른 여러가지 태그</li> </ul> <!-- ※ 관찰 → 이들 사이에는 개행 태그(br)를 넣지 않았음 --> <dl> <dt>HTML 태그의 종류(중간제목)</dt> <dd>텍스트 관련 태그</dd> <dd>목록 관련 태그</dd> <dd>다른 여러가지 태그</dd> </dl> </div> </body> </html>
- <hr> 태그
- 단독 태그
- 줄, 수평선
- <ol></ol> : 순서가 있는 목록
<ul></ul> : 순서가 없는 목록
<li></li> : 목록 --
<dt></dt> :
<dd></dd> :
- Test003
- body 태그에 관한 속성 관찰 실습
- body 태그에 바로 꾸미는 것은 올바르지는 않지만 가능하다는 것을 확인하기 위한 절차임
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test003.html</title> </head> <body bgcolor="blue" text="white" background="images/bgbg.jpg" leftmargin="100" topmargin="100"> <div> <h1>body 태그에 관한 속성 살펴보기</h1> <hr> <!-- 단독태그, 수평선 --> </div> <div> 본문 내용<br> 각자 배경색과 배경 그림도 바꾸어 보고...<br> 본문에서 사용하는 글자색과 여백도 설정해보자.<br> </div> </body> </html>
- body 태그에 속성 지정
- 올바른 사용 XXXXXX (웹 규약에 의해 CSS에서 적용하는 것이 올바름)
- span 태그의 css와는 다르게 ' = ' 를 사용해서 지정, 별도의 구분자 없음
- 속성이름은 그냥 적고, 속성값은 " " 을 사용
- 하나의 엘리먼트에 들어가는 속성값은 하나의 공백을 통하여 구분
- Test004
- 데이터 입력 관련 태그
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test004.html</title> </head> <body> <div> <h1>데이터 입력 관련 태그</h1> <hr> </div> <div> <form> 이름 <input type="text"><br> 국어 <input type="text"><br> 영어 <input type="text"><br> 수학 <input type="text"><br> <br> <input type="button" value="결과"> <input type="reset" value="취소"> <br> 총점 <input type="text"> 평균 <input type="text"> <br> </form> </div> </body> </html>
- <input>
- type 지정을 통해서 나타나는 모양(text, button 등)을 지정해줄 수 있음 -> 컨트롤의 모양이 달라진다
- 버튼은 value 값에 기능 이름을 넣어주면 표시 됨
- <form></form> 태그
- 데이터를 받아서 보내기 위해서 사용하는 태그로 위의 input 과 함께 사용
- 기능/동작은 자바스크립트로 처리한다.
자바스크립트까지 맛보기
- Test005
- Test004 복사 후 css 영역 채우기
파일 복사하기
더보기복사할 파일을 해당 디렉토리에 끌어다 놓으면 된다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test005.html</title> <style type="text/css"> * { font-size: 20pt; font-weight: bold; font-family: 맑은 고딕; color: #334433; } </style> </head> <body> <div> <h1>데이터 입력 관련 태그</h1> <hr> </div> <div> <form> 이름 <input type="text"><br> 국어 <input type="text"><br> 영어 <input type="text"><br> 수학 <input type="text"><br> <br> <input type="button" value="결과"> <input type="reset" value="취소"> <br> 총점 <input type="text"> 평균 <input type="text"> <br> </form> </div> </body> </html>
- <style></style>
- css 의 영역
- #(숫자6자리) : RGB 값을 입력하게 됨 (RRGGBB 를 섞는다는 느낌)
- Test006
- Test005 복사 후 Script 영역 채우기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test006.html</title> <!-- css의 영역 --> <style type="text/css"> * { font-size: 20pt; font-weight: bold; font-family: 맑은 고딕; color: #334433; } </style> <!-- script의 영역 --> <script type="text/javascript"> // 자바스크립트 함수 정의 function actionPerformed() { //테스트 //alert("함수 호출 확인~!!!"); //-- 태그 = 엘리먼트 /* //-- 해당문서 가져온다 여기까지하면 상자객체 // -------- -------------- ----- document.getElementById("kor").value; //.value 를 붙여 안의 값만 가져옴 */ // 자바스크립트에서의 데이터 타입은 var(변수)임을 알려주기만 하면 됨 // 넣는 것은 간단하나 꺼내오는 때에 데이터타입을 확인받을 수 없다. var vKor = document.getElementById("kor").value; var vEng = document.getElementById("eng").value; var vMat = document.getElementById("mat").value; var vTot = 0; // 총점 변수선언 및 초기화 var vAvg = 0; // 평균 변수선언 및 초기화 // 보이는 것은 숫자타입으로 보이나 입력받을 때는 문자값으로 입력 받게 됨 // vTot = vKor + vEng + vMat; // 90 80 70 → "908070" // js에는 객체의 개념은 있으나 클래스의 개념은 X // 그러나 alert 처럼 내장 된 함수들이 있음 // vTot = parseInt(vKor + vEng + vMat); --(X) vTot = parseInt(vKor) + parseInt(vEng) + parseInt(vMat); vAvg = Math.round(vTot/3); // Math 객체 안의 round 함수사용 // 테스트 // alert(vTot); // 박스 객체안의 값을 설정해준다 document.getElementById("tot").value = vTot; document.getElementById("avg").value = vAvg; } </script> </head> <body> <div> <h1>데이터 입력 관련 태그</h1> <hr> </div> <div> <form> 이름 <input type="text" id="name"><br> 국어 <input type="text" id="kor"><br> 영어 <input type="text" id="eng"><br> 수학 <input type="text" id="mat"><br> <br> <!-- 결과 버튼 클릭 이벤트가 발생했을 때 → 『on』 + 『click』 → 『onclick』 --> <!-- 『actionPerformed()』 라는 자바스크립트 함수 호출 --> <input type="button" value="결과" onclick="actionPerformed()"> <input type="reset" value="취소"> <br> 총점 <input type="text" id="tot"> 평균 <input type="text" id="avg"> <br> </form> </div> </body> </html>
- onclick
- 클릭 이벤트 발생
- 이벤트 발생시 적용될 함수 테스트
- 함수를 처리하기 위해서 컨트롤 영역에서 입력한 값들을 데려와야함
- 입력받은 값들을 하나하나 객체화 시켜서 가져와야 컨트롤을 할 수 있음
→ BOM (브라우저 오브젝트 모델) (모델링기법을) 적용시켜야 함
- 또한 입력된 문서 자체도 문서 객체 모델 형식으로 컨트롤해야함
→ DOM (도큐먼트 오브젝트 모델) 적용 시켜야 함
- 창으로 뜨는게 아니라 칸에 뜨도록 만들고 싶음
→ 설정한 id 에 다시 값을 넣어준다
- 자바스크립트에서 값을 받아올 때는 문자열로 받아옴
※ Test004 ~ 006 을 통해서
먼저 html 로 틀을 잡고, css를 적용한 후 , js 의 영역으로 넘어가 적용시키는 것을 확인할 수 있다.
- Test007
- 수평선 넣기 / 공백 넣기 관찰 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test007.html</title> </head> <body> <div> <h1>수평선 넣기 / 공백 넣기</h1> <hr> </div> <div> 수평선을 사용해보자 <hr size="20" color="red"> <br><br> 음영선이 없는 수평선 <hr size="2" noshade="noshade"> <br><br> 수평선의 수평 길이 설정 <hr size="5" width="400" align="right"> <hr size="5" width="200" align="right"> <br><br> 수평선의 정렬 <hr size="5" width="50%" align="left"> <hr size="7" width="50%" align="right"> <hr size="9" width="50%" align="center"> <hr size="9" width="50%"> </div> <br><br> <div> 공백 발생<br> 공백 공백<br> 공백 공백<br> </div> </body> </html>
- <font></font> 태그
- Test008
- 기타 글꼴 꾸미기 태그 관찰 실습
- 위첨자, 아래첨자는 사용해도 괜찮으나 가급적이면 나머지는 사용하지 말것을 권장
(시각적 효과 + 의미가 있기 때문에 사용해도 괜찮음)
(유지보수를 하면서 과거 문법 내용에서 확인 가능하므로 배우는 것)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test008.html</title> </head> <body> <div> <h1>기타 글꼴 꾸미기 태그</h1> <hr> </div> <!-- check --> <!-- 쓰지 말 것 --> <div> 기본텍스트<br><br> <b>글자를 굵게(진하게) 설정하기</b><br><br> <i>이텔릭체(기울여)로 설정하기</i><br><br> <u>밑줄 긋기</u><br><br> <tt>타이프체로 설정하기</tt><br><br> <small>현재 글자 크기보다 한 단계 줄이기</small><br><br> <big>현재 글자 크기보다 한 단계 키우기</big><br><br> <strong>글자 강조하기</strong><br><br> <s>취소선 넣기</s><br><br> <em>강조하기, 글자 비스듬히 출력</em> 아래 첨자 테스트하기<sub>아래첨자</sub><br><br> 위 첨자 테스트하기<sup>위첨자</sup><br><br> </div> </body> </html>
- Test009
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test009.html</title> </head> <body> <div> <h1>pre 태그 / xmp 태그</h1> <hr> </div> <div> 나 보기가 역겨워 가실 때에는 말 없이 고이 보내드리오리다. <br><br> <pre> <font color="blue">나 보기가</font> 역겨워 가실 때에는 말 없이 고이 보내드리오리다. </pre> <br><br> <xmp> <font color="red">나 보기가 </font> 역겨워 가실 때에는 말 없이 고이 보내드리오리다. </xmp> <br><br> </div> </body> </html>
- 사용자가 입력한 내용 그대로를 출력해주는 태그
<pre></pre> 태그
<xmp></xmp> 태그
- 두 태그의 차이점
- Test010
- 이미지 다루기
- 종횡비에 주의하세요
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test010.html</title> </head> <body> <div> <h1>이미지 다루기</h1> <hr> </div> <div> <h2>이미지 정렬을 확인해 보도록 하자</h2> <img src="images/img_02.gif"> <img src="images/img_02.gif" width="100"> <img src="images/img_02.gif" height="50"> <!-- 주의할점 --> <!-- 넓이 설정시 높이 자동변경, 높이 설정시 넓이도 자동변경 됨 --> <img src="images/img_02.gif" width="100" height="50"> <!-- 이렇게 둘 다 설정하게 되면 원본 종횡비가 틀어질 수 있다. --> <br><br> <img src="images/img_02.gif" width="100" border="10"> <!-- 이미지에 테두리가 생김 --> <img src="images/img_02.gif" width="100" border="10" vspace="200" hspace="100" align="bottom"> 위 아래 정렬 실습 </div> </body> </html>
- Test011 & Test011_1
- 하이퍼링크 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test011.html</title> </head> <body> <div> <h1>하이퍼링크 실습</h1> <hr> </div> <div> 링크 이동 페이지~!! </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test011_1.html</title> </head> <body> <div> <h1>하이퍼링크 실습</h1> <hr> </div> <div> <a href="C:\WebStudy\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\WebApp01\Test011.html">절대경로 지정 방식</a> <!-- 단, 위의 경로는 보안상 접근 불가능한 경로임 --> <br><br> <a href="./Test011.html">상대경로 지정 방식</a> <!-- 주소 가장 앞에 나오는 『.』 이라 함은 Test011_1.html 해당 파일이 존재하는 경로를 의미 --> <br><br> <a href="Test011.html">상대경로 지정 방식</a> <br><br> <!-- Test011_1.html 해당 파일이 같은 디렉토리에 들어있을 경우에 ./ 생략하여 사용가능 --> <a href="http://localhost:8090/WebApp01/Test011.html">웹 상의 주소 지정 방식</a> <!--<a href="http://www.test.com/Test011.html">웹 상의 주소 지정 방식</a> --> <br><br> <a name="top">책갈피 위치</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a href="#top">책갈피 위치로 이동하기</a> </div> </body> </html>
- 경로확인
- <a></a> 태그
- 외부링크
<a href="Test011.html"> 경로 속성 지정 : 절대경로 , 상대경로
- 내부링크
<a name="top"> 책갈피 -- 이름은 꼭 name 이 아니어도 됨
<a href="#top"> 책갈피 위치로 이동
- Test012
- 테이블 태그 관찰 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test012.html</title> </head> <body> <div> <h1>테이블(표) 만들기</h1> <h2>- 테이블에 속성 적용하기</h2> <hr> </div> <div> <!--CSS 를 통해 관리해야 할 속성들 --> <table border="2" background="images/img_03.jpg" cellpadding="20" cellspacing="30"> <!-- 논리적으로 thead와 tbody로 나누어 쓰기도 하는데, 필수속성은 아니며 외부로 드러나는 것도 아님 --> <thead> <tr height="100"> <th width="200">한식</th> <th width="200">중식</th> </tr> </thead> <tbody> <tr> <td>김치찌개</td> <td>짜장면</td> </tr> <tr> <td>순두부찌개</td> <td>짬뽕</td> </tr> <tr> <td>된장찌개</td> <td>탕수육</td> </tr> </tbody> </table> </div> </body> </html>
- <table></table>
- <tr></tr> : 행을 구성하는 태그
- <td></td> : 열을 구성하는 태그
※ 아래 부분은 CSS 에서 다룰 개념이나 잠깐 끌고와서 확인
- <td></td> 를 <th></th> 로 사용하기도 함
- 열의 높이와 행의 넓이를 지정하는데 영향을 받는 요소들 확인
- <th></th> : 시각적으로 진한 글씨 + 중앙정렬
- <thead> 와 <tbody> 논리적 구성
- Test013
- 테이블 열/병합 실습
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test013.html</title> </head> <body> <div> <h1>테이블 열/행 병합 실습</h1> <hr> </div> <div> <!-- 기본 테이블 구성 --> <table border="1"> <!-- 테이블 영역 확인하기 위해서 지정해둔 것 뿐 --> <tr> <td>강남구</td> <td>강남구</td> <td>노원구</td> <td>노원구</td> </tr> <tr> <td>역삼동</td> <td>논현동</td> <td>상계동</td> <td>중계동</td> </tr> </table> <br><br> <!-- 셀병합 테이블 구성 --> <table border="1"> <!-- 테이블 영역 확인하기 위해서 지정해둔 것 뿐 --> <tr> <td colspan="2">강남구</td> <td colspan="2">노원구</td> </tr> <tr> <td>역삼동</td> <td>논현동</td> <td>상계동</td> <td>중계동</td> </tr> </table> <br><br> <!-- th 셀의 활용 --> <table border="1"> <!-- 테이블 영역 확인하기 위해서 지정해둔 것 뿐 --> <tr> <th colspan="2">강남구</th> <th colspan="2">노원구</th> </tr> <tr> <td>역삼동</td> <td>논현동</td> <td>상계동</td> <td>중계동</td> </tr> </table> <br><br> <!-- 강남구에 청담동 추가 --> <!-- 노원구에 하계동 추가 --> <table border="1"> <tr> <th colspan="3">강남구</th> <th colspan="3">노원구</th> </tr> <tr> <td>역삼동</td> <td>논현동</td> <td>청담동</td> <td>상계동</td> <td>중계동</td> <td>하계동</td> </tr> </table> <br><br> <!-- 강남구 → 역삼동 논현동 --> <!-- 노원구 → 상계동 중계동 하계동 월계동 --> <table border="1"> <tr> <th colspan="2">강남구</th> <th colspan="4">노원구</th> </tr> <tr> <td>역삼동</td> <td>논현동</td> <td>상계동</td> <td>중계동</td> <td>하계동</td> <td>월계동</td> </tr> </table> <br><br> </div> <div> <!-- 노원구 상계동 노원구 중계동 강남구 역삼동 강남구 논현동 --> <table border="1"> <tr> <th>노원구</th> <td>상계동</td> </tr> <tr> <th>노원구</th> <td>중계동</td> </tr> <tr> <th>강남구</th> <td>역삼동</td> </tr> <tr> <th>강남구</th> <td>논현동</td> </tr> </table> <br><br> <table border="1"> <tr> <th rowspan="2">노원구</th> <td>상계동</td> </tr> <tr> <td>중계동</td> </tr> <tr> <th rowspan="2">강남구</th> <td>역삼동</td> </tr> <tr> <td>논현동</td> </tr> </table> <br><br> <!-- 노원구 상계동 중계동 강남구 역삼동 논현동 청담동 은평구 불광동 녹번동 역촌동 신사동 --> <table border="1"> <tr> <th rowspan="2">노원구</th> <td>상계동</td> </tr> <tr> <td>중계동</td> </tr> <tr> <th rowspan="3">강남구</th> <td>역삼동</td> </tr> <tr> <td>논현동</td> </tr> <tr> <td>청담동</td> </tr> <tr> <th rowspan="4">은평구</th> <td>불광동</td> </tr> <tr> <td>녹번동</td> </tr> <tr> <td>역촌동</td> </tr> <tr> <td>신사동</td> </tr> </table> <br><br> </div> </body> </html>
- 테이블 작성
- 두개당 하나를 보여주기 위해서 삭제하면 그냥 칸이 비게 되고 앞으로 당겨져나온다
- <td colspan = "합칠 열의 갯수">
- colspan 속성으로 열 병합 가능
더보기※ 위와 같은 방법으로 테이블 구성해보기
- <th rowspan="합칠 행의 갯수">
- rowspan 속성으로 행 병합 가능
더보기※ 위와 같은 방법으로 테이블 구성해보기
https://www.w3schools.com/
- Frontend 뿐 만 아니라 다양한 언어들까지 학습하기에 좋은 사이트이니 참조하자
728x90'SsY > Class' 카테고리의 다른 글
[CSS] 001. CSS 의 개요, CSS 관찰 실습 (0) 2023.05.04 [HTML] 003. HTML 관찰(태그 및 속성 관찰) (0) 2023.05.04 [HTML] 001. HTML 의 개요 , Eclipse 설정 Export-Import 로 기존 설정 가져오기 (0) 2023.05.02 008. CallableStatement (0) 2023.05.02 007. PreparedStatement / 성적 처리 프로그램 구현 (0) 2023.05.02