211005 필기내용

21.10.05

git

git bash (cli)로 깃 첨부 방법

• git status : 깃 상태 보기
• git add * : 모든 파일 첨부하기
  • git add . : 모든 파일 첨부하기
• git commint -m " " : "요약내용"
• git push : 푸시하기
• git reset : undo와 같은 기능
• git pull : pull 받기

html

• © : ©
• 강조의 표현
  • strong : 강요성(위협, 무조건적인)을 띤 강조 - danger
  • em : 권유성 강조
  • ins : 추가 점부된 내용
  • del : 기존 내용에서 삭제된 것
  • mark : 인식 (형광펜)

css

• text-indent: 10px; : 첫 줄 10px 들여 쓰기
• transition: height 300ms linear; :
  • 단편성을 가진 애니메이션 기법
  • 높이를 300ms 속도로 일직선으로 보여주기
  • (알고만 있고 사용은 x / 다른 방법 있음)
• clip: rect(18px, 122px, 92px, 18px); : top, right, bottom, left 순으로 사각형을 그려 처리
  • clip은 position이 같이 있어야 함

---

광고 영역 잡기 (가로로 슬라이드)

<!-- .view_area 영역의 위치를 잡기 위한 틀 -->
      <div class="view_area">
        <!-- .view_wrapper 광고영역의 나열 시 범위 -->
        <div class="view_wrapper">
          <!-- .view_content 광고 내용 -->
          <div class="view_content view_01">광고 01</div>
          <div class="view_content view_02">광고 02</div>
          <div class="view_content view_03">광고 03</div>
        </div>
      </div>

.view_area {
  width: 100%; height: 100%;
  border: 1px solid #333;
  background-color: #afc;
}

.view_wrapper {
  width: 300%; height: 100%;
  background-color: #fca;
}

.view_content {
  float: left;
  width: calc(100% / 3); height: 100%;
}

.view_01 { background-color: #8D0909aa;}
.view_02 { background-color: #23BE93aa;}
.view_03 { background-color: #9A6DCAaa;}

• .view_wrapper 에 margin-left : -100% 하면 두 번째 영역 보기
• .view_wrapper 에 margin-left : -200% 하면 세 번째 영역 보기
• 변수 하나를 선언해서 calc 안에 나누는 숫자를 변수로 지정해버리면 다른 곳에서도 그대로 사용 가능

같은자리에 모여있는 형태로 사용 방법

.view_wrapper {
  position: relative;
  width: 100%; height: 100%;
  background-color: #fca;
}

.view_content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.view_01 { z-index: 10; background-color: #8D0909aa;}
.view_02 { z-index: 9; background-color: #23BE93aa;}
.view_03 { background-color: #9A6DCAaa;}

• 기준이 되는 요소에 relative
• 보여줄 요소에 absolute
• 처음 보여주어야 하는 요소에 z-index를 주어 앞으로 배치
• 이후에 (뒤에) 오는 요소에는 z-index를 앞에 오는 요소보다 낮은 값으로 주어 뒤에 배치
• 이외의 나머지는 보이지 않도록 처리

 

 

기타

background 속성 공부