Potato

결합자(Combinators)

  • 자손 결합자 (공백)
    • selectorA 하위의 모든 selectorB 요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > span {
          color : red;
        }
    </style>
</head>
<body>
    <div>
        <span>이건 빨강입니다.</span>
        <p>이건 빨강이 아닙니다.</p>
        <p>
          <span>이건 빨강이 아닙니다.</span>
        </p>
    </div>

</body>
</html>

출력 값

  • 자식 결합자 ( > )
    • selectorA 바로 아래의 selectorB 요소
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > span {
          color : red;
        }
      </style>
</head>
<body>
    <div>
        <span>이건 빨강입니다.</span>
        <p>이건 빨강이 아닙니다.</p>
        <p>
          <span>이건 빨강이 아닙니다.</span>
        </p>
      </div>

</body>
</html>

출력값

  • 일반 형제 결합자 (~)
    • selectorA의 형제 요소 중 뒤에 위치하는 selectorB 요소를 모두 선택
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p ~ span {
            color : red;
            }
    </style>
</head>
<body>
    <span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
    <p>여기 문단이 있습니다.</p>
    <b>그리고 코드도 있습니다.</b>
    <span>p태그와 형제이기 때문에 이건 빨강입니다!</span>
    <b>더 많은 코드가 있습니다.</b>
    <span>이것도 p태그와 형제이기 때문에 빨강입니다!</span>
</body>
</html>

출력 값

  • 인접 형제 결합자 (+)
    • selectorA의 형제 요소 중 바로 뒤에 위치하는 selectorB 요소를 선택
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p + span {
            color : red;
            }
    </style>
</head>
<body>
    <span>p태그의 앞에 있기 때문에 이건 빨강이 아닙니다.</span>
    <p>여기 문단이 있습니다.</p>
    <span>p태그와 인접한 형제이기 때문에 이건 빨강입니다!</span>
    <p>더 많은 코드가 있습니다.</p>
    <span>p태그와 인접한 형제가 아니기 때문에 이건 빨강이 아닙니다.</span>
</body>
</html>

출력 값

CSS 원칙

  1. 모든 요소는 네모(박스모델)이고, 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다 (좌측 상단에 배치)
  2. display에 따라 크기와 배치가 달라진다
  3. position으로 위치의 기준을 변경
    • relative : 본인의 원래 위치
    • absolute : 특정 부모의 위치
    • fixed : 화면의 위치
    • sticky : 기본적으로 static이나 스크롤 이동에 따라 fixed로 변경
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS란? CSS기초  (0) 2022.11.12

CSS란..

  • Cascading Style Sheets
  • 스타일을 지정하기 위한 언어

CSS 정의 방법

  1. 인라인 (inline)
    • 인라인을 쓰게 되면 실수가 잦아짐 (중복도 있을 것이고, 찾기가 어려워서) 
        <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h1 style="color: blue; font-size : 100px;">Hello</h1>
  </body>
  </html>
  2. 내부 참조 (embedding) - <style>
    • 내부 참조를 쓰게 되면 코드가 너무 길어짐 
          <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        h1 {
        color : blue;
        font-size : 100px;
        }
      </style>
    </head>
    <body>
    </body>
    </html>
  3. 외부 참조(link file) - 분리된 CSS 파일
    • 가장 많이 쓰는 방식
    • 외부 CSS 파일을내 를 통해 불러오기

CSS의 선택자(Selector) 유형

  • 선택자 유형
    • 기본 선택자
      • 전세 선택자, 요소 선택자
      • 클래스 선택자, 아이디 선택자, 속성 선택자
    • 결합자(Combinators)
      • 자손 결합자, 자식 결합자
      • 일반 형제 겨랍자, 인접 형제 결합자
    • 의사 클래스/요소(Pseudo Class)
      • 링크, 동적 의사 클래스
      • 구조적 의사 클래스, 기타 의사 클래스, 의사 엘리먼트, 속성 선택자

