본문 바로가기
수정/다이어리

24.07.26까지 공부한 내용 요약본

by 코딩쥐 2024. 7. 26.

HTML

태그를 나누는 기준

(1) Item

컨텐츠를 가지고 있는 요소 (<p>, <img>, <audio>, <video> 등)

  • 제목 : <hn>태그 사용 
  • 일반 글 : <p> 태그 사용
  • 입력 : <input> 태그 사용
    → type: text, password, radio, checkbox, email, search, tel, file 등
    → attribute : pattern, title, placeholder, disable, checked, size, required 등
  • 이벤트 : <button> 태그 사용 
    → type : button, submit(기본설정), reset 
  • 클릭 | 메뉴 | 페이지 이동 : <a> 태그 / <span>태그 사용 (최대한 <a>태그 사용할 것)
  • 그림, 사진 : <img>태그 / <div>의 background-image (CSS) 사용 
    • <img>태그 : 그림의 원형이 망가지면 안될 때
      (그림의 원형은 유지하면서 크기만 변경하고 싶을 때 : width를 조절 & height : auto;)
    • background-image: 전체적인 화면의 배치, 어울림이 중요할 때 
  • 오디오 : <audio>태그 사용 
  • 미디어 : <video>태그 사용

 

(2) Position

배치(영역 설정)와 관련된 역할을 하는 요소 (<div>, 시맨틱태그, <table> 등)

  • 메뉴 : <ul>태그 / <ol>태그 사용 (대부분 <ul>태그 사용)
  • 게시판 | 간단한 리스트 : <table> 태그 / <div>의 display: table (CSS) 사용
  • 전체적인 화면의 구성 : 시맨틱태그
  • 모든 애매한 상황 : <div>태그 / <span>태그 사용

CSS

구성요소

(1) 선택자 (selector)

디자인을 설정할 요소를 선택

 

(2) 속성 (property)

구체적인 디자인을 설정함

  • 효과
    1. 색상 : color, background-color, shadow, box-shadow, gradient 등 
    2. 모양 :
      •    글꼴 모양: 폰트, text-decoration, font-weight, font-size, 간격
      •    문단 모양: white-space, line-height
      •    블럭 모양: border, margin, padding

 

  • 배치
    1. position : 어떤 기준으로 배치할 것인가
      •    static : 기본값, 작성된 순서대로 배치 
      •    relative : 자신의 원래 위치(static(기본값)) 기준 ( top, left만 가능 )
      •    absolute : 브라우저 좌상단 ( top, right, bottom, left 가능 / 블럭의 확장도 발생 )
                         부모 블럭이 static이 아닐 경우 absolute의 기준점이 부모 블럭으로 변경됨
      •    fixed : 화면을 기준으로 화면에 모조건 고정 ( top, right, bottom, left 가능 )
      •    sticky : 처음에 relative, 조건에 부합했을 때 fixed 
    2. display : 어떤 형태로 배치할 것인가
      • 　block
      • 　inline-block
      • 　inline
      • 　table
      • flex
        1. 배치 순서 및 방향
          •    flex-direction : flex의 메인 축을 수정하는 방법
          •    order
          •    flex-wrap : 하나의 행에 들어가지 않을 정도로 클 경우 어떻게 배치할 것인가
        2. 정렬
          •    컨테이너 배치: justify-content, align-items 
          •    아이템 배치 : flex(flex-grow flex-shrink flex-basis)
      • grid
        1. 격자 및 위치 지정 옵션
          •    grid-template-rows | grid-template-columns
          •    grid-auto-rows | grid-auto-column : 자동으로 배치되는 아이템들을 그리드에 어떻게 넣을 것인가
          •    grid-template | grid-area 
        2. 배치
          •    컨테이너 배치 : justify-content, align-content
          •    셀을 침범하지않고 배치 : justify-items, align-items
          •   아이템 단위 배치 : justify-self, align-self 

 

  • 애니메이션
    1. transform
      • 　translate
      • 　rotate
      • 　skew
      • 　scale
      • 　preserved-3d
    2. transition : 발동조건이 가상선택자가 활성화되었을때 이벤트 실행함
      • 　target
      • 　duration
      • 　timing
      • 　[delay]
    3. animation
      • 　@keyframe from~to, 0%~100%

 

  • 반응형
    1. media쿼리 : top-down방식, bottom-up방식

