끄적

2022.04.06

CSS 단위

• px: 픽셀 단위
• %: 상대적 백분율. 부모 요소의 크기의 영향을 받아 크기가 변함
• em: 상위 요소 크기의 몇 배인지를 정하는 단위
  • 상위 폰트크기가 16px일 경우 하위 폰트크기를 1em 적용시
  • 1em = 16px, 1.5em = 24px(1.5*16)
• rem: r(root)의 약자로 최상위.
  • 모든 브라우저의 폰트 사이즈는 16px.
  • 가장 상위인 html(or body)태그의 폰트 크기가 16px인경우, 1rem 적용시 1rem = 16px
• vw(viewport width): 뷰포트 가로 너비의 백분율. 1vw = width의 1%
• vh(viewport height): 뷰포트 세로 너비의 백분율, 1vh = height의 1%

CSS 자주 사용되는 속성

• 너비
  • width
    • 요소의 가로 너비
      width default value: auto;
      min-width default value: 0
      max-width default value: none;
      width는 가로로 늘어날려고함
  • height
    • 요소의 세로 너비
      height default value: auto;
      min-height default value: 0
      max-height default value: none;
      inline, block요소 상관없이 최대한 줄어들려고함
• 여백
  • 내부여백 padding
    • 요소의 내부 여백을 만들어 내는만큼 요소의 크기가 늘어남
  • 외부여백 margin
    • 요소의 외부 여백을 만들어 냄
    • 음수 사용 가능
    • margin: auto;는 가운데 정렬 가능
  • 마진중첩
    • 마진중첩은 좌·우에서는 발생하지 않고 상·하에서만 발생
    • 자식요소에 margin을 줬는데 부모요소의 margin으로 만들어져버리는 현상
    • 부모의 margin-top,bottom과 자식의 margin-top,bottom이 만나면 중첩이 생김
    • 이전형제와 다음형제가 만났을때
      이전형제의 margin-bottom과 다음형제의 margin-top이 만나면 중첩이 생김
      부모요소에 overflow:hidden;을 주면 중첩현상이 사라짐
• border
  • border-radius(모서리를 둥글게)
  • box-sizing
    • border-box
      content + padding + border로 크기계산이 됨
    • default값은 content-box
• 요소의 크기가 늘어남
• overflow
  • visible: default값. 넘칠 경우 상자밖으로 보여짐
  • hidden: 넘치는 부분은 잘려서 보이지 않음
  • scroll: 스크롤바가 추가됨
  • auto: 넘친 영역만 스크롤바가 생김
• 요소의 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축 속성
  부모 요소에 overflow를 작성해 줘야함
• display
  • none
  • block
  • inline
  • inline-block
• 요소를 어떻게 보여줄지를 결정
• opacity
  • opacity default value: 1
    0~1까지 소수점을 표현할 때 앞에 0은 생략가능 ex).3
• 요소의 투명도 설정
• line-height
• line-box의 높이를 지정하며 주로 텍스트간의 줄 간격을 조절할 때 사용
  line-height default value: normal
• 문자
  • color: 글자 색상 변경
  • text-align
    문자 정렬 방식
    • left: 인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬
    • right: 인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬
    • center: 인라인 콘텐츠를 가운데 정렬
    • justify: 인라인 콘텐츠를 양쪽 정렬
  • text-decoration
    문자의 장식
    • underline: 글자 위에 선
    • overline: 글자 아래에 선
    • none: 선이 없음
    • line-through: 글자 중간에 선
  • text-indent
    들여쓰기(양수), 내여쓰기(음수)
    text-indent: -9999px;
    • Phark Method
      이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 하는 방법
• 배경
  • background-image: url("경로")
    상대경로: index파일을 기준으로 지정하는 바법
    절대경로: http://가 포함되어 있는 경로.이미지 가져올때에는 우클릭 이미지보기를 한 후 '이미지 주소 복사'를 하면 된다
  • background-color
    default value: transparent(투명한)
  • background-size
    default value: auto
    • cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
    • contain: 비율을 유지. 요소의 더 짧은 너비에 맞춤
  • background-repeat
    배경 이미지의 반복 방법 지정
    가로축이나 세로축을 따라 반복할 수도 있고 반복하지 않을 수도 있음
    • repeat: default value
    • no-repeat: 반복하지 않음
    • repeat-x: x축으로 반복
    • repeat-y: y축으로 반복
  • background-position
    배경 이미지 시작 위치 지정
    기본적으로 왼쪽 상단 꼭지점부터 시작함
    • top left, top center, top right: 왼쪽 상단, 가운데 상단, 오른쪽 상단
    • center left, center center, center right: 왼쪽 중앙, 중앙, 오른쪽 중앙
    • bottom left, bottom center, bottom right: 왼쪽 하단, 가운데 하단, 오른쪽 하단
  • background-attachment
    배경 이미지의 스크롤 여부를 정함
    default value: scroll
    • fixed: 요소가 스크롤 될때 배경 이미지가 뷰포트에 고정되는 속성 값
