Post

[KT AIVLE] Spring 1일차 - 심화학습

Posted
By ZeroMaster
13 min read

0. 개요

오늘은 웹 전반적인 역사에서부터 Spring에서 Frontend 부분인 Html 부분을 집중적으로 학습하였습니다.

그러면 첫번째 Spring강의 정리를 시작하겟습니다!


1. backend와 frontend를 이해하기

강의 초반에는 Spring에대해 배우기전에 우리가 밟아가야할 코스를 설명하시면서 아래 질문들에대한 해결방법을 알려주셨습니다.

여러분은 어떤 개발자가 되고 싶으신가요?
어떻게 원하시는 개발자가 될 수 있을까요?

이러한 물음을 해결하기 위하여 아래 사이트를 참고하여 어떤것들을 공부해야하는지 확인할 수 있습니다.

Developer Roadmaps

이를 참고하여 원하는 개발자의 코스를 밟아가면 될 꺼 같습니다.


2. 프론트 엔드

프론트엔드 개요

  1. 프론트엔드란?
    • 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(UI)를 담당하는 부분.
    • 디자인, 이미지, 텍스트 등 화면에서 직접 상호작용 가능한 요소로 구성.
    • 사용자의 경험(UX)을 최적화하여 서비스를 제공하는 것이 목적.
    • 주요 사용 언어: HTML, CSS, JavaScript.
  2. 프론트엔드의 구성 요소
    • HTML: 웹 사이트의 구조를 정의.
    • CSS: 스타일링과 레이아웃 담당.
    • JavaScript: 동적인 상호작용을 구현.

프론트엔드 개발자의 역할

  1. 사용자 인터페이스 및 경험 설계
    • UI(User Interface)와 UX(User Experience) 중심으로 화면을 디자인하고 구현.
  2. 반응형 웹 디자인
    • 다양한 기기와 화면 크기에 따라 적절히 조정되는 디자인.
  3. 성능 최적화
    • 로딩 시간을 줄이고 효율적인 코드 작성으로 사용자 경험을 개선.
  4. 크로스 브라우저 호환성
    • 여러 브라우저에서 동일한 성능과 디자인 제공.
  5. 웹 표준 및 접근성 준수
    • 장애인도 포함한 다양한 사용자들이 쉽게 접근 가능하도록 제작.

사용자 인터페이스(UI)와 사용자 경험(UX)

  • 사용자 인터페이스(UI)
    • 정의: 사용자가 기기나 소프트웨어를 사용하는 화면과 상호작용하는 요소.
    • 구성 요소
      • 레이아웃: 정보와 요소 배치.
      • 시각적 디자인: 색상, 타이포그래피 등.
      • 상호작용 디자인: 버튼, 메뉴 등.
      • 탐색: 정보 검색과 이동을 쉽게 만드는 요소.
  • 사용자 경험(UX)
    • 정의: 사용자가 시스템, 서비스, 제품을 이용하며 느끼는 감정과 반응.
    • 핵심
      • 직관적인 인터페이스 설계.
      • 접근성 강화: 다양한 사용자 환경에서 쉽게 사용할 수 있도록 함.
      • 효율성: 사용자 목표를 빠르게 달성하도록 도움.

2. HTML

HTML의 정의

  • HTML은 웹 페이지를 생성하기 위한 표준 마크업 언어.
  • 웹 페이지의 구조와 콘텐츠를 정의.
  • 요소(Element)로 구성되며, 콘텐츠 표시 방법 및 레이아웃 지정.

HTML5의 특징

  1. 구조적 설계
    • 콘텐츠를 header, section, footer, nav, aside 등으로 세분화.
  2. CSS3 지원
    • 스타일링을 위한 기능 강화.
  3. JavaScript 통합
    • 동적인 웹 페이지 제작 가능.
  4. 다양한 API 제공
    • 드래그 앤 드롭, 웹 스토리지, 웹소켓 등의 API 활용.
  5. 멀티미디어 기능 강화
    • video, audio, canvas 등의 태그로 플러그인 없이 동작.
  6. 모바일 웹 지원
    • 다양한 모바일 플랫폼에서 통일된 경험 제공.

HTML 문서의 기본 구조

  1. HTML 문서의 구성 요소
    • <!DOCTYPE html>: 문서의 마크업 언어 형식을 선언.
    • : 문서의 시작과 끝을 나타냄.
    • : 메타데이터, 제목 등을 포함.
    • : 문서의 본문 내용 작성.
  2. 예제 코드
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>프론트엔드 프로그래밍 기초</title>
</head>
<body>
  <p>콘텐츠 내용</p>
</body>
</html>

HTML 작성 규칙

  1. 태그 대소문자 구분 없음
    • 와는 동일하게 동작.
    • 소문자로 작성하는 것을 권장(W3C 표준).
  2. 공백 처리
    • 연속된 공백과 줄바꿈은 하나의 공백으로 처리.
  3. 주석 작성
    • 주석은 로 작성.

