Don't Panic
in HTML·CSS ☕ 6분 읽기

[HTML·CSS] 프론트엔드 기초 복습 — 3계층·DOM·jQuery·CSS

#HTML·CSS
목차

2021-03-19 수업 복습 노트

웹 애플리케이션 3계층 구조

웹 애플리케이션 구조는 크게 3개의 계층으로 나뉜다.

  • 프론트엔드 (화면)
  • 백엔드 (서버 로직)
  • 데이터 (DB)

웹 애플리케이션 3계층 구조

HTML/CSS/JS의 역할은 다음과 같이 구분된다.

  • HTML : 내용, 구조
  • CSS : 디자인, 스타일
  • JS : 기능, 동작

태그 레퍼런스는 W3Schools HTML Tags에서 확인할 수 있다.

링크(<a>)와 target 속성

  • href가 있어야만 어디로 갈 수 있다. #으로 막으면 개발 도중 링크만 만들어 두고 실제로는 이동하지 않는다. (예: <a href="#">)
  • target 속성은 링크가 연결된 문서를 어느 창에 오픈할지 알려주는 속성이다.

Ajax 비동기 통신

Ajax는 새로 추가된 기술이 거의 없다. 자바스크립트, HTML, CSS를 그대로 모아 쓰되, 통신을 가능하게 하는 객체 하나가 새로 추가될 뿐이다.

Ajax 통신할 때 새롭게 추가되는 것은 무엇인가?

→ 통신을 담당하는 XMLHttpRequest 객체. 나머지는 기존 기술을 그대로 사용한다.

화면 요소 접근 - DOM vs jQuery

화면 요소에 접근하는 방법은 DOM으로 직접 접근하거나 제이쿼리를 사용하는 방법이 있다.

DOM으로 접근

  • document.getElementById(...) : 여기서 document는 HTML 문서를 가리킨다.
  • document.getElementsByTagName(...) 같은 것도 있지만 일반적으로 getElementById를 사용했다.
  • 괄호 안에 따옴표로 아이디 이름을 넣어주면 찾아진다. 찾은 것은 변수에 받아 둔다.
  • 값을 꺼낼 때는 getValue 같은 방식을 사용한다.

jQuery로 접근

  • 항상 $로 시작하고, 찾을 대상을 적어준다.
  • 아이디로 찾고 싶으면 #을, 클래스로 찾고 싶으면 .을 붙인다. (예: var x = $("#pass"); → 아이디가 pass인 것을 찾음)
  • 값을 뽑아낼 때는 x.val()처럼 메서드라서 괄호를 여닫아야 한다. (자바스크립트 DOM 방식엔 괄호가 없었던 것과 차이)

DOM을 직접 쓰는지, jQuery를 쓰는지 잘 구분하자. DOM은 아이디 이름만 넣으면 되지만, jQuery는 아이디는 #, 클래스는 .으로 구분해서 넣어야 한다.

자바스크립트 변수 선언

  • 변수 선언은 var로만 했었다. var 앞에 boolean이나 int 같은 타입이 오면 틀린다.
  • 자바스크립트의 공식 명칭은 ECMAScript이며, 줄여서 ES5, ES6 등으로 부른다. 수업에서는 ES5를 썼지만, 뷰(Vue)에서는 ES6 문법도 사용한다.
  • ES6에서 var 외에 let 키워드가 추가되었다. 스코프와 사용에 약간 차이가 있다.
  • var를 붙이면 지역변수, 안 붙이면 전역변수다.

변수 스코프 예시

  • 자바의 상수 키워드 final처럼, ES6에서는 상수를 나타내는 const 키워드가 추가되었다. const로 선언하면 다시는 값을 바꿀 수 없다.

자바스크립트에서 CSS 조절

내용을 꾸밀 때 CSS를 사용하며, <style> 태그 안에서 작성한다. 자바스크립트 안에서 CSS를 조절하고 싶을 때는 style 속성을 이용한다.

var x = document.getElementById("#h1");
x.style.color = "red";
  • 원하는 대상을 찾고, 중간에 style이라는 속성으로 접근한다.
  • style. 뒤에는 CSS에서 쓰던 값이 온다.

JS에서 CSS 조절

폼 이벤트 - click vs submit

클라이언트가 입력 화면을 만들어 서버에 보낼 때(로그인 등), 전송 버튼을 누르면 무슨 이벤트가 일어날까?

  • 일반 버튼 → click 이벤트 발생
  • inputType = submit인 전송 버튼 → submit 이벤트 발생

일반 버튼은 클릭, 전송 버튼 타입은 submit이다.

form의 action과 method

전송 버튼을 누르면 서버로 날아간다. 이때 누가 받아 처리할지 등의 속성으로 action과 method를 쓴다.

  • action : 요청을 처리할 위치
  • method : 전송 방식. GET, POST 두 가지로 나뉘며, 둘의 차이를 잘 정리해 두자.

이벤트 처리 - 파라미터 2개 vs 3개

이벤트를 등록할 때 원하는 대상을 직접 찾아 등록하는 경우도 있고, on으로 등록하는 경우도 있다. on으로 등록할 때 파라미터가 2개짜리와 3개짜리가 있는데 차이가 있다.

  • 파라미터 2개 : click 같은 이벤트 이름에, 버튼이 클릭되면 어떻게 하겠다고 함수를 지정.
  • 파라미터 3개 : div.on('click', ...)에서 div를 클릭하는 게 아니라, 클릭이 (예: h1에) 발생하면 함수를 실행하겠다는 의미.

h1과 div의 관계는? 맨 처음엔 h1 태그가 없다가 나중에 생겨나고, 나중에 생긴 h1에 클릭 이벤트를 발생시키겠다는 의미다(이벤트 위임).

