close
프로필 배경
프로필 로고

Byte by Byte

웹 개발 일기/[LG유플러스] 유레카 · 2025. 1. 20. fullscreen 넓게보기

[학습 기록] Day1: OT, HTML

 

비대면 학습이다보니 집중력 향상을 위해 앞으로의 수업 내용을 꾸준히 기록하려 한다.
어떤식으로 정리해야 가독성이 좋을지 티스토리는 아직 익숙하지 않지만, 우선 최대한 작성해보자!
 
오늘은 첫 수업이기에,
비대면 수업은 어떻게 이루어지는지 전반적인 분위기 위주로 리뷰하듯이 작성했다.
다음 글 부터는 수업내용 정리 위주로 작성할 예정이다.

 

첫 수업 OT
  • 프론트엔드 비대면 강사님 소개
  • 프론트엔드 과정 소개
  • Computing paradigm의 변천

프론트 비대면 강사님의 소개로 첫 수업을 시작했다.
우선, 발음이나 전달력이 너무 좋으셔서 듣는 내내 이걸로 불편할 일은 없다는 안심이 되었다.
정말 다양한 기관에서 전담 강사로 경력도 많으셨다. 
싸피에서도 7~12기까지 하셨다고 하니 신뢰가 간다!
 
이후에는 과정 소개와 Computing paradigm에 대한 설명이 이어졌다.
IT기술의 발전은 사용자 편의성이 아닌, 개발자 편의성으로 인해 이루어졌다는 포인트를 중점으로,
어쩌다 이런 프로토콜이 나왔고, 어쩌다 이런 프레임워크가 나왔는지 등에 대한 이야기를 해주셨다.
 
xml형식이 나오게 된 과정 등 방대한 양의 용어들을 역사 수업처럼 흐름에 맞춰서 설명해주셨기에,
첫 수업답게 웹을 공부함에 있어서  알아야 할 전반적인 용어들을 훑어볼 수 있었다.
 
아쉬운 점은 정말 방대한 양을 설명해주셨는데 오늘은 교안이 따로 없어서, 내용정리에 어려움이 있었다.
이미지도 저작권 이슈로 인해 캡처해서 배포하면 안된다고 해서 아쉽다.

 
 

배운 내용 정리

유레카의 경우 비전공자/전공자 반이 나뉘어져 있지 않다.
그래서 첫 수업때 설문조사를 통해 30명의 배경지식을 파악하고 진행하시는데, 우리반의 경우 html을 아예 모르는 분이 4명이었다고 한다.
그래서 w3schools를 기반으로 빠르게 진도를 나가셨다. 그 외에는 이 문서를 통해 따로 공부해오라고 하셨다.
아예 노베이스가 듣기에는 조금 버거운 듯 하지만 개발 공부는 공식 문서 기반으로 혼자서 부딪혀야 한다고 들었기에.....나도 복습하려고 한다.
 

A Simple HTML Document 

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
</head>
<body>

	<h1>My First Heading</h1>
	<p>My first paragraph.</p>

</body>
</html>

가장 기본적인 HTML 구조이다.

- <!DOCTYPE html>: 이 문서가 HTML5임을 정의
- <html>: HTML 페이지의 root 요소
- <head>: HTML 페이지에 대한 메타 정보가 포함되어 있음
- <title>: HTML 페이지의 제목을 지정(브라우저 제목 표시줄이나 페이지 탭에 표시됨)
- <body>: 문서의 본문을 정의하며 제목, 문단, 이미지, 하이퍼링크, 표, 목록 등 모든 요소가 표시됨
- <h1>: 큰 제목(heading)을 정의하는 요소
- <p>: 문단을 정의하는 요소

The <!DOCTYPE> Declaraion

- <!DOCTYPE>은 문서 유형을 나타내며, 브라우저가 웹 페이지를 올바르게 표시하는 데 도움이 됨

- 페이지 상단(HTML 태그 앞)에 한 번만 나타나야 함

- <!DOCTYPE>에서는 대소문자를 구분하지 않음

- HTML5에 대한 선언: <!DOCTYPE html>


href 속성
- 태그 <a>: 하이퍼링크를 정의
- href 속성: 링크가 이동하는 페이지의 URL을 지정

<a href="https://www.w3schools.com">Visit W3Schools</a>


