유데미 부트캠프 3기 백앤드 1주차

박종현·2022년 11월 27일
개발자부트캠프백엔드부트캠프부트캠프후기스타터스부트캠프유데미유데미부트캠프유데미코리아취업부트캠프
0

유데미 부트캠프3기 백앤드

목록 보기
1/19
post-thumbnail

유데미 취업 부트캠프 백앤드 과정에 참여하게 되었다. 복습과 개별학습을 통해 기본기와 역량을 더 쌓아갈 수 있는 기회가 될 것 같다.
매 주차 학습내용을 기록하며 개별적으로 학습하게 될 기술들도 정리하며 의미있게 이 공간을 채워보자!

웹 개발 시작하기

웹이란?

: 월드 와이드 웹(World Wide Web)이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간이다.
간단히 줄여서 WWW나 W3라고도 부르며, 간단히 웹(Web)이라고 가장 많이 불린다 -TcpSchool 참조-

네트워크란?

: 네트워크란 둘 이상의 컴퓨터와 이들을 연결하는 링크의 조합이다.

서버

: 서버는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다.

  • 네트워크상에서 데이터를 교환하기 위해 규격화된 통신수단 ⇒ 프로토콜(Protocol)
    • 네트워크상에서 웹 통신을 위한 프로토콜 => Http Protocol
  • 웹서버 ex) iis, apache, nginx
    • Client PC에서 동작 할 정적 Web Page를 생성하여 Client PC에 전달
  • 하나의 서버에는 하나의 포트만이 할당될 수 있다. → 같은 포트 서버 여러개 실행할 수 없다

클라이언트 → 서버에 접속(Access) 하여 기능 사용

  • 웹서버와 통신하기 위한 클라이언트 : 웹브라우저
  • 웹브라우저를 통해 서버에 자원을 요청하고 응답받음

프론트앤드 & 백앤드

  • 프론트앤드
    • 사용자에게 보이는 영역, 즉 브라우저 화면에 보이는 것을 다룬다
    • html, css, javascript
      • 프론트앤드 프레임워크 : react.js, vue.js, …
  • 백앤드
    • 사용자에게 보이지 않는 영역, 백앤드가 어떻게 구성되어있는지는 클라이언트는 볼 수 없고 관심사가 아님
    • 프론트앤드를 통해 전달받은 데이터를통해 데이터를 조회 및 조작한다(CRUD)
    • WAS, Database

HTML & CSS & Javascript

  • HTML
    • 웹브라우저의 뼈대
  • CSS
    • 웹 문서를 꾸미는 요소
  • Javascript
    • 사용자의 동작에 반응하도록 웹문서를 프로그래밍을 통해 동적으로 변경시킴

HTML 기본 문서 만들기

HTML(Hyper text markup lagnuage)

  • 네트워크 상에서 http 프로토콜을 통해 전달되는 문서
  • 컨텐츠와 컨텐츠를 표시할 구조만 표시하는 언어
  • 컨텐츠를 표시할 구조인 마크(Mark)로 둘러싸인 언어.
  • 확장자 → html, htm
    • 표시 규칙 → tag, attribute(속성)
    • 내용물 → contents
    • <tag명 attribute명="attribute값">내용물</tag명>
    • eg) <h1 style="color: red">hello world</h1>
      • tag : <h1></h1>
      • attribute : style=”color: red”
      • content : hello world
  1. 텍스트 표현 태그
    • <hn> : 제목 표시 (h1 ~ h6)
    • <p> : 본문 표시
    •   : 공백 표시
    • 부등호 표시 : &lt; → < , &gt; → >
    • 서체 속성 변경 : <b> → 굵게, <i> → 이탤릭체
  1. 목록 태그
  • <ol> : 순서가 있는 목록
    - type : 순서 타입 변경 (default : 번호 형식)
    - start : 시작 순서 설정
  • <ul> : 순서가 없는 목록
    - type : 항목 모양 변경 가능 (default : 번호 형식)
  • <li> : 항목
  1. 테이블 태그
    • <table> : 테이블 구조 생성
    • <tr> : 테이블 행
    • <td> : 테이블 열
      • rowspan : 행 병합, value: 병합할 행의 수
      • colspan : 열 병합, value: 병합할 열의 수
    • <caption>: 테이블 제목
    • <th> : <tr> 태그 내부에 사용하여 column의 제목
    • <thead>, <tbody>, <tfoot> : 명시적 테이블 header, body, footer

  1. 멀티미디어 태그

    • <img>,<audio>,<video>

      • common attributes
        • src : 소스 경로
      • <img> : 소스로부터 이미지 로드
        • 확장자 : jpeg, jpg, png …
        • alt : 소스로부터 이미지 로드 실패 시 텍스트의 형태로 노출
        • width : 이미지의 가로 길이 설정
        • height: 이미지의 높이 설정
      • <audio> : 소스로부터 오디오 로드
        • 확장자 : mp3 …
        • control: 컨트롤러 표시
        • autoplay : html페이지 로딩시 자동 음악 재생
        • loop : 자동재생
      • <video> 소스의 video 재생
        • 확장자 : mp4 …
        • control: 컨트롤러 표시
        • width, height
        • poster : 재생되기 전에 표시할 이미지(썸네일)

  2. 하이퍼링크 태그

    • <a> 태그 : 클릭 시 지정한 url(혹은 현재 문서의 특정 태그 위치, 태그의 id 또는 class를 통해 명시)로 이동하는 하이퍼링크 생성
      • href : 이동할 url

  3. 폼 관련 태그

  • <form>
    action : 입력받은 데이터를 전달(백앤드, JSP, 서블릿)
  • <lable> : input 엘리먼트에 대한 설명
    for : input 엘리먼트의 id 속성값과 연결하여 포커스
    - <input>
  • type : 입력 받는 데이터 타입,
    - text, password, hidden, radio, submit …
    - submit: form태그의 액션으로 전송한다.
    - hidden: 사용자에게 보이지 않게 value 전송
    - submit: 데이터를 전달하여 form의 action을 실행한다
    - image : 이미지 소스를 입력하여 이미지를 로드 하고 클릭 시 submit
    - reset : form태그 내부에 입력된 모든 값(inputs)들을 초기화 한다
    - maxLength : 최대 길이 설정
    - readOnly : 입력, 수정 불가 하도록 설정
    - required : 필수 입력 필드로 설정
    - pattern : 정규표현식(Regex)을 통한 입력값 validation → eg) 영문자, 숫자의 5~10글자 ⇒ [A-z0-9]{5,10}
    - value: 값을 지정할 수 있다