• 배치
  • position
    요소의 위치 지정 기준
    default value: static
    • relative: 요소를 원래 위치를 기준으로 상대적으로 배치
    • absolute: 위치 상 부모 요소를 기준으로 잡고 설정(부모요소에 relative를 심어줘야함)
    • fixed: 뷰포트를 기준으로 고정된 위치에 배치
  • 요소의 쌓임 순서(stack order)
    1. 요소에 position 속성의 값이 있는 경우 위에 쌓임
    2. 1번의 조건의 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
    3. 1,2번의 조건까지 같은 경우, html의 다음 구조일 수록 위에 쌓임
  • z-index
    요소의 쌓임 정도를 지정
    default value: auto
    숫자가 높을수록 위에 쌓임
  • position 속성을 사용하면서 요소의 display가 변경됨
    relative, static는 변경되지 않지만
    absolute, fixed는 display가 block요소로 바뀌기 때문에 따로 display: block을 안해줘도 됨
    (inline요소는 가로세로 값을 같지 못하는데 값이 변경됐을 경우 위와같은 상황 잘 살펴보기)
• 플렉스(flex)
  • flex-container (플렉스 컨테이너)
    • flex-direction: 아이템들이 배치되는 축의 방향을 결정하는 속성
      • row: default값. 가로(행) 방향으로 배치
      • row-reverse: 아이템들이 역순으로 가로 배치
      • column: 세로(열) 방향으로 배치
      • column-reverse: 아이템들이 역숙으로 세로 배치
        • flex-warp: 컨테이너가 더 이상 아이템들을 한 줄에 담을 공간이 없을 때 아이템 줄바꿈 여부
        • wrap: 줄바꿈
        • no-wrap: default값. 줄바꿈을 하지 않음
    • flex-flow: flex-direction과 flex-warp을 한번에 지정할 수 있는 단축 속성. 순서는 direction, warp
    • justify-content: 메인축 방향으로 아이템 (수평)정렬
      • flex-start: default값. 아이템 시작점 정렬
      • flex-end: 아이템 끝점 정렬
      • cneter: 아이템 가운데 정렬
      • space-between: 아이템들 사이에 균일한 간격을 만들어줌
      • space-around: 아이템들 둘레에 균일한 간격을 만들어줌
      • space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌
    • align-content: flex-wrap: wrap; 이 설정된 상태여야 하며, 아이템들의 행이 2줄 이상일때 (수직)정렬
      • stretch: default값. 아이템이 수직축 방향으로 끝까지 늘어남
      • flex-start: 아이템 시작점 정렬
      • flex-end: 아이템 끝점 정렬
      • cneter: 아이템 가운데 정렬
      • baseline: 아이템들이 텍스트 베이스라인 기준으로 정렬
    • align-items: 수직축 방향으로 아이템들을 정렬
      • stretch: default값. 아이템이 수직축 방향으로 끝까지 늘어남
      • flex-start: 아이템 시작점 정렬
      • flex-end: 아이템 끝점 정렬
      • cneter: 아이템 가운데 정렬
      • baseline: 아이템들이 텍스트 베이스라인 기준으로 정렬
  • flex item에 적용하는 속성들
    • flex-basis: flex 아이템의 기본 크기 설정
      • flex-basis: auto(default);, 단위는 %, px, em, rem으로 표현갸능
    • flex-grow
      아이템들의 증가 너비 비율
      default값은 0
      아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가짐. 즉 여백의 비
    • flex-shrink
      아이템들의 감소 너비 비율
      default값은 1
      감소너비를 적용하고 싶지 않으면 flex-shrink: 0;으로 부여해 주변 적용된 크기 그대로 유지
    • flex
      flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성
    • align-self: align-items의 아이템 버전. 해당 아이템의 수직축 방향 정렬
    • order
      각 아이템들의 시각적 나열 순서를 결정
      숫자가 작을수록 앞에 적용됨
      default값은 0
