HCD 랩스 11월 1주차 - 프론트엔드

우영·2025년 11월 3일

HDC 랩스 풀스택 1기

목록 보기

11/20

11/3 월 - HTML 마무리 및 CSS

assignment

프젝 마무리

review

서버와 통신하는 작업하고 넘어갈 예정
서버와 통신
로그인 -> WAS 서버로 넘어감 id,pw, ip, port, cookie,등등 정보가 날라감 -> WAS 안에 웹서버(APache)가 요청된걸 분석함. -> 정적페이지에 대한 요청 표준화된 폴더 구조 -> 서블릿컨테이너에 넘김 -> 웹서버가 실행 되면서 SQL을 실행 -> DBMS를 갔다가 다시 웹서버로 넘겨줌 -> WAS가 클라이언트에게 응답 -> 브라우저가 화면에 뿌려줌(HTML 형식으로 넘겨야만 인식가능)

표준화된 파일
- context
  - html, css,js,이미지,동영상
  - Web - InF
    - classes
    - lib
    - web.xml
WAS(Tomcat, weblogs 등등) - 웹서버를 포함, 웹서버는 자바를 해석 X
프로젝트때 뷰부터 백엔드까지 다 해봐야 함. 2번째 project 리액트 3번째 project nextjs
HTML에서 자바코드를 쓸 수 없어서 서버 쪽에서 어떻게 해야 하는지? 나중에 배움
양식 태그

정리

웹 표준
= 전 세계 개발자들이 공통으로 지키는 웹 기술 규칙
- HTML - 구조, CSS - 디자인, JavaScript - 동작

http://localhost:8088/frontend/html/basic.html

http - 프로토콜
localhost - 서버 IP
8088 - 포트 번호
frontend - context(프로젝트)
html/basic.html - 실행될 파일 경로

HTML 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
  </head>
  <body>
    <h1>HTML 연습하기</h1>
  </body>
</html>

<body> : 화면에 보이는 내용
<태그> : 열고 닫는 구조
<h1>제목</h1>
<태그 속성="값"> 형태로 옵션 추가 가능

이미지 태그 img

<img src="경로" width="300" height="200">

절대경로 : /로 시작 (/frontend/images/bts1.jpg)
상대경로 : 현재 파일 기준으로 찾음(../images/bts2.jpg)
. : 현재 폴더
.. : 상위 폴더

하이퍼링크

<a href="url" target="_blank">이동하기</a>

href : 이동할 주소
target ="_self" : 현재값
target= "_blank" : 새 탭에서 열기

리스트 태그

순서 있는 리스트 → <ol><li></li></ol>
순서 없는 리스트 → <ul><li></li></ul>

테이블

<table border="1">
  <tr><th>이름</th><th>나이</th></tr>
  <tr><td>홍길동</td><td>99</td></tr>
</table>

tr : 한 행
th : 제목 
td : 컬럼

폼(form)

<form method="post" action="/login">
  <input type="text" name="id">
  <input type="password" name="pw">
  <input type="submit" value="로그인">
</form>

method : 전송방식 get/post 
action : 서버로 보낼 url
name : 서버에서 데이터 구분용

레이아웃 & 시맨틱 태그

<div> : 묶음 (레이아웃용 박스)
<header>:상단 영역
<nav>:메뉴
<main>, <section>, <article>:	본문
<footer>: 하단부

~HTML

CSS(Cascading Style Sheet)
= HTML이 ‘무엇을 보여줄지’를 정한다면,
CSS는 ‘어떻게 보여줄지(디자인, 배치)’를 정한다.
CSS 작성 방법 3가지

내부 스타일 (internal) : <head> 안에 <style>로 작성
외부 스타일 (external) : .css 파일로 따로 작성 후 <link>로 연결
인라인 스타일 (inline) : 태그 안에 직접 작성

CSS 우선순위
= 선언 위치 : inline() > internal > external
= 선택자 종류 : id > class > 태그 > 전체(*)
CSS 기본 문법

선택자 {
  속성명: 값;
  속성명: 값;
}
p {
  color: blue;
  font-size: 20px;
}

선택자(Selector)란?
= HTML의 특정 요소를 선택해서 스타일을 적용하는 문법

가상선택자
= 실제로 존재하지 않는 특정상태나 위치를 선택할 때 사용
:first-child - 첫 번째 자식
:last-child - 마지막 자식
:nth-child(n) - n번째 자식

<link rel="stylesheet" type="text/css" href="../common/css/mystyle2.css">