블록 요소와 인라인 요소

HTML 태그 중에는 한 줄에 하나씩 들어가는 것과, 줄바꿈 없이 옆으로 붙는 것이 있다.

  • 블록 요소 : h1 등 한 줄에 하나씩 들어감
  • 인라인 요소 : a, img 등 한 줄에 붙음, 줄바꿈 안 됨

어떤 태그가 블록이고 어떤 태그가 인라인인지 구분해 두자.

시맨틱 태그

  • a, h1 같은 태그는 HTML4부터 있던 옛날 태그들이다.
  • HTML5로 오면서 무슨 태그인지 의미를 알아볼 수 있는 시맨틱 태그가 생겼다. (예: header, footer)
  • 문서 안에 동영상이나 음악 파일을 넣고 싶을 때 쓰는 audio, video 태그도 HTML5에서 새로 추가되었다.

CSS 우선순위 (태그 < 클래스 < 아이디)

h1의 글자색을 CSS에서 빨간색으로 지정하고, 마지막에 클래스 a를 만들어 파란색을 줬다. h1에 클래스 a를 적용하면 둘 다 해당되는데 무슨 색이 나올까?

태그 vs 클래스 우선순위

→ 태그보다 클래스의 우선순위가 더 높다. 따라서 파란색이 출력된다.

아이디 우선순위

여기에 아이디까지 적용되면 아이디가 제일 우선순위가 높다.

같은 속성을 지정할 때 우선순위: 태그 < 클래스 < 아이디

팝업창과 opener

회원 가입 시 주소 검색 버튼을 누르면 우편번호 검색 창이 새로 뜬다. 윈도우가 아닌 open으로 팝업창을 여는데, 이 팝업창이 자신을 열어준 원래 창을 가리키는 이름이 있다.

→ opener

실습: joinmember에서 주소찾기를 하며 findAddress로 가서 open으로 팝업창을 연다. 그러면 findAddress.html 입장에서 joinmember를 가리키는 명칭이 opener다.

opener 관계

CSS position 속성

position.zip(MM으로 받은 실습 자료)을 실행해 본다. CSS의 position 속성을 알아두는 것이 좋다.

position 값은 자동완성하면 inherit을 빼고 4개를 사용할 수 있다. 각각의 의미를 알아 두자.

position 실습 구조

  • 화면은 div 3개로, 각각 아이디가 달려 있어 배경색이 다르다.
  • div는 전체에 적용, 나머지 1·2·3은 다르게 적용되어 화면에서 어떻게 배치할지를 정한다.
  • top : 브라우저 위에서 얼마나 떨어지는지(위쪽 여백)
  • left : 왼쪽에서 얼마나 떨어지는지

static (기본값)

  • static은 기본 배치 방식으로, 없어도 기본이 static이다.
  • static이면 아무리 top, left, right를 줘도 먹지 않는다. 그냥 한 줄에 들어갈 자리만 차지하고 끝이다. (없는 것과 같음)

relative (상대 위치)

  • 상대적인 위치다.

relative 동작

  • div3이라면 원래 static이 들어갔을 경우를 기준으로 삼아 움직인다. 즉, 원래 자기가 들어갈 자리에서부터 위치를 따진다.

absolute / fixed

absolute 동작

  • absolute : 자기를 포함하는 부모 안에서 위치가 정해진다.
  • fixed : 브라우저 기준으로 위치가 고정된다.

inline vs inline-block

부트스트랩은 화면을 12개로 나눠 쓴다(예: 3등분이면 4칸씩).

div는 원래 블록 요소(한 줄에 하나씩)인데, jQuery Ajax 예제에서 줄바꿈이 안 되도록 인라인 블록으로 바꿨다.

  • inline과 inline-block의 차이
    • 둘 다 줄바꿈이 안 되는 것은 같다.
    • 그러나 inline은 사이즈(width/height)가 적용되지 않는다.
    • inline 요소에 block 속성이 적용되도록 하는 것이 inline-block이다.

정리해 둘 것

  • 폼 태그에서 전송 방식(GET/POST) 2가지 정리.
  • 자바스크립트에서 parseInt()와 Number()를 비교해서 정리.
    • Number()는 숫자가 아닌 것을 숫자로 바꿔주는 것.
    • parseInt()는? → 이 메서드들의 특징을 정리해 둘 것.
  • Ajax 코드를 좀 더 봐야 한다.

학습 로드맵 메모

현 시점에서 자바를 포기하면 안 되며, 점차 확장해 나가야 한다.

  • HTML5 & CSS - 반응형 웹 (웹 표준, HTTP, HTML, CSS, JS)
  • JS (ECMA 2009, BOM, DOM, Node, Element, Event, XML)
  • jQuery (lib-js DOM)
  • UI 프레임워크 - 부트스트랩 (3.x)

지금 배운 것만으로 CRUD를 응용하면 당장 현업에서 사용은 가능하다. 그래도 자바 스프링도 포기하지 말자. HTML5는 별도의 명세가 거의 필요 없어진다.

추가 메모

자바스크립트의 함수는 오버로드가 불가능하다. 단, 덮어쓴다.

  • 컴파일의 기본 단위는 하나의 스크립트다.
  • undefined와 null을 비교 없이 쓰는 사람도 많다고 한다. 자바스크립트 입장에서 해석해야 한다.
  • 몽고DB의 도큐먼트 = 자바스크립트의 오브젝트이며, 오브젝트는 키와 밸류의 쌍으로 이루어진다.
  • 자바스크립트의 배열은 오브젝트 계열(특수한 형태의 오브젝트)이다.
  • this는 어디까지나 동적이다.

관련 글