2. HTML 기본 태그

태그의 속성

  • 기본 정리
    • 태그의 종속적인 정보를 표현하기 위해 사용함
    • 하나의태그에같은속성을한번이상쓸수없음
    • 속성에값이없는경우속성이름만작성할수있음
    • 태그의동작이나표현을제어하는역할을함
    • 각태그마다고유한속성들이있음
  • 종류
속성설명
id문서에서 유일한 식별자를 설정함. 주로 CSS나 JS에서 요소를 찾을 때 사용함
class요소의 클래스를 설정함. CSS에서 스타일 적용하거나 JS에서 요소를 선택할 때 사용함
style요소에 직접 인라인 스타일을 적용함. CSS 속성들을 ‘속성: 값’의 형태로 기술함
title요소에 대한 추가 정보를 제공하는 텍스트를 설정함
href<a> 태그에서 링크의 대상 URL을 지정함
src<img>, <audio>, <video>, <script> 태그에서 사용되며 외부 리소스의 경로를 지정함
alt<img>에서 사용되며 이미지를 설명하는 대체 텍스트를 제공함
type요소의 타입을 지정함
value<input>, <option>, <button> 등의 태그에서 사용되며 요소의 값을 지정함
placeholder<input>, <textarea>에서 사용되며 사용자가 입력하기 전에 표시되는 안내 텍스트를 설정함
selected<select> 요소 내의 <option> 태그에서 사용되며, 기본적으로 선택된 옵션임을 나타냄
checked체크박스나 라디오 버튼에서 사용되며, 체크되었음을 나타냄
disabled체크박스나 라디오 버튼에서 사용되며, 비활성화되었음을 나타냄

  • ID와 Class의 공통점 및 차이점 Desktop View

  • 태그의 분류
    • 미리 정의 된 태그
      • 구조 기술 태그
        • <! DOCTYPE html` : 문서의HTML5 버전임을선언함
        • html : HTML 문서의루트요소임.
        • head : 메타데이터를포함하는부분임
        • title : 웹브라우저탭에표시되는문서의제목을정의함
        • meta : 문서의메타데이터를정의함. 문자인코딩, 뷰포트, 저자, 키워드등
        • link : 외부리소스를문서에연결함
        • script : 클라이언트측스크립트, JS를문서에포함시키거나참조함
        • body : 실제내용과화면에표시될요소들이이안에위치함
      • 멀티 미디어 태그
    • 사용자 정의 태그
      • 의미적 태그
      • 비의미적 태그
  • 그 외의 태그들
    • 텍스트 관련 태그
      • i : 이탤릭체로변환
      • em : 강조하여표시
      • b : 볼드체로표시
      • strong : 중요한내용표시
      • small : 글씨크기를작게표시
      • sub : 아래첨자표시
      • sup : 윗첨자표시
      • mark : 하이라이트표시
      • code : 컴퓨터코드표시
      • ins : 삽입된콘텐츠, 의미강조밑줄표시
      • u : 단순시각적밑줄표시
      • del : 텍스트에취소선표시
      • s : 텍스트에취소선표시
      • blockquote : 인용문을나타내는태그
    • 공간 분할 태그
      • div : 웹 브라우저 전체 공간에 대해 block형식으로 분할, 새로운 줄에서 시작
      • span : 웹 브라우저 일부 공간에 대해 inline형식으로 분할
      • iframe : HTML 문서내에또다른HTML 문서를내장하기위한요소
    • 하이퍼링크태그
      • a href=”URL” : 형식으로사용
        • 절대경로(Absolute URL)
          1

          <a href="https://www.example.com/page.html">절대 URL</a>
        • 상대경로(Relative URL)
          1

          <a href="page.html">상대 URL</a>
        • 루트상대(Root-relative URL)
          1

          <a href="/folder/page.html">루트 상대 URL</a>
        • 프래그먼트(Fragment URL)
          1

          <a href="#section">프래그먼트 URL</a>
        • 이메일링크(Mailto URL)
          1

          <a href="mailto:someone@example.com">이메일 보내기</a>
      • target과rel 속성
        • target : 링크를 클릭했을때 웹사이트가 열릴곳을 지정하는 역할
        • rel : 현재 문서와 링크된 문서간의 관계를 명시 Desktop View
    • 목차 태그
      • ol : 순서가 있는 목록으로 내부 태그로 li를 사용하고 순서가 지정됨
      • ul : 순서가 없는 목록으로 내부 태그로 li를 사용하고 순서가 없이 불릿으로 표시됨
      • dl : 각 항목을 정의 하기위한 목록으로 각 항목은 dt, 항목에 대한설명은 dd로나타냄

7. 후기

오늘은 본격적인 Spring에 앞서서 frontend와 backend를 대략적으로 알아보았고 css 속성들을 기초적으로 알아보는 시간을 가졌습니다. 이만 가보도록 하겠습니다!

KT aivle school, Spring
KT aivle school
This post is licensed under CC BY 4.0 by the author.