오늘 나는
오늘은 서버 쪽에서는 지난 시간에 웹호스팅 했던 내용에 대한 조금 더 깊은 내용을 다뤘고 필요에 의해 웹호스팅/서버호스팅 차이, Telnet vs SSH, 리눅스 파일 권한(rwx), MVC 구조까지 찾아보았다. 프론트엔드에서는 자주 쓰는 레이아웃/폼/CSS 선택자(가상 클래스 포함)를 정리했고, “화면을 만들기”와 “서버에 접근/운영하기”의 연결 지점을 같이 본 날이었다.
A. 네트워크/서버 기초
1. 웹호스팅 vs 서버호스팅
- 웹호스팅: 서비스(apache 등)에 “연결/사용 권한”을 받아서 웹을 올리는 형태(보통 제한이 많음)
- 서버호스팅: 서버 자체에 대한 권한을 받아 “운영체제/환경부터 직접 관리”하는 형태
⇨ 리눅스 설치/설정으로 이어질 내용이라, 지금 개념을 잡아두면 이후 실습에서 덜 헤맬것
2. Telnet과 SSH (원격 접속)
- Telnet(23 포트)
- 오래된 원격 접속 프로토콜
- 데이터가 일반 텍스트로 전달되어 보안에 취약
- SSH(22 포트)
- 원격 접속/명령 실행/파일 전송까지 포함하는 사실상 표준
- 데이터 암호화 + 인증(공개키 기반 등)으로 Telnet보다 안전
3. PuTTY
- Windows에서 SSH 접속할 때 많이 사용하는 클라이언트 도구
- 권한/접근이 제대로 설정되지 않으면 타임아웃 같은 에러가 발생할 수 있음
- 네트워크(방화벽/포트), 계정 권한, 서버 상태 등 점검 포인트로 이어짐
B. 리눅스 파일 권한(rwx) 기초
• r(read): 읽기
• w(write): 쓰기
• x(execute): 실행
예시: rw-r--r--
- 세 개씩 끊어서 해석하며 각각 소유자, 그룹, 기타 사용자를 의미한다.
- 예시의 경우에는 소유자는 읽고 쓰기가 가능하고, 그룹은 읽기만 가능하고, 기타 사용자는 읽기만 가능하다.
⇨ 이 개념은 “서버에 파일 올렸는데 왜 접근이 안 되지?” 같은 문제를 해결하는 기본 도구가 된다.
C. MVC 프레임워크 구조 감 잡기
- MVC(Model-View-Controller)는 화면(View), 데이터/로직(Model), 요청 처리(Controller)를 분리하는 구조
- 라우터(router)를 통해 요청을 중앙에서 관리하면
- 접근 제어/인증 같은 보안 로직을 한 곳에서 처리하기 쉬워지고
- URL 구조/기능 확장이 체계적으로 가능해진다
D. HTML Display & Layout 핵심
1. Block vs Inline
- Block
- 기본적으로 줄바꿈 발생
- 보통 너비 100%를 차지
- Inline
- 콘텐츠 크기만큼만 차지
- 상하 여백 영향이 제한적(레이아웃에서 헷갈리기 쉬운 지점)
2. display 속성
- block / inline / inline-block
- inline-block: 인라인처럼 나란히 배치하면서도 width/height 지정 가능
- none
- 화면에서 요소를 아예 제거(공간도 사라짐)
- JS로 show/hide 구현할 때 자주 사용
3. iframe 임베딩
- 문서 안에 다른 문서를 포함(embedded)
- a 태그의 target과 iframe의 name을 맞춰야 특정 iframe 영역에 페이지를 띄울 수 있음
E. HTML Forms 정리(서버로 데이터 보내기)
1. form 기본 구조
- form: 입력 내용을 서버로 전송하는 컨테이너
- action: 데이터를 보낼 서버 URL
- method: 전송 방식 (GET/POST)
2. 입력 보안(중요 포인트)
- 프론트에서 required 같은 검증은 “편의/1차 방어”
- 진짜 검증은 서버/DB 레벨에서 반드시 필요(SQL 인젝션 등 고려)
3. 버튼/입력 타입
- radio: name이 같은 것끼리 한 그룹(하나만 선택)
- checkbox: 다중 선택
- (PHP) name="menu[]" 처럼 배열로 받아야 다중 값이 전송됨
- select > option : 드롭다운 선택
4. JS/AJAX
- AJAX로 전송하면 페이지 전체 새로고침 없이 자연스럽게 UX를 만들 수 있음
F. CSS 선택자 + 우선순위
1. 선택자 관계
- 자손 선택자: A B → A 안의 모든 B
- 자식 선택자: A > B → A의 직계 자식 B
- 일반 형제: A ~ B → A 뒤에 오는 모든 형제 B
- 인접 형제: A + B → A 바로 뒤의 형제 B
2. 우선순위(대략)
!important > 인라인 스타일 > id > class/가상 클래스/속성 > tag > *
G. CSS Pseudo-class(가상 클래스) & 동적 스타일
- 동적 가상 클래스: hover / active / focus / link / visited
- UI 상태: checked / enabled / disabled / valid / invalid
- 구조적: first-child / last-child / nth-child(2n, 2n+1 등 패턴) / first-of-type / empty / root
H. PWA
- PWA의 정의(오프라인/설치형 UX/캐시 전략)
- Service Worker, Manifest
미니 과제
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./css/02.css" />
<title>로그인 페이지 제작</title>
</head>
<body>
<div class="login-container">
<form action="/login" method="post">
<!-- id -->
<fieldset>
<legend>로그인</legend>
<!-- 아이디 -->
<div class="mb-3">
<label class="form-label">아이디</label>
<input
type="text"
id="uid"
class="form-control"
placeholder="아이디를 입력하세요."
maxlength="20"
required
/>
</div>
<!-- 비밀번호 -->
<div class="mb-3">
<label class="form-label">비밀번호</label>
<input
type="password"
id="pwd"
class="form-control"
placeholder="8자리 이상으로 입력하세요."
minlength="8"
required
/>
</div>
<!-- 추가 버튼 -->
<div class="mb-3 d-flex justify-content-between align-items-center">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember" />
<label class="form-check-label" for="remember">아이디 저장</label>
</div>
<a href="#" class="text-decoration-none samll text-secondary"
>비밀번호 찾기</a
>
</div>
<!-- 로그인 & 로딩 -->
<button type="submit" class="btn btn-primary w-100 mb-2">
로그인
</button>
<button type="button" class="btn btn-secondary w-100" disabled>
로딩중
</button>
</fieldset>
</form>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/01.css" />
<title>명함 카드 레이아웃</title>
</head>
<body>
<div class="card">
<img class="avatar" src="https://item.kakaocdn.net/do/b563e153db82fde06e1423472ccf192cd0bbab1214a29e381afae56101ded106" alt="프로필" />
<div class="info">
<span class="name">임승화</span>
<span class="role">Frontend Developer</span>
</div>
</div>
</body>
</html>짧은 회고록
내가 프런트엔드 공부를 포기하게 만들었던 파트에 결국 진입했다. 디자이너가 아닌 데다, 이 영역은 제대로 익히는 데 최소 한 학기 이상은 걸린다고 하셨지만, 내가 만든 화면이 🌸예쁘게🌸 보였으면 하는 욕심은 어쩔 수가 없다.
지금은 결과물이 너무 🌰밤티🌰같다. 조만간 더 깊게 배우겠지만, 미리 부트스트랩에 익숙해지는면 좋을 것 같다.
왜 생각한 대로 안되는 건데......
도시락도 락이다
수요일까지는 동기들과 서로를 알아가고 친해질 수 있도록, 매니저님이 점심 메이트를 정해 주셨다. 그리고 오늘부터는 각자 자율적으로 점심 시간을 보내게 됐다.
주변 물가가 워낙 비싸기도 하고, 길을 건너 이동하는 시간도 아깝게 느껴져서 전날 내가 좋아하는 반찬들을 사 두고 도시락을 챙겼다. 확실히 이동이 없어지니 여유가 생겼다. 양치까지 하고도 개인 시간이 30분이나 남았다.
언제까지 이렇게 아침 20분을 더 일찍 일어나 도시락을 쌀 수 있을지는 모르겠지만, 적어도 오늘만큼은 만족스러운 점심 시간이었다.
—————————————————————————————————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'부트캠프' 카테고리의 다른 글
| [한컴AI 아카데미 | 2026.04.04 | Day 5] 코딩 테스트(feat. 우물 안 개구리) (0) | 2026.04.04 |
|---|---|
| [한컴AI 아카데미 | 2026.04.03 | Day 4] 취미란 무엇일까 (0) | 2026.04.03 |
| [한컴AI 아카데미 | 2026.04.01 | Day 2] gyagoo.dothome.co.kr (0) | 2026.04.01 |
| [한컴AI 아카데미 | 2026.03.31 | Day 1] 내 인생이란 데이터의 패턴 (0) | 2026.03.31 |
| [한컴AI 아카데미 | 2026.03.30 | Day 0] 다시 초심으로 (0) | 2026.03.30 |