오늘의 노래!!!
CHRISTIAN
- 아티스트
- Zior Park
- 앨범
- WHERE DOES SASQUATCH LIVE? PART 1
- 발매일
- 2023.02.16
먼저 앞서 첫번째 프로젝트로 인해 블로그를 잠시 쉬었는데 다시 재개!!!
이번에는 HTML를 배워보도록 하겠다!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!--
주석 : Ctrl + [/]
글자 크게 : Ctrl + [+]
글자 작게 : Ctel + [-]
-->
<h1>Hello, HTML! </h1>
<!-- Arl + [L] + [O] -->
<!-- 용어 정리!!!!!!!!! 당연히 알아야 할것
(1) 프론트엔드(FE) 개발
: 웹페이지(인터넷)를 시각화해서 보여주는 것
(2) HTML(Hyper Text Markup Language) - 링크 연결이 되어있어(Text링크 연결해서 원하는것 얻는걸),(Markup )
--기획자 ,뼈대
: 페이지의 문단, 표, 이미지, 동영상 등 웹의 구조를 담당
(3) CSS
--디자이너, 디자인
: 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃등) 을 지정해
콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당
(4) JavaScript(JS라고 부르당)
--개발자, 기능
: 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리 담당
-->
</body>
</html>
[0] 기본 구조!!!
<!DOCTYPE html>
<!-- <!DOCTYPE 태그> -->
<!-- 문서의 버전을 나타낸다. 현재 html5를 기준으로 한다. -->
<!-- 생략이 가능하지만 하위호환성을 위해 작성할 것을 권장 -->
<html lang="ko">
<!-- <html lang="en"> 태그 : 문서 전체의 범위 -->
<!-- lang 사용언어 : en(영어), ko(한국어) -->
<head>
<!-- head 태그 : 문서의 정보를 나타내는 태그 -->
<!-- 재목, 문서설명, 사용파일 위치, 스타일(css)등 보이지 않는 정보 -->
<meta charset="UTF-8"/>
<!-- 문자가 인코팅 되는 방식 charset : UTF-8로 설정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- http-equiv : 브라우저의 랜더링 방식 설정 -->
<!-- IE=edge : 최신 IE 브라우저의 랜더링 방식을 사용한다. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- viewport : 사용자의 모바일 디바이스에서 웹페이지가 표시되는 방식 -->
<!-- width=devuce-width, initial-scale=1.0 -->
<!-- : 웹페이지의 뷰표트 가로너비를 다양한 모바일 디바이스의 가로 너비와
일치시키고, 화면의 확대/축소 없이 페이지를 보여준다 -->
<meta name="author" content="본인id"/>
<meta name="date" content="24.04.26"/>
<meta name="description" content="html구조"/>
<!-- meta 태그 : 제작사, 내용, 키워드 등을 검색엔진이나 브라우저에 제공 -->
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- link 태그 : 외부문서를 가져와서 연결할때 사용 -->
<title>인천일보 아카데미</title>
<!-- style 태그 : 스타일(css)를 html문서 안에서 작성하는 경우 -->
<style>
body{
color: red;
}
</style>
</head>
<!-- body 태그 : 문서의 구조를 나타내는 태그 -->
<!-- 사용자 화면(브라우저)을 통해 실제로 보여지는 내용을 작성 -->
<body>
<h1>hi</h1>
<!--
요소(Element) : <태그> 내용 </태그>
단일태그 : <태그> or </태그>로 이루어져 있다.
</태그> : html5 부터 사용(안전함) vs 편리함
<태그 속성(Attribute)="값(value)">
-->
<h2>안전함</h2>
</body>
<!-- script태그 : JS를 html문서 내에서 작성할때 사용 -->
<script>
</script>
<!-- src(경로)에 js파일(자바스크립트 파일)을 불러올 때 사용 -->
<script src=""></script>
</html>
[1] 문장 태그!!
<!DOCTYPE html>
<html lang="ko">
<head>
<title>문장태그</title>
</head>
<body>
<p>텍스트는 body태그 안에서 특별한 태그 없이
입력할 수 있지만 단락을 사용하지 않으면
전체가 연결돼서 한줄로 표시된다.</p>
<!-- <p>태그를통해 문장 한줄을 띄어쓰기를 할수 있다 -->
<!-- : 하나의 문단을 의미하는 태그 -->
<p> 텍스트는 body태그 안에서 특별한 태그 없이<br>
입력할 수 있지만 단락을 사용하지 않으면<br>
전체가 연결돼서 한줄로 표시된다.<br/>
<br/>
br태그 : 줄바꿈 태그</p>
<!--
<br> vs <br/>
편리함 안전함
HTML1/2/3/4/5 HTML5/XHTML
-->
</body>
</html>[2] 텍스트표현!!
// p태그, pre태그 표현법
// 태그마다 속성이다르다.!!!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트표현</title>
</head>
<body>
<p>
이문장 내부에
줄바꿈을 포함한다.
그래서 여기서 공백을 넣고 있다.
화면에 출력되는 모습은??
</p>
<p>
whitespace : 가로 또눈 세로로 여백을 주는 문자<br/>
ex) 탭, 줄바꿈, 띄어쓰기(스페이스) 등등<br/>
마크업은 whitespace 문자를 무시, 한개의 공백으로 처리<br/>
</p>
<pre>
이문장 내부에
줄바꿈을 포함한다.
그래서 여기서 공백을 넣고 있다.
화면에 출력되는 모습은??
</pre>
<p>
pre태그 : 작성한 대로 출력이 된다.
</p>
</body>
</html>[3] 제목태그!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목태그</title>
</head>
<body>
<h1>제목 1호</h1>
<h2>제목 2호</h2>
<h3>제목 3호</h3>
<h4>제목 4호</h4>
<h5>제목 5호</h5>
<h6>제목 6호</h6>
<!--
h#태그는 1호부터 6호까지 적용
글자크기 1호가 가장크고 6호가 가장 작다
줄바꿈이 일어나고, 볼드체(굵게)적용
-->
<hr/>
<!-- hr태그 : 수평선 혹은 구분선 -->
<h7>제목 7호</h7>
<h8>제목 8호</h8>
<h9>제목 9호</h9>
<h10>제목 10호</h10>
</body>
</html>[4] 다양한텍스트!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다양한텍스트</title>
</head>
<body>
<!-- 한줄 복사 : shift + Art + 방향키-->
<p>이 텍스트는 <em>강조(em)</em> 입니다</p>
<p>이 텍스트는 <strong>강한강조(strong)</strong>입니다</p>
<p>이 텍스트는 <mark>하이라이트(mark)</mark>입니다</p>
<p>이 텍스트는 <del>취소선(del)</del>입니다</p>
<p>이 텍스트는 <small>작은글자(small)</small>입니다</p>
<p>이 텍스트는 <sub>아래첨자(sub)</sub>입니다</p>
<p>이 텍스트는 <sup>윗첨자(sup)</sup>입니다</p>
<p>이 텍스트는 <em><strong><mark><del><small><sub><sup>윗첨자(sup)</sup>아래첨자(sub)</sub>작은글자(small)</small>취소선(del)</del>하이라이트(mark)</mark>강한강조(strong)</strong>강조(em)</em>입니다</p>
<p>이 텍스트는 <em><strong><mark><del><small><sub><sup>아래첨자(sup)</sup>아래첨자(sub)</sub>작은글자(small)</small>취소선(del)</del>하이라이트(mark)</mark>강한강조(strong)</strong>강조(em)</em>입니다</p>
<p>이 텍스트는 <em><strong><mark><del><small><sub><sup>윗첨자(sup)</sup>아래첨자(sub)</sub>작은글자(small)</small>취소선(del)</del>하이라이트(mark)</mark>강한강조(strong)</strong>강조(em)</em>입니다</p>
</body>
</html>[5] 특수문자!!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>특수문자</title>
</head>
<body>
<p>
이문장 내부에 줄바꿈을 포함.
그래서 공백을 넣고 있다
화면에 출력되는 모습은?
</p>
<hr/>
<h2>특수문자 표기</h2>
<p>'공백' = </p>
<p>'<' = <</p>
<p>'>' = ></p>
<p>'&' = &</p>
<p>'ⓒ' = ©</p>
<!-- 네이버 html 특수문자 검색 -->
<!-- https://entitycode.com -->
</body>
</html>//https://entitycode.com/ 여기서 각종 특수문자코드 확인!!!
[6] 인라인요소와 블록요소 구분!!
블록요소와 인라인요소의 규칙!!
(1) 대부분 요소는 같은 형태의 다른 요소를 포함함
: 블록요소 안에 블록요소, 인라인요소 안에 인라인요소
(2) 블록요소안에 인라인 요소를 포함가능
(3) 인라인요소안에 블록요소를 포함 불가능
인라인 요소 : 글자를 만들기 위한 요소들
(1) 줄바꿈이 일어나지 않는다.
(2) 요소의 내용만큼 영역을 가진다.
(3) 인라인요소는 a, img, strong,em, span태그 등이 있다.
블록 요소 : 상자(레이아웃)를 만들기 위한 요소
(1) 기본적으로 줄바꿈이 일어나는 형태
(2) 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태
(3) 블록요소에 포함되는 요소는 h#,p,div 태그 등이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*class="b1" 영역에 배경색을 orange로 설정하기 */
.b1{
background-color: orange;
}
/*strong, a, span태그에 배경색을 royalblue로 설정 */
strong, a, span{
background-color: royalblue;
}
/* id ="p1" 영역에 배경색을 violet으로 설정 */
#p1{
background-color: violet;
}
</style>
<title>인라인요소 블록요소</title>
</head>
<body>
<!--
인라인 요소 : 글자를 만들기 위한 요소들
(1) 줄바꿈이 일어나지 않는다.
(2) 요소의 내용만큼 영역을 가진다.
(3) 인라인요소는 a, img, strong,em, span태그 등이 있다.
블록 요소 : 상자(레이아웃)를 만들기 위한 요소
(1) 기본적으로 줄바꿈이 일어나는 형태
(2) 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태
(3) 블록요소에 포함되는 요소는 h#,p,div 태그 등이 있다.
블록요소와 인라인요소의 규칙!!
(1) 대부분 요소는 같은 형태의 다른 요소를 포함함
: 블록요소 안에 블록요소, 인라인요소 안에 인라인요소
(2) 블록요소안에 인라인 요소를 포함가능
(3) 인라인요소안에 블록요소를 포함 불가능
-->
<h2 class="b1">h#태그는 블록요소</h2>
<p class="b1">p태그는 블록요소</p>
<div class="b1">div태그는 블록요소</div>
<strong>strong태그는 인라인 요소</strong>
<a href="a">a태그는 인라인 요소</a>
<span>span태그는 인라인 요소</span>
<hr/>
<p id ="p1">이것은 p태그안에 있는 <span>span</span>입니다.</p>
</body>
</html>
[7] 뉴스로 텍스트꾸미기!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.b1{
background-color: orange;
}
a{
background-color: rgb(225, 65, 140);
}
strong, span{
background-color: royalblue;
}
#p1{
background-color: violet;
}
</style>
<title>뉴스</title>
</head>
<body>
<h1>SK텔레콤, 골프 플랫폼에 AI기술 접목을</h1>
<h2>골프존과 협력...내달 ‘SKT 오픈’ 공동마케팅</h2>
<p>
SK텔레콤이 골프존과 함께 골프 분야에서 <a>인공지능(AI)</a> 기술을 바탕으로 협력에 나선다. AI 기술과 골프 플랫폼을 결합해 새로운 서비스를 발굴한다는 계획이다.<br/>
SK텔레콤은 골프존과 ‘골프 플랫폼과 AI 접목을 위한 협력’에 대한 <a>업무협약(MOU)</a>을 체결했다고 26일 밝혔다. 이날 골프존 사옥에서 열린 업무협약 체결식에는 SK텔레콤 김혁 미디어제휴 담당, 오경식 스포츠마케팅 담당과 골프존 미디어사업부 손장순 상무, 골프존GDR(Golfzone Driving Range) 아카데미 김아성 실장 등 양사 주요 관계자들이 참석했다.<br/>
SK텔레콤과 골프존은 이번 업무협약을 계기로 양사의 노하우를 기반으로 하는 사업 협력을 약속했다. 먼저 오는 5월 18일 개막하는 ‘SK텔레콤 오픈 2023’을 시작으로 본격적인 협업에 나설 예정이다. 양사는 골프존 매장에서 대회가 열리는 제주도 핀크스 골프클럽을 배경으로 아마추어 골퍼들이 실력을 겨루는 ‘SK텔레콤 오픈 아마추어 최강자전’을 개최하기로 했다.<br/>
해당 대회의 예선전은 오는 5월 14일까지 진행된다. 같은 달 21일에는 예선 상위권 참가자들이 대전에 위치한 골프존 조이마루에서 오프라인 대회를 갖고 최종 우승자를 가릴 예정이다.<br/>
‘SK텔레콤 오픈 아마추어 최강자전’은 JTBC골프와 스크린골프존 채널을 통해 이날 <span>‘SK텔레콤 오픈’</span> 파이널 라운드가 끝나는 대로 즉시 생중계될 예정이다. 이 밖에도 ‘SK텔레콤 오픈’ 현장에선 SK텔레콤 AI 휴먼 기술과 골프존 GDR 기술을 연동한 ‘AI 휴먼 원포인트 레슨’ 서비스를 갤러리를 대상으로 선보일 계획이다.
김혁 SK텔레콤 미디어제휴 담당은 <span>“SK텔레콤과 골프존이 AI 기술과 골프 플랫폼 분야의 결합을 통해 새로운 성장 동력을 발굴할 것”</span>이라며 “양사의 적극적인 협력으로 새로운 서비스들을 발굴해 고객들에게 즐거움을 제공할 것”이라고 말했다.<br/>
손장순 골프존 미디어사업부 상무는 <span>“SK텔레콤과 이번 업무협약을 통해 새로운 AI 골프, 스포츠 서비스 및 콘텐츠를 선보일 수 있게 돼 의미있게 생각한다”</span>며 “앞으로도 스크린을 넘어 골프산업 전반에 걸쳐 골프를 통한 즐거움과 색다른 경험을 제공할 수 있도록 메타버스 등 차세대 서비스와 기술 개발에 최선을 다하겠다”고 밝혔다. 김현일 기자
</p>
</body>
</html>
[8] 스타일 꾸미기(1)
글자 크기, 글자 색깔, 글자 폰트
font size = "3"
font color="red'
font face="궁서"
<body>
<p>스타일적용1</p>
<p><font size ="3">옛날에는</font></p>
<p><font size ="5" color="red">이와같은 방식으로</font></p>
<p><font size ="7" color="blue" face="궁서">폰트 지정</font></p>
<p>font태그는 크기(size), 색깔(color), 글꼴(face) 세가지 속성 지정 <br/>
단, HTML5에서 font태그를 지원하지 않는다<br/>
HTML5는 웹페이지 내용 + 디자인 구성
</p>
</body>
[8] 스타일 꾸미기(2)
<head> 이영역에 스타일지정!! </head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일2</title>
<style>
body{
background-color: black;
color: red;
}
/* body영역의 있는 모든 b1태그에 스타일적용 */
h1{
font-size: 10px;
color: yellow;
border: inset 2px violet;
/* border(테두리) : 선종류 선 굵기 선색깔 */
}
/*
color는 좋아하는 색 선택
border : 테두리모양 2px 색깔;
:inset, solid, dashed, double, groove, ridge등
*/
h2{
font-size: 10px;
color: blue;
border: solid 2px red;
}
h3{
color: green;
border: dashed 2px red;
}
h4{
color: yellow;
border: double 2px red;
}
h5{
color: seagreen;
border: groove 2px red;
}
h6{
color: red;
border: ridge 2px red;
}
p{
background-color: aqua;
color: bisque;
}
</style>
</head>
<body>
배경색은 검정색입니다
<h1>h1태그에 스타일 적용</h1>
<h2>h2태그에 스타일 적용</h2>
<h3>h3태그에 스타일 적용</h3>
<h4>h4태그에 스타일 적용</h4>
<h5>h5태그에 스타일 적용</h5>
<h6>h6태그에 스타일 적용</h6>
<p>p태그에 스타일 적용</p>
<p style="background-color: blue; color: white ; font-size: 50px;">p태그에 속성으로 스타일 적용</p>
<!-- 태그에 직적 속성으로 스타일을 지정한 것의 우선순위가 더 높다!!! -->
</body>
</html>
[8] 스타일 꾸미기(3)
// 따로 다른파일지정CSS
<link rel="stylesheet" href="style.css">
<!-- 너무 많은 색깔 지정은 link-css로 지정해서 사용 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일3</title>
<link rel="stylesheet" href="style.css">
<!-- 너무 많은 색깔 지정은 link-css로 지정해서 사용 -->
</head>
<body>
배경색은 검정색입니다
<h1>h1태그에 스타일 적용</h1>
<h2>h2태그에 스타일 적용</h2>
<h3>h3태그에 스타일 적용</h3>
<h4>h4태그에 스타일 적용</h4>
<h5>h5태그에 스타일 적용</h5>
<h6>h6태그에 스타일 적용</h6>
<p>p태그에 스타일 적용</p>
<p style="background-color: blue; color: white ; font-size: 50px;">p태그에 속성으로 스타일 적용</p>
<!-- 태그에 직적 속성으로 스타일을 지정한 것의 우선순위가 더 높다!!! -->
</body>
</html>//위에 같은 출력값
[9] 스타일 꾸미기(4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일4</title>
<!-- 링크방식: css파일 사용 -->
<link1 rel="stylesheet" href="style1.css">
<!-- 내장방식: style태그 사용 -->
<style></style>
</head>
<body>
<!-- 인라인 방식: 태그에 직접 스타일 적용 -->
<p style="color : red">글자 색 red</p>
<p style="font-size: 50px;">글자크기 50px</p>
<p style="font-family: '궁서';">글꼴 궁서</p>
<p style="color: red; font-size: 50px; font-family: '궁서';">인라인 방식 폰트 조합(모든스타일)</p>
<hr/>
<!-- 직접적으로 설정말고 class로 설정 -->
<!-- clss(.) : 반복적으로 같은 스타일을 적용하기 위해 쓰이는 속성 -->
<!-- html문서에서 여러번 사용할 수 있다. -->
<p class="p1">글자색 orange</p>
<p class="p2">글자크기 25px</p>
<p class="p3">글꼴 굴림</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<p class="p1 p2 p3">모든 스타일 적용</p>
<!-- id(#) : html문서 내에서 똑같은 속성값을 한번만 사용!! -->
</body>
</html>// 링크 방식을 통해 css불러와 공간차지를 줄였다.
// css를 따로 사용할경우 공간 차지를 줄이고 html에서 여러번 사용할수 있다
[9] a태그
a태그의 클라이언트(웹개발에 필수 요청 응답)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a태그</title>
</head>
<body>
<!-- a태그 : 페이지 이동 태그 -->
<!-- href -->
<a href="https://www.naver.com">네이버 페이지러 이동</a>
<!-- https : Hyper Text Transfer Protocol Security-->
<!-- 프로토콜 : 인터넷에서 하이퍼텍스트 문서를 교환하기 위해 사용되는 대표적인 통신규약 -->
<!-- www : World Wide Web -->
<!-- naver.com : 정보를 가진 컴퓨터의 위치-->
<a href="./04_텍스트표현.html">텍스트표현 페이지 이동</a>
<br/>
<!-- target 속성 -->
<!-- 구글 이동 -->
<!-- target="_blank" : 새창에서 페이지가 열림 -->
<a href="https://www.google.co.kr/?hl=ko" target="_blank">구글페이지로 이동</a>
<br/>
<!-- DAUM 이동 -->
<!-- target="_self" : 기존창에서 페이지가 열림 -->
<a href="https://www.daum.net/" target="_self">다음페이지로 이동</a>
<!-- taget="_parent" : 현재 프레임의 부모프레임에서 페이지열림 -->
<!-- taget="_top" : 최상위 프레임에서 페이지가 열림!!-->
</body>
</html>[10] a태그와 비슷한 내용 [문서내부이동]
//section으로 원하는곳으로 이동!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 내부 이동</title>
</head>
<body>
<h1 id ="top">인천일보 아카데미</h1>
<p>파이썬 웹크로링을 활요한 빅데이터 구축, 분석 및 시각화 개발자 양성과정</p>
<a href="#section">공지사항으로 이동</a>
<a href="#section1">자유게시판으로 이동</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/>
<h2 id="section">공지사항</h2>
<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/>
<h2 id="section1">자유게시판</h2>
<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>
<!-- href="#top" : id 속성값이 "top"인 영역으로 이동 -->
</body>
</html>'IT코딩공부!' 카테고리의 다른 글
| #22 HTML (div레이아웃, 테이블구조(열_행병합))공부~~ (0) | 2023.04.28 |
|---|---|
| #21 HTML(이미지,동영상, list(목록표현), margin, padding, 색상)!! (0) | 2023.04.27 |
| #19 (은행) DB+인텔리제이 (0) | 2023.04.14 |
| #18 DB+인텔리제이 작업 (0) | 2023.04.13 |
| #17 DB (JOIN) OR 인텔리제이+ORACLE 연동 (0) | 2023.04.12 |