JavaScript

구성요소

 

(0) 자료형

  • 기본형  : 값에 의한 참조  |  참조형  : 주소에 의한 참조 
  • single | multi

 

(1) 변수 

  • var : 재선언, 재할당 가능, window에 선언되어 있음(브라우저 성능 떨어트림), 호이스팅이 발생함 
  • let : 재선언 불가능, 재할당 가능, 호이스팅이 방어됨
  • const : 재선언, 재할당 불가능 , 호이스팅이 방어됨

 

(2) 연산자

  • 산술 : +(문자가 있을 경우 결합연산자로 역할), - , *,  /, %, **
  • 비교 : >, <, =<, >=, ==, !=, ===, !== (일치,불일치 연산자는 타입까지 비교)
  • 논리 : &&, ||, ! (연산에 대한 규칙에 의해 상황에 따라 문자열, 숫자 등의 값이 반환되기도 함)
  • 비트
  • 삼항 : (조건식)?참일 경우 시행:거짓일 경우 시행; 
  • 단항 : +=, -=, /=, *=, **=
  • 증감 : ++ , -- (연산 순서 주의해야함)

 

(3) 제어문

  • 조건문 
    1. if : 단순if문, if-else문, if-else if-else문 
    2. switch-case : 값에 대한 동등 비교 (break; 문 필요)
  • 반복문
    1. while(조건문) : 증감연산과 초기값의 위치가 중요함 , do~while문(최소 한 번은 로직을 시행함)
    2. for
      • 　단순for문: (초기값, 비교식, 증감연산)
      • 　 for-in문 : key를 가지고 순회
      • 　 for-of문 : 값을 가지고 순회, iterable한 객체 (나열되어있는 객체만 가능)
      • 　 forEach문 : 값을 가지고 순회, 아이템을 가지고서 안에 있는 콜백함수를 시행함

 

(4) 함수

  • 선언 방법 : 함수선언문, 익명함수선언식
  • 함수의 형질 : 매개변수, 리턴타입 유무
  • 일급함수 : 변수로 선언 가능 , 함수의 매개변수로 선언 가능, 리턴타입으로도 가능, 함수내부에도 선언가능
  • ... : rest parameter

 

(5) 객체

  • 객체 : 명사형으로 지정될 수 있는 모든 것 (속성(property), 기능(method)으로 정의됨) 
  • 선언방법 : {key : value}, value값에는 JavaScript의 모든 타입이 가능하다. 
  • 접근 : property chain, braket expression

 

(6) 배열

  • 선언 방법 : [value1, value2, ...]
  • length : 배열의 길이 (값의 수와 다를 수 있음) 
  • 함수 : push, pop, shift, unshift, concat, slice, splice, sort, reverse

 

(7) DOM

  • 색인
    1. directive
      • 　단수 : querySelector ,  getElementbyId
      • 　 복수 : getElementsByClassName , getElementsByName, getElementsByTagName, querySelectAll
    2. method chain 
      • 　 parentElement, nextElementSibling, previousElementSibling, children, firstElementChild, lastElementChild

 

  • 조작
    1. createElement, createTextNode
    2. append, prepend, before, after
    3. replaceWith, remove
    4.  textContent, innerText, innerHTML

 

  • 속성
    1. getAttribute, setAttribute, hasAttribute, Attributes
    2. value, checked, selected
    3. style

 

  • class 
    1. className
    2. classList
      • 　 add, toggle, remove, has, index, 

 

  • event
    1. inline : onclick, onchange,... 
    2. addEventListener("click", 콜백함수)

'수정 > 다이어리' 카테고리의 다른 글

24.08.20 지금까지 배운 React 요약  (0) 2024.08.30

관련글

티스토리툴바