• 1차원 레이아웃
  요소의 부모요소에 display: flex를 주면 수평정렬이 됨
  flex-container는 부모요소가 되고 flex item은 자식요소가 됨
  justify-content: center; align-item: center; 를 해주면 한가운데 정렬 가능
• 전환
  • transition
    transition: <property 속성먕><duration 지속시간><timing-function 타이밍함수><delay 대기시간>
    • transition-proterty(default: all)
    • transition-duration(default: 0)
      property, duration은 쉼표를 통해 여러개 작성 가능
      ex) transition: width: .3s background-color: .5s
    • transition-timing-function(default: ease)
      easings.net
    • transition-delay(default:0s 전환 효과가 몇초뒤에 시작할지 대기시간지정)
• 변환
  • transform
    transform: rotate(deg(degree의 약어)) scale();
    • 2D 변환 함수
      • translate(x, y) 이동
      • translateX(x) 이동
      • translateY(y) 이동
      • scale(x, y) 크기(배수로 설정)
      • rotate(deg) 회전
      • skewX(x) 기울임
      • skewY(y) 기울임
    • 3D 변환 함수
      • rotateX(x) 회전
      • rotateY(y) 회전
      • backface-visibility
        3D 변환으로 회전된 요소의 뒷면 숨김 여부
        • visible: defualt값. 뒷면보임
        • hidden: 뒷면숨김
      • perspective(n) 원근법(거리)
        transform: perspective(원근법 함수는 제일 앞에 작성해야함 300px) rotateY(45deg);
    • perspective 속성과 함수의 차이
      • perspective: 300px; // perspective-origin 부모요소에 원근 거리를 지정하는게 더 깔끔함
      • transform: perspective(300px); // transform-origin

2022.04.06

CSS 선택자

1. 전체 선택자(universal)
   에스터리스크(*)는 페이지에 있는 전체 요소를 대상으로 함

    * { 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    } 
    # ul아래 자식 선택자에게 도사용 가능 
    ul * { 
    color: tomato; 
    }

2. 아이디 선택자(id)
   샵(#)은 id를 대상으로 함. id선택자는 유연성이 없어서 재활용 불가

    #id {
        width: 300px;
    }

3. 클래스 선택자(class)
   닷(.)은 class 선택자. 여러개의 요소를 대상으로 정할 수 있음

    .class {
        color: aqua;
    }

4. 타입 선택자(type)
   element(요소)를 선택자로 하는 것
   body, p, span, h1, ol, header등......

    p {
        font-size: 16px;
    }
    span {
        color: tomato;
    }

5. 하위 선택자(descendant)
   하위 선택자는 공백으로 분리된 두개 이상의 선택자들로 만들어짐
   body안에 있는 span태그 모두 선택됨

    # html문서
        <body>
          <span>tomato1</span>
          <div>
            <span>tomato2</span>
          </div>
          <span>tomato3</span>
        </body>

    # css문서
        body span {
            color: tomato;
        }

6. 자식 선택자(child)
   '>'로 분리된 두개 이산의 선택자들로 만들어짐
   1depth아래의 자식들만 선택됨

    # html문서
    <body>
      <span>tomato1</span>
      <div>
        <span>tomato2</span>
      </div>
      <span>tomato3</span>
    </body>

    # css문서
    body > span {
      color: aqua;
    }    

7. 인접 형제 선택자(adjacent sibling)
   '+'를 사용. 둘 다 같은 부모를 가지고 바로 뒤에 오는 요소에 적용됨
   tomato3가 color: tomato;가 적용됨

    # html문서
    <body>
      <span>tomato1</span>
      <div>
        <span>tomato2</span>
      </div>
      <span>tomato3</span>
      <span>tomato4</span>
      <span>tomato5</span>
    </body>

    # css 문서
      div + span {
        color: tomato;
      }

8. 일반 형제 선택자(general sibling)
   '~(틸드)'를 사용. 둘 다 같은 부모를 가지고 바로 뒤에 오는 모든 요소에 적용됨
   tomato3,tomato4,tomato5에 color: tomato;가 적용됨

    # html문서
    <body>
      <span>tomato1</span>
      <div>
        <span>tomato2</span>
      </div>
      <span>tomato3</span>
      <span>tomato4</span>
      <span>tomato5</span>
    </body>

    # css 문서
      div + span {
        color: tomato;
      }

