1. 기초
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 1일차 - 기초</title>
</head>
<body>
</body>
</html>- html : html 시작&끝
- head : 셋팅 공간
- title : 브라우저 탭 이름
- body : 브라우저 출력
=> 요놈들은 하나의 html에서 한번씩만!
- meta태그 : 언어셋, 접속 Device 설정, API관련 셋팅
<u>홍길동</u>님 <i>환영합니다.</i><br>
포인트는 <b>3500</b><br>
<font size="6" color="#aaffaa">회원등급 실버회원</font><br>
상품명 : LG 냉장고- u 씨멘틱마크업 : 밑줄
- i 씨멘틱마크업 : 글자 기울기
- b 씨멘틱마크업 : 굵게
- font : 글자관련된 마크업 (색상 #색상코드6자리, 크기 1~7) 속성
-   : 공백 특수문자 //글자사이 스페이스바는 아무리 많이써도 하나만 적용되기 때문에 사용
<h1>게시물1</h1>
<h2>게시물2</h2>
<h3>게시물3</h3>
<h4>게시물4</h4>
<h5>게시물5</h5>
<h6>게시물6</h6>
결제시스템 : 신용카드
<p>최종결제금액 : 16500원</p>
상품금액 : <s>80000</s> 원- h 씨멘틱마크업 : 제목태그 1~6까지 존재 //1이 가장 큼, br을 안써도 한줄 내려감
- p 씨멘틱마크업 : 타이틀, 특정구간, 문단 // 한줄이 본인영역 br안써도된다 ※br과 함께쓰면 막코드
- s태그 (strike) : 취소선
😊응용문제
[약관동의]<br><br>
<font color="red"><b>"2025년 01월 기준"</b></font>
으로 <b>회원정책</b>에 대해 <u>다음과 같이 <i>적용</i></u>됩니다.<br>2. 목차, 링크
<ul>
<li>공지사항 1</li>
<li>공지사항 2</li>
<li>공지사항 3</li>
</ul>- ul : 목차(디스크) (css적용전 : 씨멘틱 마크업, css적용후 : 마크업)
- li : 리스트 출력 //동구라미 아니고 디스크라고 부르기 ㅎㅎ;
무조건 ul쓰고 li쓰기 //ul은 부모태그 li자식태그
태그때릴거면 무조건 li안에 때리기
<ol>
<li>게시물</li>
<li>게시물</li>
<li>게시물</li>
</ol>- ol : 목차(숫자)
<dl>
<dt>오늘의 헤드라인 뉴스</dt>
<dd>2025-01 첫날 월요일</dd>
<dd>2025-01 오늘의 날씨</dd>
</dl>HTML5에 새로 추가된 태그 잘알아두기 면접용
- dl : HTML5 태그 추가
- dt : 목차의 타이틀
- dd : li역할
<a href="http://naver.com" target="_self">네이버</a><br>
<a href="http://google.com" target="_blank">구글</a><br>
<a href="http://daum.net"><font color="red">다음</a></font>- a 씨멘틱마크업 (링크태그) : 페이지 이동 (href속성 : URL경로를 말함)
- target 속성 : 페이지 이동시 어떤 형태로 출력을 시킬 것인지를 설정
- _self : 현제 페이지에서 페이지 이동 (미설정시 해당값)
- _blank : 신규 탭을 오픈 후 페이지 이동
- _new : 주로 모바일에서 사용되는 신규탭 속성값 HTML5에 추가됨
- _top : 팝업창을 오픈시 최상위로 오픈되는 값
- target 속성 : 페이지 이동시 어떤 형태로 출력을 시킬 것인지를 설정
※a태그는 font태그보다 상위태그이기때문에 a안에 font를 써야 적용됨 밖에쓸시 미적용
3. 이미지
<a href="http://naver.com" target="_blank">
<img src="./cat.jpeg" width="150" hright="150" title="고양이">
</a>
- img : 이미지 출력하는 태그 //width(가로), height(세로), src(경로)
- title 속성 : 도움말 출력하는 역할
- 절대경로 : img width="100" hright="100" src="https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=9046601&filePath=L2Rpc2sxL25ld2RhdGEvMjAxNC8yMS9DTFM2L2FzYWRhbFBob3RvXzI0MTRfMjAxNDA0MTY=&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004"
- 상대경로 : ./(같은위치), ../(상위 위치)
※상대경로가 더 좋은 이유
도메인이 바뀐 경우 절대경로는 난리난다
절대경로는 속도가 떨어진다
해당 사이트가 이미지를 지운경우 엑박이 뜬다
4. iframe
<iframe scrolling="no" src="https://danawa.com/" width="1100" height="1100" frameborder="0"></iframe>- iframe 씨멘틱 마크업 : 외부 페이지를 현재 페이지로 로드
- 대량의 데이터 리스트 값을 출력하기 위한 용도로 쓰임
- frameborder : 외곽선 두께 0으로 처리시 외곽선을 감춤
- scrolling : 기본 yes / no로 변경시 iframe의 가로, 세로 스크롤바를 미출력
5. Table
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>홍길동</td>
<td>홍길동</td>
</tr>
</table>- table (부모) : 표, 그래프, 통계, 게시판, 웹 아웃라인 등 여러가지를 표현하는 씨멘틱마크업 //무조건 tr안에 td가 들어가야함 밖에쓸시 테이블이 엉망진창이됨
- tr : 줄(행)
- td : 칸(열)
- border : 외곽선 두께
- cellspacing : 칸 기준 바깥쪽 여백 조정
- cellpadding : 칸 기준 안쪽 여백 조정
- align : 정렬 left, center, right
- bgcolor : 배경색 backgroundcolor
Table은 첫번째 tr에 td값을 가로 적용시 나머지 tr에 td값이 자동으로 이관
단, 각각의 tr에 있는 td별 가로 크기를 적용하지는 못함
높이 경우 tr에 높이를 적용시 해당 tr에 포함된 td는 동일한 높이를 적용함
또는 첫번째 칸에 높이를 적용시에도 모든 td에 적용됨
=> 너비 높이는 처음거를 모두 따라가기때문에 중복하여 쓰지않아도됨 쓰면 막코드
첫줄의 가로크기, 높이는 tr에 쓰면 해당 td모두 바뀜
<!-- 신규 테이블 -->
<table border="1" cellpadding="0" cellspacing="0">
<!-- 데이터 출력 형태 -->
<thead>
</thead>
<!-- 데이터 출력 및 입력 파트 -->
<tbody>
</tbody>
</table>😊응용문제
<table border="1" cellspacing="0" cellpadding="0">
<tr height="30" bgcolor="yellow">
<td width="80" align="center">번호</td>
<td width="250">제목</td>
<td width="100">글쓴이</td>
<td width="150">등록일</td>
</tr>
<tr height="40">
<td colspan="4" align="center">등록된 게시물이 없습니다.</td>
</tr>
<tr height="50" align="center">
<td>2</td>
<td align="left">게시판</td>
<td>관리자</td>
<td>2025</td>
</tr>
<tr height="60">
<td>1</td>
<td>게시판</td>
<td>관리자</td>
<td>2025</td>
</tr>
</table>😊응용문제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 2일차 table 응용편</title>
</head>
<body>
<table align="center" border="1" cellspacing="0" cellpadding="0" width=600 height="150">
<thead>
<tr bgcolor="yellowgreen" align="center" height="37.5">
<th width="150">지역별</th>
<th colspan="3"><b>2024년도 Back-end 취업현황</b></th>
</tr>
</thead>
<tbody>
<tr height="37.5" align="center">
<td width="150" >서울</td>
<td width="150" align="right">3000 </td>
<td width="150" align="right">1500 </td>
<td width="150" rowspan=3>통계인원 총 1000명</td>
</tr>
<tr height="37.5" align="center">
<td >경기도</td>
<td align="right">2000 </td>
<td align="right"> 1000 </td>
</tr>
<tr height="37.5" align="center">
<td align=>제주도</td>
<td align="right">1500 </td>
<td align="right">750 </td>
</tr>
</tbody>
</table>
</body>
</html>주저리주저리
htm은 쉽게말해 도스같은 환경
환경에서 사용할때 다른말로하면 유닉스라는 시스템이라던가 리눅스의 옛날버전 //커멘드모드
gui모드가 아닌 cui모드에서 사용
- Unix, Linux, Dos => 속성 3글자 => .jpg => .jpeg
ASP는 기본 코드 형태가 VB의 언어를 기반으로
PHP는 C언어를 기반으로
JSP는 JAVA를 기반으로 만들었다
- bpm, jpeg, png, gif (이미지) => .svg + .webp
- mp4, mpeg, avi (영상) => .webm
이미지파일 bpm, jpeg, png, gif 이런것들이 들어간다
이런것들을 많이 이미지로 쓰는데
아이콘들을 .svg 로바꿨다
xm의 형태의 코드이다
코드가 이미지형으로 되어있다
이유?
개발자 팀과 디자인팀과 소통이 안됐음
색상, 크기를 개발자들이 svg소스 열어서 디자이너 없이 변경
아무리 작은 svg파일이라도 늘린다던가 줄일때 이미지가 깨지지않는다
인터넷 3초안에 안뜨면 사용자들이 도망감 => 경량화 필요
이미지 가볍게해야함 근데 퀄리티떨어짐
=> cdn 서버 사용 //이미지 따로 저장하는 서버
- web과 was를 같이 쓰는 경우
WEB Server = Apache, Nginx => 기본포트 (http)80포트, (https)443포트
WAS Server = Tomcat, Jeus, uWsgi => .jsp, Spring, Spring-boot, Servlet / 기본포트 8080포트 임시포트임 바꿀수있음
처음에 웹뜨고 와스가 뜨게 하면 응답속도가 느림
8080을 80으로 강제로 돌리는 유언비어가 퍼져있음 이러면 안된다
하나의 리눅스 서버에 도메인이 디스크가 얼마인지에 따라 만개도 걸수있다
그렇다보니 이런식으로 강제로 하면 안됨
웹 먼저 켜고 포워딩시켜서 작동시킴 이거시 보편적 형태
아파치는 버전이 1점대와 2점대뿐이다
웹버전을 물어봤는데 와스인 탐캣버전(8~) 말하면 안됨
기본적인거는 알고있자
API : 외부로그인 우편번호 지도 네비게이션 등등
RestAPI, Restful API
둘중 어떤거써봤는가물어본다 둘중하나가지고 요즘 api제공하기때문에 알고있으면 좋다 다음에 설명할것임
왜 모바일웹을 구분했냐면!
반응형은 앱으로 불가능 모바일웹은 하이브리드 앱으로 바로 만들수있음
그래서 영업할때 돈벌려고 반응형 만들져~함
누가 사이트 만든다 하면 어플만들거냐 물어보고 만든다하면 pc따로 모바일 따로만들고 반응형 하지말라고 하기
개인정보담당자 피하기
유출되면 큰일남
DHTML 에서는
<p> </p> <br>
<input type="text" readonly>
XHTML에서는
<br/>
<input type="text readonly="true"/>
이런식으로 코드가 다르기때문에 잘못쓰면 오류남
태그, 마크업, 씨멘틱마크업 이 세가지 단어가 뭔지는 알아야함! 아주 기초
<br> : 태그
<body></body> : 마크업
<header></header> or <nav></nav> or <footer></footer> : 씨멘틱마크업 //보자마자 뭐하는지 알수있는놈들
ex) <div></div> 버튼인지 오브젝트인지 모르기때문에 마크업이다.
<input type="checkbox"> 닫는게없으니 태그
이런걸 잘 알고있어야 백엔드 만진다
프론트보다 더 잘알기
React, Veu, Angular => SPA(CLI) : dhtml안씀
React, Veu, Angular => CDN : xdhtml, dhtml 다씀
어떤 형태로 쓰는지 알고있어야한다
WAS => 123.java => 123.class
자바파일 컴파일하면 클래스파일로 바뀜
jre 라이브러리가 컴파일을 돕는애
배포할때 build파일 사용
-----------------
html
ㄴIndex5.html
ㄴMember.png
ㄴLogin.png
ㄴproduct
ㄴList.html
ㄴPd.gif
ㄴTitle.png
ㄴNotice
ㄴNotice.html
ㄴTitle.png
ㄴButton.png
ㄴFile.png
Index5.html에서 File을 가져오려면
<img src="./notice/File.jpg">
Notice.html에서 Title.png를 가져오려면
<img src="../product/Title.png">
-----------------------------
cms
ㄴIndex1.html
ㄴIndex2.html
ㄴMain.html
ㄴLogo.png
ㄴTitle.jpg
ㄴMember.png
ㄴadmin
ㄴlogin.html
ㄴMaster.png
ㄴkey.gif
ㄴinfo
ㄴinfo.html
ㄴinfo.jpg
ㄴKeylogin.png
ㄴsetting
ㄴsetting.html
ㄴsetting.png
ㄴinfo.png
ㄴchat
ㄴchat.html
ㄴMemberico.png
ㄴchat-title.jpg
ㄴchat-client
ㄴimg.html
ㄴchatcli.png
ㄴclient
ㄴlog.html
ㄴFile.png
info.html에서 chatcli.gif를 가져오려면
<img src="../../chat/chat-client/chatcli.gif">
setting.html에서 Title.jpg를 가져오려면
<img src="../../Title.jpg">
info.html에서 info.png를 가져오려면
<img src="../setting/info.png">
log.html에서 info.png를 가져오려면
<img src="../../../admin/setting/info.png">
----------------------------------------
http://www.abc.co.kr => http://www.www.abc.co.kr
도메인을 구매할때는 맨밑에 http://abc.co.kr 만 구매
위 다섯주소는 http://abc.co.kr의 가상도메인
가상도메인은 서버가 허락하는 한 2만개도 만들수있음
abc.net은 다른놈
CORS 악명높은놈 프론트엔드울고있음
: 서로 다른 도메인으로 통신을 할 경우(ERROR)
잘알아두시오
문제1.
실행
http://localhost:8080/basic_html/web/notice.html
해당 html에 이미지를 출력시키시오.
- logo디렉토리에 있는 logo.png를 출력시키시오
- product 디렉토리 안에 있는 logo_quick_05.png를 출력시키시오 /동일이름의 디렉토리 주의
문제2.
실행
http://localhost:8080/basic_html/web/member/memer_ship.html
- menus.png 출력
- basket 디렉토리에 46073953.jpg =>
클릭시 coupang.com으로 이동. 단, 신규탭으로 이동
문제3.
실행
http://localhost:8080/basic_html/web/member/menus/menu.html
- logo디렉토리 logo.png
- web 디렉토리에서 03.jpg출력
--------------------------------------------
index4
MRP, ERP, WMS => 창고에 재고를 출력 (iframe)
----------
1. Back-end 게시물 관련 DB => 배열 구성하여 전달 Front-end
2. Back-end 게시물 관련 DB => Front-end가 없어서 JSP, JSTL, Thymeleaf 스스로 찍음
3. API 구축(시니어) => View 출력 (주니어)