CSS 선택자 정리

  • 요소 선택자
    • HTML 태그를 직접 선택
  • 클래스(class) 선택자
    • 마침표(.)문자로 시작하며, 해당 클래스가 적용된 항목을 선택
  • 아이디(id) 선택자
    • # 문자로 시작하며, 해당 아이디가 적용된 항목을 선택
    • 일반적으로 하나의 문서에 1번만 사용
    • 여러번 사용해도 동작하지만, 단일 id를 사용하는 것을 권장

CSS 적용 우선순위

  • CSS 우선순위를 아래와 같이 그룹을 지어볼 수 있다.
    • 1.중요도 (Importance) - 사용시 주의
      • !important
    • 2.우선 순위 (Specificity)
      • 인라인 > id > class, 속성, pseudo-class > 요소, pseudo-element
    • 3.CSS 파일 로딩 순서

CSS 기본 스타일

  • 크기 단위
    • px (픽셀)
      • 모니터 해상도의 한 화소인 '픽셀' 기준
      • 픽셀의 크기는 변하지 않기 때문에 고정적인 단위
    • %
      • 백분율 단위
      • 가변적인 레이아웃에서 자주 사용
    • em
      • (바로 위, 부모 요소에 대한) 상속의 영향을 받음
      • 배수 단위, 요소에 지정된 사이즈에 상대적인 사이즈를 가짐
    • rem
      • (바로 위, 부모 요소에 대한) 상속의 영향을 받지 않음
      • 최상위 요소(html)의 사이즈를 기준으로 배수 단위를 가짐
    • 크기 단위 (viewport)
      • 웹 페이지를 방문한 유저에게 바로 보이게 되는 웹 컨텐츠의 영역 (디바이스 화면)
      • 디바이스의 viewport를 기준으로 상대적인 사이즈가 결정됨
      • vm, vh, vmin, vmax
      • px는 브라우저의 크기를 변경해도 그대로
      • vw는 브라우저의 크기에 따라 크기가 변함
    • 색상 단위
      • 색상 키워드(background-color : red;)
        • 대소문자를 구분하지 않음
        • red,blue,black과 같은 특정 색을 직접 글자로 나타냄
      • RGB색상 (background-color : rgb(0, 255, 0);)
        • # + 16진수 표기법 혹은 함수형 표기법을 사용해서 특정 색을 표현하는 방식
      • HSL 색상(background-color : hsl(0, 100%, 50%);)
        • 색상,채도,명도를 통해 특정 색을 표현하는 방식
      • a는 alpha(투명도)
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] CSS 결합자, CSS 원칙  (0) 2022.11.12

Routing

  • 네이트워크에서 경로를 선택하는 프로세스
  • 웹 서비스에서의 라우팅
    • 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것

Vue Router

  • Vue의 공식 라우터
  • SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공
  • 라우트에 컴포넌트를 매핑한 후, 어떤 URL에서 렌더링 할지 알려줌
    • 즉, SPA를 MPA처럼 URL을 이동하면서 사용가능
    • SPA 단점 중 하나인 URL이 변경되지 않는다.를 해결

Vue Router 사용하기

$ vue create vue-router-app // Vue 프로젝트 생성

$ cd vue-router-app // 디렉토리 이동

$ vue add router // Vue CLI를 통해 router plugin 적용

커밋을 할것인지 (권장) -> Yes

history mode 사용 여부 -> Yes

$ npm run serve
  • run serve 후 router 확인

 

저작자표시 (새창열림)

'WEB > Vue' 카테고리의 다른 글

[Vue2] Emit,Props를 통한 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2/Vuex] state 활용 맛보기  (0) 2022.12.29
[Vue2] EventBus를 통해 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2] Vuex 사용하기  (1) 2022.11.07
[Vue2] Vue Cli Quick Start (Vue 설치방법)  (2) 2022.11.02