9. 속성 선택자 (attribute)
   속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 html요소를 선택할 수 있음

    *속성만 있는 경우
    * selector[attribute]
    # html문서
    <body>
      <span chagne>tomato1</span>
      <div>
        <span>tomato2</span>
      </div>
      <span>tomato3</span>
    </body>

    span[chagne] {
       background: black;
       color: tomato;
      }

    *속성에 값을 지정할 경우
    *selector[attribute value]
    # html문서
    <body>
      <span chagne>tomato1</span>
      <span chagne="banana" >tomato2</span>
      <span chagne>tomato3</span>
      <div>
        <span>tomato4</span>
      </div>
      <span>tomato5</span>
    </body>

    span[chagne="banana"] {
      background: black;
      color: yellow;
    }

10. 가상 클래스(pseudo class)
    가상 클래스는 스타일이 적용되는 대상이 요소나 속성, 속성값에 따라 분류되는게 아니라 '상황'에 따라 분류된다

    • :first-child
      ul에 첫번째 li에만 color가 적용됨

      <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      </body>

      ul > li:first-child {
      color: cadetblue;
      }

    • :last-child
      ul에 마지막 li에만 color가 적용됨

      <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      </body>

      ul > li:last-child {
      color: cadetblue;
      }

    • :nth-child(n)
      ul에 마지막 3번째에 color가 적용됨

      <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
      </body>

      ul > li:nth-child(3) {
      color: cadetblue;
      }

    • :link
      아직 방문한적 없는 링크에 적용됨

      <body>
      <ul>
        <li><a href=#>link<a></li>
      </ul>
      </body>

      a:link {
      color: violet;
      }

    • :hover
      마우스를 올렸을때 적용됨

      <body>
      <ul>
        <li><a href=#>link<a></li>
      </ul>
      </body>

      a:hover {
      color: violet;
      }

    • :active
      마우스를 클릭하고 있을때 적용됨

      <body>
      <ul>
        <li><a href=#>link<a></li>
      </ul>
      </body>

      a:active {
      color: violet;
      }

    • :focus
      입력 양식(대표적으로 input)에 마우스를 클릭하고 입력하는 동안 적용됨

      <body>
      <input>
      </body>

      input:active {
      color: violet;
      }

    • :not
      이미 지정된 css스타일에서 특정한 요소를 제외시킬때 사용(선택을 하지 않기 위해 사용)
      선택할 요소:not(제외시킬요소): {}

      <div>
       <p>tomato</p>
       <p class="disabled">not tomato</p>
      </div>

      div p:not(.disabled) {
       color: tomato;
      }

11. 가상 요소(pesudo elemnet)
    가상 요소 섵낵자는 앞에 콜론이 두개 붙는게 웹 표준
    항상 content: ""; --> 항상 넣어줘야함
    ::before,::after는 inline 요소기 때문에 display:block;을 해줘야 가로세로값이 적용됨
    ::after

    요소 앞에 내용을 삽입

    ::before

    요소 뒤에 내용을 삽입

    <body>
    <div>
      <p>Hello</p>
    </div>
    </body>

    p {
      color: tomato;
    }
    p::before {
      content:'Hi ';
      color: lime;
    }
    p::after {
      content: ' World';
      color: violet;
    }

12. 상속(inheritance)
    하위 요소에 어떤 css 속성을 명시하지 않는 경우, 기본적으로 상위 요소에 적용된 스타일이 하위 요소에도 적용되는 것

    <body>
    <div>
      <h3>Hello</h3>
      <p>Hello</p>
    </div>
    </body>

    div {
      color: tomato;
    }
    p {
      color: inherit;
    }

2022.04.05

2022.04.05

시멘틱태그(sementic tag)?

HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써
사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그

시멘틱태그를 사용하면 좋은점

1. SEO 최적화에 유리
2. 웹 접근성에 효율적
3. 유지보수의 용이성

시멘틱태그의 종류

