-
[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>
- 어제 만들어둔 서버 돌아가는지 확인
http://(아이피주소):(포트번호)/(프로젝트이름)/(파일이름.확장자) 
- 매번 위와 같이 서버를 돌리면 힘들기 때문에
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>
미러링 상태이기 때문에 이미지를 찾기 위해서 경로에서 F5 (새로고침) 해서 파일이 있음을 확인 시켜줘야함
- 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 과 함께 사용
- 기능/동작은 자바스크립트로 처리한다.
<form></form> 태그 를 입힌 것 만으로도 취소 버튼은 활성화 / 나머지 동작은 자바스크립트로 처리
자바스크립트까지 맛보기
- 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
- 클릭 이벤트 발생
click 이라는 이벤트에 on (발생) 한다는 의미!! - 이벤트 발생시 적용될 함수 테스트
결과 버튼을 눌렀을 때 // 테스트 확인 - 함수를 처리하기 위해서 컨트롤 영역에서 입력한 값들을 데려와야함
- 입력받은 값들을 하나하나 객체화 시켜서 가져와야 컨트롤을 할 수 있음
→ 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 로 관리해야 할 속성들이나 현재 CSS를 다루고 있지 않아 직접 테스트 해보는 것 뿐
※ 아래 부분은 CSS 에서 다룰 개념이나 잠깐 끌고와서 확인
cellpadding 속성확인 
cellspacing 속성 확인
- <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/
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
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