MarkDown이란 ?

markdown 언어는 markup 언어의 일종으로 컨텐츠를 표시할 구조에 해당하는 html 태그를 특정의 문자로 대체한 언어이다.
eg) <h1> → #

HTML에 css 적용하는 방법

  1. 인라인 방식

    • 엘리먼트 태그 내부 style 속성에 css 설정
    • eg) <p style="color: blue; "> inline </p>s

  2. 내부파일 지정 방식

    • html 파일 내에 style 엘리먼트에 css 정의

      <style type="text/css">
	...
</style>

  3. 외부파일 지정 방식

    • css파일을 링크하여 스타일 적용, link 앨리먼트를 통해 특정 경로의 css 파일을 가져온다
    • eg) <link href="my.css" rel="stylesheet">

css가 우선적용되는 순서는 인라인 방식, 내부파일 지정방식, 외부파일 지정방식 순이다
우선순위가 높은 스타일이 우선순위가 낮은 스타일을 덮어쓴다

CSS 기본 문법

선택자(Selector)

Reference(MDN Document): css를 적용할 태그를 선택하는 문법이다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

  1. 태그 선택자

    <style>
	a {}
</style>

  2. id 선택자

    <style>
    #idname{}
</style>

  3. 클래스 선택자

    <style>
	.classname{}
</style>

    우선순위는 id선택자 > 클래스 선택자 > 태그 선택자

    CSS 적용방식, 선택자를 통한 모든 우선순위를 무시하고 CSS 적용하기 위해서는 !important 속성을 사용할 수 있다

    eg)

    <style>
   a {
   color:orange;
   }
   #apple {
   color:red;
   }
   .banana {
   color:yellow;
   }
</style>

효과(Declaration)

선택된 태그를 어떻게 표현할 지 정하는 문법이다.

Reference(MDN Document) :

상대단위 em, rem, %
상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위

  • em : 해당 단위가 사용되고 있는 요소의 폰트 사이즈
  • rem : 최상위 요소(html) 사용되고 있는 요소의 폰트 사이즈(16px), 0.5rem ⇒8px
  • % : 최상위 요소(html) 사용되고 있는 요소의 폰트 사이즈는 100% 16px, 200% ⇒ 32px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	@import url('https://fonts.googleapis.com/css2?family=Homenaje&display=swap');
	#target {
	font-family: none(브라우저에서 지원하지 않는 폰트라면 무시된다), sans-serif; 
	font-size: 3rem;
	font-style: italic; 
	font-weight: lighter; 
	font-variant: small-caps;
	color: #0085cf; /*HSV*/
	background: rgb(255,0,255); /*BGR */
	text-align: center;
	line-height: 100px;
	width: 50%;
	height: 100px;
	text-decoration: underline;
	}
	#googlefont{
	font-family: 'Homenaje', sans-serif;
	}
	.normal{
	background: silver;
	}
	#link {
	text-decoration: none;
	text-shadow: 5px -5px 5px gray; /* x y blur color */
	text-transform: uppercase;
	}
	ol {
	list-style-type: square;
	}
	ul {
	list-style-type: upper-roman;
	}
	#pinkol{
	list-style-image: url("/css/images/pinkol.png");
	list-style-position: inside;
	}
	table, td, th {
	border: 2px solid purple; 
	border-collapse: collapse;
	padding: 4px;
	}
	th {
	background: skyblue;
	}
	td {
	background: #FFFFCC;
	}
	tfoot {
	text-align: center;
	color: red;
	}
</style>
</head>
<body>
	<h1 id="target" class="normal">first line</h1>
	<h1 id="googlefont" class="normal">second line</h1>
	<h1 class="normal">third line</h1>
	<h1><a id="link">none underline link</a></h1>
	
	<ol>
		<li>1번 항목</li>
		<li>2번 항목</li>
		<li>3번 항목</li>
	</ol>
	
	<ol id="pinkol">
		<li>1번 항목</li>
		<li>2번 항목</li>
		<li>3번 항목</li>
	</ol>
	
	<ul>
		<li>1번 항목</li>
		<li>2번 항목</li>
		<li>3번 항목</li>
	</ul>
	
	<table>
		<caption>row span, col span</caption>
		<thead>
			<tr>
				<th>1st col title</th>
				<th>2nd col title</th>
				<th>3nd col title</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">span row1 col1</td>
				<td>row1 col2</td>
				<td>row1 col3</td>
			</tr>
			<tr>
				<td>row2 col2</td>
				<td>row2 col3</td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td colspan="3">column span</td></tr>
		</tfoot>
	</table>
	
</body>
</html>

profile
박종현
다음 포스트

유데미 부트캠프 3기 백앤드 2주차

0개의 댓글