src 속성
- 태그 <img>: HTML 페이지에 이미지를 삽입하는 데 사용
- src 속성: 표시할 이미지 경로 지정

<img src="img_girl.jpg">

- URL 지정 방법 두 가지
1. 절대 URL - 다른 웹사이트에 호스팅된 외부 이미지로의 링크

 예) src="https://www.w3schools.com/images/img_girl.jpg" .

외부 이미지는 저작권의 보호를 받을 수 있다. 사용 허가를 받지 않으면 저작권법을 위반할 수 있다.
또한 외부 이미지를 제어할 수 없으며 갑자기 제거되거나 변경될 수 있.


2. 상대 URL - 웹사이트 내에 호스팅된 이미지에 대한 링크
여기서 URL에는 도메인 이름이 포함되지 않는다.
URL이 슬래시 없이 시작하면 현재 페이지에 상대적
예) src="img_girl.jpg".
URL이 슬래시로 시작하면 도메인에 상대적
예) src="/images/img_girl.jpg".

상대 URL을 사용하는 것이 좋다. 도메인을 변경해도 깨지지 않는다.


lang 속성
웹 페이지의 언어를 선언하려면 lang 내부에 속성을 포함해야 한다.
이는 검색 엔진과 브라우저를 지원하기 위한 것
국가 코드도 추가할 수 있다.
다음 예에서는 언어로 영어를, 국가로 미국을 지정

<html lang="en-US">


heading 요소
- heading은 중요하다
→ 검색 엔진은  heading을 사용해 웹 페이지의 구조와 내용을 색인화하기 때문
- heading에는 기본 크기가 있지만, CSS속성을 사용해 모든 제목의 크기를 조정가능
- 브라우저는 heading 앞뒤에 자동으로 공백을 추가함

<p> 요소
- 브라우저는 문단 앞과 뒤에 자동으로 여백을 추가함
<hr> 요소
- 주제별 구분을 정의
- 콘텐츠를 구분하거나 변경 사항을 정의하는데 사용
<br> 요소
- 줄 바꿈을 정의
- 새로운 문단을 시작하지 않고, 줄 바꿈을 원할 때 사용

<pre> 요소
- 미리 형식이 지정된 텍스트를 정의
- 요소 내부의 텍스트는 공백과 줄 바꿈이 모두 유지된다.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>


<HTML 텍스트 서식>
- HTML은 특별한 의미를 가진 텍스트를 정의하기 위한 여러 요소가 포함되어 있음

  • <b>- 굵은 글씨
  • <strong>- 중요한 텍스트
  • <i>- 이탤릭체 텍스트
  • <em>- 강조된 텍스트 
  • <mark>- 표시된*marked 텍스트 : 형광펜 표시가 생긴다
  • <small>- 더 작은 텍스트
  • <del>- 삭제된 텍스트
  • <ins>- 삽입된 텍스트
  • <sub>- 아래 첨자 텍스트
  • <sup>- 상위 첨자 텍스트

<HTML 인용 및 인용 요소>
- <blackquote>: 다른 출처에서 인용된 섹션을 정의. 일반적으로 들여쓰기가 됨
- <q>: 짧은 인용문을 위한 태그. 일반적으로 인용문 주위에 따옴표 삽입
- <abbr>: 약어나 두문자어를 정의. 브라우저, 번역 시스템, 검색 엔진에 유용한 정보를 제공할 수 있음
→ 글로벌 제목 속성을 사용하면 요소에 마우스를 올리면 약어/두문자어에 대한 설명이 표시됨

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

- <address>: 문서나 기사의 작성자/소유자의 연락처 정보를 정의. 일반적으로 기울임꼴/앞과 뒤에 줄바꿈
- <cite>: 창작물(책, 시, 노래 등)의 제목을 정의. 일반적으로 기울임꼴로 렌더링
- <bdo>: 현재 텍스트 방향을 재정의하는 데 사용

<bdo dir="rtl">This text will be written from right to left</bdo>


<HTML의 주석>

<!-- Write your comments here -->


<HTML HEX 색상>

16진수 색상은 #RRGGBB로 지정된다.
여기서 RR(빨간색), GG(녹색), BB(파란색) 00과 ff 사이의 16진수 값으로 색상의 구성 요소를 지정

