Notice
Recent Posts
Recent Comments
Link
«   2026/04   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

hyo_jung

[Work Book] UMC 서버 8주차 본문

개발/Backend

[Work Book] UMC 서버 8주차

hyo_jung 2021. 11. 28. 18:22

학습 목표

  • 웹 이해와 HTML의 문법 지식 습득
  • CSS의 기본문법과 선택자 개념 이해
  • JavaScript 주요 문법과 간단한 모달 실습

 

 

핵심 키워드

HTML

  • 부모요소, 자식요소
    • HTML의 요소들은 하나 이상의 다른 요소를 포함할 수 있다.
    • 자식요소 : 다른 요소에 포함되는 요소
    • 부모요소 : 다른 요소를 포함하는 요소
  • 빈태그 : 닫는 태그가 없는 태그
  • Doctype
    • Doctype은 문서의 유형을 정의하기 위해 사용하는 선언문이다.
    • <html>전에 가장 먼저 선언되어야 한다.
    • 웹 브라우저에서 처리할 문서가 HTML이며 버전이 무엇인지를 알려준다.
    • 코딩교육 티씨피스쿨
  • Body 태그
    • 해당 HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용한다.
    • 코딩교육 티씨피스쿨
  • 블록(Block), 인라인(inline)
    • 블록 : display 속성 값이 블록인 요소는 언제나 새로운 라인에서 시작하며 해당 라인의 모든 너비를 차지한다. 대표적으로는 <p>, <div>, <h>, <ul>, <ol>, <form>이 있다.
    • 인라인 : display 속성 값이 인라인인 요소는 새로운 라인에서 시작하지 않는다. 요소의 너비도 해당 라인 전체가 아닌 해당 HTML요소의 내용만큼만 차지한다. 대표적으로 <span>, <a>, <img>가 있다.
    • 코딩교육 티씨피스쿨
  • 주요범위 & 메타데이터 (HTML, HEAD, BODY, TITLE, LINK, STYLE)
    • HTML : HTML 문서의 루트 요소를 정의함BODY : 문서의 구조를 입력LINK : 외부 리소스의 연결 및 현재 문서와의 관계를 명시하는 태그
    • STYLE : 문서의 스타일 정보를 포함하는 태그
    • TITLE : 브라우저 탭 부분
    • HEAD : 문서의 정보를 입력
  • Body 내의 구조(HEADER, FOOTER, H1 ~ H6, MAIN, SECTION, DIV, P..)
    • HEADER : 문서나 특정 섹션의 헤더를 정의할 때 사용. 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함한다.
    • FOOTER : 문서나 특정 섹션의 footer를 정의할 때 사용.
    • H1~H6 : 제목을 정의할 때 사용. <h1>가 가장 중요한 제목을 정의하고 <h6>이 가장 덜 중요한 제목을 정의한다.
    • MAIN : <body>요소의 주 콘텐츠를 정의할 때 사용. 하나의 문서에는 단 하나의 <main>요소만이 존재해야 하며 <main>요소는 <article>, <aside>, <footer>, <header>, <nav>요소의 자손 요소가 되어서는 안된다.
    • SECTION : HTML 문서에 포함된 독립적인 섹션을 정의. 보통 제목 요소(h1~h6)를 자식 요소로 포함하는 경우가 많다.
    • DIV : 특정 영역이나 구획을 정의할 때 사용. 여러 HTML 요소들을 하나로 묶어준다.
    • P : 문단을 정의할 때 사용.
  • 멀티미디어(IMG, VIDEO)
    • IMG : 이미지를 정의할 때 사용. src 속성과 alt 속성을 반드시 명시해야 한다.
    • VIDEO : 무비 클립이나 비디오 스트림과 같은 비디오를 정의할 때 사용. mp4, WebM, Ogg 포맷의 파일을 지원한다.
  • 표 콘텐츠 및 양식(TABLE, TH, TD,INPUT,LABEL, BUTTON, TEXTAREA..)
    • TABLE : 2차원 테이블을 정의할 때 사용. 하나 이상의 <tr>, <th>, <td> 요소들로 구성된다.
    • TH : 테이블에서 제목이 되는 헤더 셀을 정의할 때 사용. 기본적으로 굵은 폰트로 중앙 정렬된다.
    • TD : 테이블에서 하나의 데이터 셀을 정의할 때 사용. 
    • INPUT : 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용. <form> 요소 내부에서 사용된다. <input> 요소는 빈 태그(empty tag)이며 속성만을 포함하고 있다.
    • LABEL : 사용자 인터페이스 요소의 라벨을 정의할 때 사용. for 속성을 사용하여 다른 요소와 결합할 수 있다. 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 한다.
    • BUTTON : 클릭할 수 있는 버튼을 정의할 때 사용.
    • TEXTAREA : 사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용. 개수의 제한 없이 문자를 입력할 수 있다.
  • 전역속성 - class / id
    • id나 class 속성에 따라 스타일을 지정할 수 있다.
    • id : 하나의 객체에만 적용 가능
    • class : 여러 객체에 적용 가능