link rel -> relation 어떤 관계가 있는지 알려줌 스타일 관계라는 뜻
type -> 연결된 파일의 종류 (css문서라는 뜻)
href -> 파일의 경로

클래스 선택자 (.)
id는 선택된 하나만, 클래스는 클래스로 정의한 모든 것들 .class로 선택함

div > VS div 공백

div > ->div의 직속 자식만 다른 태그 나오면 끊김
div 공백은 자손 전부 다

.item.img(공백없음) VS item. img(공백있음) VS .item .img
.item.img(공백없음) : item과 img 두개의 클래스가 동시에 있는 경우 ex) "item img"
.item img(공백있음) : item안의 img(부모-자식 관계)
.item .img(공백있음): item 안의 img 클래스가 있는 경우

11/4 화 - HTML 마무리 및 CSS

assignment

프젝 마무리 - o
css_hover_position_exam.html 다시해보기

review

display
= 화면에 이 요소를 어떻게 보여줄지 결정하는 속성
- block : 한 줄 전체 차지하는 박스 (div, p, h1 등 기본값)
- inline : 글자처럼 옆으로 나란히 배치
- none : 화면에서 완전히 사라짐(숨김용)
  
  “이 태그를 눈에 보이게 할까? 숨길까?
  그리고 보인다면 어떻게 자리 차지하게 할까?”
  를 정하는 것

position
= HTML 요소가 화면(문서)에서 어떤 기준으로, 어떤 위치에 배치될지를 결정하는 속성
- static : 기본배치
- relative : 자기 자신 기준으로 움직임 단,원래 자리의 공간은 비워둔 채로 남아 있음. 그 자리를 이미 차지한 것으로 간주
- absolute : 가장 가까운 position 지정 부모 없으면 body 기준
- fixed : 브라우저 창을 기준 스크롤해도 항상 같은 위치 고정

인라인 요소 : 자기 사이즈 만큼만 옆으로 출력됨
블록요소 : 한라인을 차지

11/5 수 - CSS

assignment

프젝 마무리 - o
css_hover_position_exam.html 다시해보기

review

블록은 세로 방향,

css_float_layout_exam1.html
1. div로 구조를 나누는 과정에서 따로따로 하지 말고 공통된건 하나로 묶어서 처리하기
2. float로 처리되면 밑에까지 적용되서 밑에 clear 작업을 함. 그럼 위에꺼를 인식해서 그 밑부터 다시 적용됨. 즉 float된 요소의 영향 범위를 끊고, 다음 줄부터 다시 정렬 시작

css_card_layout_test2.html
1. 컨테이너는 아이템임
2. 바디에다가 flex를 줘야함.

layout2.css

layoutstyles.css

업로드중..

11/6 목 - Javascript

assignment

css_hover_position_exam.html 다시해보기
선택과제 2개

review
layout6.css - 그리드 써서 내가 품 정리 필요

1. 자바스크립트 사용방법
	1) body태그 내부에서 정의하고 사용하는 방법
		<script></script>태그 내부에서 정의하고 사용
		
	2) head태그에 functi2on을 정의하고 사용하는 방법
		<script></script>태그 내부에서 정의하고 사용
	3) 외부문서에서 정의하고 연결해서 사용하는 방법
	
	4) inline으로 사용
		- 이벤트핸들러 : 이벤트가 발생했을때 실행되는 코드를 등록
		

2. 문법
	1) 명령문
	2) 변수
		변수 선언문 변수명 = 값;
		
	   - 자바스크립트는 변수를 선얼할때 타입을 선언하지 않지만 내부적으로는 타입이 존재
	   - 변수를 선언할때 변수 선언문과 함께 변수를 정의
	   - ECMAScript6(ES6)버전 이전 버전은 var키워드로 변수를 선언하고 정의
	      -------------
	      자바스크립트표준을 정의한 규격
	   - ECMAScript 6버전 이후 버전은 let과 const를 이용해서 작업하도록 권고 
	   ①②③④⑤⑥⑦⑧⑨⑩①②③④⑤⑥⑦⑧⑨⑩
	   ① var
	   ② let
	   ③ const
	3) 연산자
	4) 제어구문
		- 조건제어문 - if, switch
		- 반복제어문 - for, while, do-while
		
3. 함수
4. 이벤트
5. 내장객체
-------------- 11/6일 목표

6. 브라우저객체
7. DOM
8. 데이터처리
	1) JSON
	2) 사용자정읙객체