<header>: 머리글, 헤더
<nav>: 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간 위주로 표현
<aside>: 좌측, 우측 사이드 위치의 공간을 의미. 본문 외 부수적인 내용
<section>: 카테고리 별로 섹션을 구분하는 용도의 태그. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article>: 기사, 블로그 등 텍스트 위주의 페이지 구성할때 주로 표현
<footer>: 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현
<address>: 작성자나 사이트 소유자의 정보를 부가적으로 담는 기능
<main>: 문서의 중심 주제, 주요 내용
<details>: 주변 문맥에서 표시된 구절의 관련성이나 중요성을 참조 또는 표기 목적으로 표시되거나 강조된 텍스트
<figure>: 이미지, 사진 등 독립적인 컨텐츠
<figcaption>: <figure>요소 설명
<mark>: 현재 맥락에 관련이 깊거나 중요나 부분 강조

2020.04.04

2022.04.04

* backtick, grave: `
* tilde(틸드): ~
* Exclamation mark(익스클러메이션, 느낌표): !
* At sign(앳, 골뱅이): @
* Sharp, number sign(샵, 넘버, 우물 정): # 
* Dollar sign(달러): $
* Percent sign(퍼센트): %
* Caret(캐럿): ^ (무엇인가의 이상을 가르킬때 주로 사용한다)
* ampersand(엠퍼센드): &
* Asterisk(에스터리스크, 별표): *
* Hyphen, dash(하이픈, 대시, 마이너스): -
* Underscore, low dash(언더스코어, 로대시, 밑줄): _
* Equals sign(이퀄, 동등): =
* Quotation mark(퀘테이션, 큰 따옴표): “
* Apostrophe(아포스트로피, 작은 따음표): ‘
* clone(콜론): :
* semicolin(세미콜론): ;
* comma(콤마, 쉼표): ,
* Period, dot(피리어드, 닷, 점, 마침표): .
* Question mark(퀘스천, 물음표): ?
* slash(슬래시): / (오른쪽 상단에서 왼쪽 하단으로 끝남)
* Vertical bar (버티컬바) : |
* Backslash(백슬래시, 역 슬래시): \ (왼쪽 상단에서 오른쪽 하단으로 끝남)
* Parenthesis(퍼렌서시스, 소괄호, 괄호): ()
* brace(브레이스, 중괄호): {}
* bracket(브래킷): []
* Angle bracket(앵글 브래킷, 꺽쇠괄호): <>

2022.04.04

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 
그것으로 사용자와 상호작용 할 수 있도록 하는 것
즉 웹페이지를 만들어 사용자가에게 보여주는 것

1. 브라우저(크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, 사파리)를 연다
2. 통신 프로토콜(communication protocol)은 원거리 통신 장비 사이에서 메세지를 주고 받는 양식 및 규칙의 체계
    (대표적으로 http, https, ftp, ssl)
3. 최초 요청(request)이 서버로 들어감
4. 최초 응답(response) 기본적인 html이 응답됨
5. 추가요청이 들어오면 추가응답을 해줌 (css, js, jpg ...)

# 웹에서 사용되는 표준 기술이나 규칙
    기술이나 규칙은 누가 정하나? W3C에서 제정한다
# W3C 표준화 제정 단계
    1. 초안
    2. 후보권고안
    3. 제안권고안
    4. 권고안
# Corss Browsing(크로스 브라우징)이란?
    어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
    지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 
    정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드

2022.04.01

fork란 github repository 를 통째로 복사해서 나의 repo 로 만드는 행위
fork를 한 저장소는 원본과 연결되어 있다
변경 사항을 원본 레포지토리에 적용하고 싶으면 원본 저장소에 pull request를 보내야 한다
pull request 하기 전까지는 내 github에 있는 forkgks repo에만 변경사항이 적용된다

1. 원본 repo를 내 저장소로 fork 하기
2. fork를 해서 복제된 <url> 복사
3. git clone <url>
4. cd <newfile>
5. git branch
6. git flow init 
    ls로 확인해 보면 파일 확인 가능
7. git flow feature start <branch>
8. git flow feature finish <branch>
9. git push -u origin develop

# 원본 repo인 경우에는 git pull origin develop
1. git remote -v
2. git remote add upstream <원본 url>
3. git remote -v
    # upstream 이 생긴걸 볼 수 있다
4. git fetch upstream develop
    # fectch를 해서 반영하는게 아니라 FETCH_HEAD 라는 임시 branch에 담아놓게 된다
5. git merge FETCH_HEAD