6월 2주차 정리

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

HTML

form

form은 사용자로부터 입력을 받기 위한 양식을 작성하는 태그들을 통틀어 부르는 말

입력한 데이터를 제출하는 데에 주 목적이 있음

예시: 로그인, 회원가입

action

form 데이터를 처리할 URL 작성

데이터를 어디로 보낼 것인지 지정하며 값은 반드시 유효한 URL이어야 함

지정하지 않을 경우 데이터는 form이 있는 페이지의 URL로 보내짐

method

양식을 제출하는 데에 사용(http 메소드)

GET vs POST

	GET	Post
전송	https://example.com?id=123&password=123	양식 데이터를 요청 본문으로 전송
캐시	O	X
길이 제한	O	X
보안	취약	GET 방식보다 높음

input

공통 속성

type: input 양식 컨트롤의 유형

name: input 양식 컨트롤의 이름

value: input 양식 컨트롤의 값

autocomplete: on / off 양식 자동완성 기능에 대한 힌트

placeholder: 양식 컨트롤이 비어있을 때 나타내는 내용(ex. 아이디를 입력하시오)

required: 전송을 위한 필수 입력 값

disabled: 비활성화

readonly: 수정불가(읽기 전용)

SEO란?

Search Engine Optimization의 줄임말, 한국어로는 검색 엔진 최적화

사이트마다 정책과 적용 기법이 다름

검색엔진: 네이버, 다음, 구글 검색

SEO가 잘 되었을 때의 이점: 트래픽 증가, 신뢰성 구축, 비용 효율 증가

CSS

CSS란?

Cascading Style Sheets의 약자

CSS에서 스타일이 적용될 때 우선순위를 가지고 적용되는데 그 과정이 폭포처럼 위에서 아래로 떨어지는 모양이기 때문

HTML의 스타일, 레이아웃 등을 꾸미는 역할

여러 HTML에 재사용하여 반복 작업을 줄일 수 있다.

작성방법

인라인 적용

태그 선택자 적용

그룹 선택자 적용

상속 적용

가상 클래스 선택자

선택한 요소가 특별한 상태여야 만족

: 를 사용함

가상 요소

선택자에 추가하는 키워드

특정 요소의 일부분에만 스타일을 입힐 수 있음

:: 를 사용함

CSS 선택자 우선순위

후자 우선의 원칙: 동일한 선택자에 동일한 속성이 사용되었을 경우 뒤에 적힌 속성을 따름

구체성의 원칙: inline-style / id(#)/ class(.), 가상 클래스, 속성 선택자/ type(tag), 가상 요소 선택자 순으로 우선순위가 낮아짐

중요성의 원칙: !important