검은색을 표시하려면 모든 색상 매개변수를 00으로 설정합니다(예: #000000).

흰색을 표시하려면 모든 색상 매개변수를 ff로 설정합니다(예: #ffffff).
회색을 표시하려면 종종 세 가지 매개변수 모두에 동일한 값을 사용하여 정의(예: #404040).


<HTML 링크>

    • 요소를 사용하여 <a>링크를 정의합니다
    • 속성을 사용하여 href링크 주소를 정의합니다.
    • 속성을 사용하여 target링크된 문서를 열 위치를 정의합니다.
    • 이미지를 링크로 사용하려면 <img>요소(내부 ) 를 사용하세요.<a>
    • mailto:속성 내부의 스키마를 사용하여 href사용자의 이메일 프로그램을 여는 링크를 만듭니다.

알아둘 것

- end tag(종료 태그)를 잊지말 것 : 예기치 못한 결과와 오류가 발생할 수 있다.
- empty HTML Elements: 내용이 없는 요소로, closing tag가 필요없다.
- HTML 태그는 대소문자를 구분하지 않으나, 소문자를 권장한다.
- HTML 표준은 소문자 속성 이름을 요구하지 않으나, 소문자를 권장한다.
- 속성의 값은 따옴표 사용을 권장한다.

 
 

회고
  • 첫 수업 나의 집중도
  • 비대면 수업 리뷰
  • 수강생들 간 분위기

첫 날이라 아직은 zoom 공부에 바로 집중하기는 익숙치 않았던 것 같다.
모니터 각도도 목이 아프지않게 열심히 조정했구....
무엇보다 출결이 굉장히 엄하기 때문에 반드시 수업시간 동안 웹캠에 얼굴이 다 나와야 한다(비대면임에도 출결 관리는 아주 잘 된다).
그러나 중간에 화장실 이슈로 자리를 비우고 싶었는데, 마음대로 되지 않아서 엄청 힘들었다.
(자리를 비우려면 보고를 해야하는데, 바로바로 소통이 되지 않아서...)
화장실을 못가서 친구한테 절규하고 있는 내 모습이 뭔가 웃겼다ㅋㅋㅋㅋㅋㅋㅋ
이때문에 오늘은 집중을 잘 못했지만, 내일부터는 차근차근 적응해서 빡공하고 싶다.
 
강사님의 마이크 품질, 화면공유 품질, 통신 상태가 다 좋아서 강의 듣기에 거슬리는 점이 없었다.
코로나 시절 대학교에서 2년동안 zoom으로 수업을 들어본 나는
저 세개가 잘 지켜지지 않으면 강의 듣기 얼마나 힘들지 알기에ㅜㅜ
 
수강생들 간 분위기는 첫날임에도 나름 화기애애 하다!
마곡사옥에서 진행했던 OT에서 딱 한번밖에 만난 적 없는 조원들이지만 다들 으쌰으쌰 하며 지낸다.
다들 첫 만남부터 레크레이션에 적극적으로 참여했고, '아 하기 싫은데' 이런 비협조적인 사람들은 기본적으로 없었다.
나이대도 비슷했고, 다들 취업을 목표로 하는 열정적인 분들이셔서 누구와 같이 프로젝트를 해도 안심이 될 거같다.
수강생은 정확히 30명이었고, 첫날부터 퇴소하는 사람은 없었다.
비대면 반을 선택하신 분들은 마곡에서 진행하는 OT는 참여하는게 좋다는 생각이 든다.

카톡내용

 
첫 날부터 재밌는 우리 조원들......
오해는 하지마세요 저희 모두 열심히 공부하는 사람들입니다 ^^v
 
내일부터는 더 빡센 학습내용으로 돌아오겠습니다 꾸벅 ✨

저작자표시 비영리 변경금지 (새창열림)

'웹 개발 일기 > [LG유플러스] 유레카' 카테고리의 다른 글

[학습 기록] Day5: JS  (0) 2025.01.24
[학습 기록] Day4: CSS프레임워크, JS  (2) 2025.01.24
[학습 기록] Day3: CSS(flexbox), Bootstrap  (4) 2025.01.22
[학습 기록] Day2: HTML, CSS  (0) 2025.01.21
[LG 유플러스] 유레카 2기 프론트엔드 합격후기 (비전공자)  (6) 2025.01.16

티스토리툴바