Vuex

  • Vuex
    • 중앙 저장소를 통해 상태 관리를 할 수 있도록 하는 라이브러리
    • 데이터가 예측 가능한 방식으로만 변경 될 수 있도록 하는 규칙을 설정하며, Vue의 반응성을 효율적으로 사용하는 상태 관리 기능을 제공

사용하기 전에..

$vue create vuex-app // Vue 프로젝트 생성

$cd vuex-app // 디렉토리 이동

$vue add vuex // Vue CLI를 통해 vuex plugin 적용

vuex의 핵심 컨셉 4가지

  1. State
    • vue 인스턴스의 data에 해당
    • 중앙에서 관리하는 모든 상태 정보
  2. Mutations
    • 실제로 state를 변경하는 유일한 방법 ( state를 변경하기 위한 methods )
    • Mutations에서 호출되는 핸들러(handler)함수는 반드시 동기적 이어야 함
  3. actions
    • mutations와 비슷하지만 비동기 작업( 외부 API와의 소통 등 )을 포함할 수 있음
    • state를 직접 변경하지 않고 commit()메서드로 mutations를 호출해서 state를 변경함
  4. Getters
    • vue 인스턴스의 computed에 해당
    • state를 활용하여 계산된 값을 얻고자 할 때 사용

component에서 데이터를 조작하기 위한 데이터의 흐름

  • component => (actions) => mutations => state

component에서 데이터를 사용하기 위한 데이터의 흐름

  • state => (getters) => component
저작자표시 (새창열림)

'WEB > Vue' 카테고리의 다른 글

[Vue2] Emit,Props를 통한 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2/Vuex] state 활용 맛보기  (0) 2022.12.29
[Vue2] EventBus를 통해 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2] Vue Router 사용하기  (0) 2022.11.09
[Vue2] Vue Cli Quick Start (Vue 설치방법)  (2) 2022.11.02

Array Methods

메서드 설명 비고
reverse 원본 배열의 요소들의 순서를 반대로 정렬
push & pop 배열의 가장 뒤에 요소를 추가 또는 제거
unshift & shift 배열의 가장 앞에 요소를 추가 또는 제거
includes 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf 배열에 특정 값이 존재하는지 판별 후 인덱스 반환 요소가 없을 시 -1 반환
join 배열의 모든 요소를 구분자를 이용하여 연결 구분자 생략 시 쉼표 기준

사용 예시

reverse

  • 원본 배열의 요소들의 순서를 반대로 정렬

      const numbers = [1, 2, 3, 4, 5]
  numbers.reverse()
  console.log(numbers) // [5, 4, 3, 2, 1]

push & pop

  • 배열의 가장 뒤에 요소를 추가 또는 제거

      const numbers = [1, 2, 3, 4, 5]

  numbers.push(100)
  console.log(number) // [1, 2, 3, 4, 5, 100]

  number.pop()
  console.log(number) // [1, 2, 3, 4, 5]

includes

  • 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환

      const numbers = [1, 2, 3, 4, 5]

  console.log(numbers.includes(1)) // true

  console.log(numbers.includes(100)) // false

indexOf

  • 배열에 특정 값이 존재하는지 판별 후 인덱스 반환

  • 해당 값이 없을 경우 -1 반환

      const numbers = [1, 2, 3, 4, 5]
  let result

  result = numbers.indexOf(3) // 2
  console.log(result)

  result = number.indexOf(100) // 1
  console.log(result)

join

  • 배열의 모든 요소를 구분자를 이용하여 연결

  • 구분자 생략 시 쉼표 기준

      const numbers = [1, 2, 3, 4, 5]
  let result

  result = numbers.join() // 1,2,3,4,5
  console.log(result)

  result = numbers.join('') // 12345
  console.log(result)

  result = numbers.join(' ') // 1 2 3 4 5
  console.log(result)

Array Helper Methods

  • 배열을 순회하며 특정 로직을 수행하는 메서드
  • 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
메서드 설명 비고
forEach 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행 반환 값 없음
map 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
filter 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
reduce 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
find 콜백 함수의 반환 값이 참이면 해당 요소를 반환
some 배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환
every 배열의 모든 요소가 판별 함수를 통과하면 참을 반환

