혼자서 어떻게 공부를 해야 할지 감도 안 잡히고 그러다 보니 허송세월만 보내고 있던 차에
유데미 스타터스 백엔드 부트캠프를 발견!
국비교육도 아니니 내일배움카드를 발급하는 등 복잡한 과정도 필요 없어서 좋다!
필요한 건 노력과 시간뿐!!!!
3개월..불태워보자고..~!^_ㅠ..
1. HTML이란?
HyperText Markup Language 줄임말.
웹 문서를 만드는 기본 언어.
문자로 보여주는 것 이상을 보여준다는 뜻.
링크가 가능하기 때문에 많은 걸 보여줄 수 있음!
Markup Language
컴퓨터언어(프로그래밍언어=>조건 사용 가능, 반복, 변수, 연산자 등등 가능한 언어)
하지만 html은 프로그래밍 언어라고 볼 수 없음. 위 기능이 거의 불가능하기 때문.
마크업은 화면에 표시하는 기능을 하는데
ex)
<h1 STYLE=”COLOR:RED”>제목</h1> :크고 굵은 글씨로 보여줘 / 빨간색으로 보여줘
⇒이게 마크업 랭귀지 특성
마크업 언어: 화면에 표시할 내용 구조를 정함
마크다운 언어: 인스타 해시태그#, 슬랙@ 처럼 태그를 특정 문자로 대체. 마크업 언어의 일종.
2. HTMl문서의 기본 구조
<!DOCTYPE html> 로 시작해서 크게 아래 3가지로 구성되어있다.
<html>: 이제부터 이 안에 내용을 작성하겠다!
<head>: 앞으로 작성할 문서의 정보를 알려주겠다!
<body>: 웹 브라우저에 내용을 표시하겠다!
대부분의 내용들은 <body>에 작성
2-1. tag
<tag명 속성명=속성값> 내용물 </tag명>
<tag명 속성명=’속성값’> 내용물 </tag명>
<tag명 속성명=”속성값”> 내용물 </tag명>
⇒따옴표 있, 없 상관없음.
단, 공백이 있는경우 ‘’,”” 에 넣어야함.
<tag명 속성명=’속성 값’> 내용물 </tag명>
<tag명 속성명=”속성 값”> 내용물 </tag명>
(나는 그냥 따옴표 붙이는게 맘이 편하다...^^)
-태그 종류
<hn>: 제목 태그(제목과 관련된 태그들은 자동 줄바꿈 가능)
ex) <h1>제목1</h1>, ...
<p>: 문단 태그
<br>: 줄바꿈
1) <ol> <li>: 목록 태그. 앞뒤에 <ol>태그를 두고 사이에 <li>태그 삽입 => 자동으로 글머리 숫자가 생성됨
2) <ol type="a">: 숫자가 아닌 영문자 생성
<ul> <li>: 자동으로 글머리 기호가 생성됨
<ul type="square">
<table>: 테이블 태그(*테이블 테두리는 border=""를 사용)
<caption>: 테이블 제목 태그
<th>:제목 태그. 자동 가운데 정렬 가능
<tr>: 행 구분
<td>: 열 구분
<colspan>: 가로(열) 병합
<rowspan>: 세로(행) 병합
<img>
: src="사진 주소" alt="사진이 없을때 설명할 수 있는 내용"
<img src=”a.jpg> =⇒ a.jpg는 현재 html파일과 같은 경로
<img src=”./a.jpg> =⇒ a.jpg는 현재 html파일과 같은 경로
<img src=”../a.jpg> =⇒ a.jpg는 현재 html파일 상위 경로에 있음
src/main/wepapp/a/a.html 경로에서 src/main/wepapp/a.jpg 에 있다는 의미.
⇒여기까진 상대경로 설정
⇒절대경로 설정
<img src=”http://000.0.0.1:8080/html/a.jpg”> ⇒ c:sba/workspace/html/src/main/webapp/a.jpg 에 있다는 의미.
(*다른 컴퓨터에서도 작동하게 하려면 ip주소 수정 필요)
<a>: 링크 태그. <a href="주소"> 클릭하면 기재해둔 주소로 이동
<form>: 데이터를 처리하고 보낼때 필요한 태그.
<form action="이동할(데이터 보내야 할) 주소"
<form action="http://localhost:8080/html/a.jsp">
*<input>: 기타 다른 입력을 받을때 사용하는 태그
<input type="text/password//hidden/reset/button/submit...>
button / submit: 클릭 가능.
1. submit은 기능이 내장되어있음. form태그 action으로 전송함.
2. button은 기본 기능이 없음. 자유롭게 만들기 가능. 아무것도 안한다면 클릭해도 아무일 안일어남.
text/password/hidden: 텍스트 값
reset: 입력 삭제
ex)
아이디 입력: <input type="text" name="id">
암호 입력: <input type="password" name="pw">
관리자 모드: <input type="hidden" value="admin" name="mode">
성별: <input type="radio" value="남자" name="gender">남자
<input type="radio" value="여자" name="gender">여자<br>
(*클릭되면 이 값이 a.jsp로 전달됨)
파일업로드: <input type="file" name="myfile">
초기화 기능: <input type="reset" value="초기화">
버튼: <input type="button" value="버튼">
이미지 넣기: <input type="image" src="images/jquery.png">
전송: <input type="submit" value="전송">
(submit을 하면 현재 페이지의 내용을 담고 설정한 페이지로 이동!)
hidden: <input type="hidden" value="admin" name="mode">
-복수 선택 가능한 태그
<input type="checkbox" name="like" value="JAVA">자바
<input type="checkbox" name="like" value="HTML">HTML
<input type="checkbox" name="like" value="SPRING">스프링
<input type="checkbox" name="like" value="DATABASE">DB
<label>
<label for="id값">: id값을 넣고 글자를 누르면 id가 들어있는 태그에 포커스가 맞춰짐.
태그 관련해서 계속 보다보니까 아래 속성들이 너무 헷갈려서 정리해봄!
id 속성
:고유한 식별을 목적으로 하는 경우 사용한다. 중복 불가능
class 속성
:여러 태그를 하나로 묶어서 사용할 수 있다.(스타일을 새로 넣어주고 싶은 td태그들을 class로 묶었다!)
name 속성
:form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성. 중복 가능
value 속성
: 서버로 넘어가는 데이터. 값
*혼자 공부하면서 궁금했던 것!
<webapp와 WebContent의 차이>
교육을 들으면서 실습했을때는 webapp 밑에 예제파일을 만들었는데 개인 노트북에서 하니까 WebContent가 생성됐다.
둘의 차이점이 뭐지?!
=> webapp는 Maven 형식으로 세팅이 되어 있기 때문이었다!!!!
아무래도 교육장과 개인노트북의 설치 방식, 버전이 달라서 차이가 생긴듯하다.
큰 차이는 아닌 것 같은데 묘하게..찝찝해...
일단 교육을 들으면서 느꼈던 점은
1. 머리로는 알겠는데 막상 손으로 하려니 잘되지 않는다. 아는 내용이더라도 손 코딩을 직접 해보는 습관을 들여야겠다.
2. 매일 들은 내용을 꼭 따로 노트에 정리하면서 내용을 다시 이해하려고 노력해야겠다ㅠㅠㅠ
(TMI: 그리고 블로그를 작성하면서 다시 느낀 점은..
난 글 쓰는 재주가 0이라는 것.. 후후.. 세상에서 정리하는 게 제일 어렵고요..
좀 더 말을 가독성 있게 정리하는 법도 배워야 할 것 같다..!)
——————————————————————————
* 유데미 바로가기 : https://bit.ly/3V220ri
* STARTERS 취업 부트캠프 공식 블로그 보러가기 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.
'웅진씽크빅 스타터스 부트캠프 > 교육일지' 카테고리의 다른 글
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 6주차 학습 일지 (0) | 2023.01.01 |
|---|---|
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 5주차 학습 일지 (0) | 2022.12.25 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 4주차 학습 일지 (0) | 2022.12.16 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 3주차 학습 일지 (0) | 2022.12.09 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 2주차 학습 일지 (0) | 2022.11.28 |