코딩교육 티씨피스쿨

 

CSS

  • 선택자의 역할
    • 특정 요소를 선택하여 스타일을 적용할 수 있게 한다.
  • HTML에서 CSS 선언방식
    • <link rel="stylesheet" href="css파일 경로">
  • 태그선택자 / 클래스 선택자 / id선택자
    • 태그 선택자 : HTML 요소를 직접 지칭하는 가장 간단한 선택자
    • id 선택자 : CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
    • 클래스 선택자 : 특정 집단의 여러 요소를 한 번에 선택할 때 사용
  • 선택자 상속개념
    • 상위에서 적용한 스타일은 하위에도 반영된다. 박스 모델 속성들은 상속되지 않는다.
  • 박스 모델(width, height, margin, padding, border, display)
    • width / heigth : 요소의 너비와 높이 설정
    • padding : 내용과 테두리 사이의 간격
    • display : 레이아웃을 결정. 블록과 인라인 중 하나의 값을 가진다.
    • border : 내용과 패딩 주변을 감싸는 테두리
    • margin : 테두리와 이웃하는 요소 사이의 간격
  • 위치 및 배경(top, bottom, left, right, relative, absolute, fixed, background, background-color)
    • top : 조상 요소의 위로부터의 여백 설정
    • left : 조상 요소의 왼쪽으로부터의 여백을 설정
    • relative : 요소의 기본 위치를 기준으로 위치를 설정
    • fixed : 페이지가 스크롤 되어도 항상 지정된 곳에 위치
    • background-color : HTML 요소의 배경색을 설정
    • background : 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음
    • absolute : 문서의 좌측 상단을 기준으로 위치를 설정
    • right : 조상 요소의 오른쪽으로부터의 여백을 설정
    • bottom : 조상 요소의 아래로부터의 여백 설정

 

JavaScript

  • 변수 및 상수
    • 변수 : 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다. var로 선언하면 변수 재선언 가능. let으로 선언하면 변수 재선언 불가능.
    • 상수 : 한 번 선언하면 바꿀 수 없다. const로 선언한다.
  • 조건문
    • if / if else / switch
  • 반복문(while / for)
    • while / do while / for / for in / for of
  • 함수
    • 자바스크립트에서는 함수도 하나의 타입이다.
    • 문법

 

HTML / CSS / JavaScript의 관계

HTML로 웹 문서의 뼈대를 만들고 CSS로 디자인을 입히고 JavaScript로 웹 문서에 움직임을 넣는다.

'개발 > Backend' 카테고리의 다른 글

[JPA] Spring Data JPA  (0) 2022.01.22
[JPA] JPA 프로그래밍 기본기 다지기 1강 - JPA 소개  (0) 2022.01.15
[Work Book] UMC 서버 7주차  (0) 2021.11.28
[Work Book] UMC 서버 6주차  (0) 2021.11.28
[Work Book] UMC 서버 5주차  (0) 2021.11.07
'개발/Backend' Related Articles more