사용 예시

forEach

  • 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

  • array.forEach(callback(elemet[, index[, array]]))

      const colors = ['red', 'blue', 'green']

  colors.forEach((color) => {
      return console.log(color)
  })
  // red
  // blue
  // green

map

  • 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환

  • array.map(callback(element[, index[, array]]))

      const numbers = [1, 2, 3]

  const doubleNumbers = numbers.map((number) => {
      return number * 2
  })
  console.log(numbers) // [ 1,2,3 ]
  console.log(doubleNumbers) // [ 2,4,6 ]

filter

  • 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환

  • array.filter(callback(element[, index[, array]]))

      const products = [
  { name: 'cucumber', type: 'vegetable' },
  { name: 'banana', type: 'fruit' },
  { name: 'carrot', type: 'vegetable' },
  { name: 'apple', type: 'fruit' },
  ]

  const fruits = products.filter((product) => {
  return product.type === 'fruit'
      })
  console.log(fruits)
  // [ { name: 'banana', type: 'fruit' }, { name: 'apple', type: 'fruit' } ]

reduce

  • 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환

  • array.reduce(callback(acc, element, [index[, array]])[, initialValue])

      const tests = [90, 90, 80, 77]

  const acc = tests.reduce((total, x) => total + x, 0)

  console.log(acc) // 337

find

  • 콜백 함수의 반환 값이 참이면 해당 요소를 반환

  • array.find(callback(delement[, index[, array]]))

      const avengers = [
  { name: 'Tony Stark', age : 45 },
  { name: 'Steve Rogers', age: 32},
  { name: 'Thor', age: 40},
  ]

  const avenger = avengers.find((avenger) => {
  return avenger.name === 'Tony Stark'
  })

  console.log(avenger) // { name: 'Tony Stark', age: 45 }

some

  • 배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환

  • array.some(callback(element[, index[, array]]))

      const arr = [1, 2, 3, 4, 5]

  const result = arr.some((elem) => {
  return elem % 2 === 0
  })

  console.log(result) // true

every

  • 배열의 모든 요소가 판별 함수를 통과하면 참을 반환

  • array.every(callback(element[, index[, array]]))

      const arr = [1, 2, 3, 4, 5]

  const result = arr.every((elem) => {
  return elem % 2 === 0
  })

  console.log(result) // false
저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] (아스키코드,ASCII) 문자를 숫자로, 숫자를 문자로 변환하는 방법  (0) 2023.01.07
[JavaScript] input 태그의 이벤트핸들러 모음  (0) 2022.12.31
[JavaScript] 두 값의 나누기, 몫, 나머지 구하기  (0) 2022.12.29
[Javascript] 연산자  (2) 2022.11.06
[Javascript] 변수 선언 키워드  (0) 2022.11.06

  1. 할당 연산자

    • 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자

        let a = 10

  2. 비교 연산자

    • 피연산자들을 비교하고 결과값을 boolean으로 변환하는 연산자
        10 > 1  // true
  10 < 1  // false

  3. 동등 연산자 ( == )

    • 두 연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환

    • 비교할 때 암묵적 타입 변환을 통해 타입을 일치 시킨 후 비교하므로 예상치 못한 결과가 발생할 수 있음

        const a = 1
  const b = '1'

  console.log ( a == b ) // true

  4. 일치 연산자 ( === )

    • 두 연산자의 값과 타입이 모두 같은 경우 true를 반환

        const a = 1
  const b = '1'

  console.log ( a == b ) // false
  console.log ( a === Number(b)) // true

  5. 논리 연산자

    • 세 가지 논리 연산자로 구성

      1. and 연산은 &&

      2. or 연산은 ||

      3. not 연산은 !

         true && true // true
 true && false // false

 true || false // true
 false || false // false

 !true // false

  6. 삼항 연산자

    • 3 개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

    • 가장 앞의 조건식이 참이면 : 앞의 값이 반환, 반대일 경우 뒤의 값이 반환

    • 삼항 연산자의 결과 값이기 때문에 변수에 할당 가능

        true ? 1 : 2 // 1
  false ? 1 : 2 // 2

  const result = Math,PI > 4 ? 'yes' : 'no'
  console.log(result) // no.
저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] (아스키코드,ASCII) 문자를 숫자로, 숫자를 문자로 변환하는 방법  (0) 2023.01.07
[JavaScript] input 태그의 이벤트핸들러 모음  (0) 2022.12.31
[JavaScript] 두 값의 나누기, 몫, 나머지 구하기  (0) 2022.12.29
[Javascript] 배열 메서드  (0) 2022.11.06
[Javascript] 변수 선언 키워드  (0) 2022.11.06

JavaScript는 변수를 선언하는 키워드가 정해져 있음

  1. let
    • 블록 스코프 지역 변수를 선언 (추가로 동시에 값을 초기화)
    • 재할당 가능 & 재선언 불가능
    • 블록 스코프를 갖는 지역 변수를 선언
  2. const
    • 블록 스코프 읽기 전용 상수를 선언 (추가로 동시에 값을 초기화)
    • 재할당 & 재선언 불가능
    • 선언 시 반드시 초기값을 설정 해야 하며, 이후 값 변경이 불가능
    • let과 동일하게 블록 스코프를 가짐
  3. var
    • 변수를 선언 (추가로 동시에 값을 초기화)
    • 재할당 & 재선언 가능*
    • 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능성 때문에 const와 let 사용을 권장
키워드 재선언 재할당 스코프
let X O 블록 스코프
const X X 블록 스코프
var O O 함수 스코프 
// 선언 : 변수를 생성하는 행위 또는 시점
// 할당 : 선언된 변수에 값을 저장하는 행위 또는 시점

let Numb // 선언
console.log(Numb) // undefined

Numb = 10 // 할당
console.log(Numb) // 10

let Numb = 0 // 선언 + 할당
console.log(Numb) // 0
저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] (아스키코드,ASCII) 문자를 숫자로, 숫자를 문자로 변환하는 방법  (0) 2023.01.07
[JavaScript] input 태그의 이벤트핸들러 모음  (0) 2022.12.31
[JavaScript] 두 값의 나누기, 몫, 나머지 구하기  (0) 2022.12.29
[Javascript] 배열 메서드  (0) 2022.11.06
[Javascript] 연산자  (2) 2022.11.06
  1. 설치 ( 터미널 환경 )

$ npm install -g @vue/cli

  1. 프로젝트 생성
    • vscode terminal에서 진행

$ vue create vue-cli

  1. Vue 버전 선택

  1. 프로젝트 생성 성공

  1. 프로젝트 디렉토리로 이동

$ cd vue-cli

  1. 프로젝트 실행

$ npm run serve

  1. 실행 성공

저작자표시 (새창열림)

'WEB > Vue' 카테고리의 다른 글

[Vue2] Emit,Props를 통한 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2/Vuex] state 활용 맛보기  (0) 2022.12.29
[Vue2] EventBus를 통해 컴포넌트간 데이터 전달하기  (0) 2022.12.29
[Vue2] Vue Router 사용하기  (0) 2022.11.09
[Vue2] Vuex 사용하기  (1) 2022.11.07

1. Vscode Extension에서 Django 설치.

 

 

2. 터미널에서 다음과 같은 코드 작성 ( Django 4.0 릴리즈 이후 버전을 명시하지 않으면 4.0버전이 설치됨 )

3. 패키지 목록 생성

 

4. 프로젝트 생성

5. 서버 실행

 

6. 실행 후 메인 페이지 확인

 

 

추가 : 애플리케이션(앱) 생성하기

 

일반적으로 애플리케이션 이름은 복수형으로 작성하는 것을 권장

저작자표시 (새창열림)

+ Recent posts

티스토리툴바