1. CSS: background- properties
    • 이미지 출력 시 HTML에서 img 태그를 활용할 것인지 혹은 CSS에서 background-image를 사용할 것인지 고민하다, background-image는 사용한 경험이 없어서 적용해 보고자 했다.
    • 원하는대로 이미지를 구현하기 위해 다양한 background- property를 사용했다.

스크린샷 2019-06-05 오후 2.20.35.png

.photoIcon {
  background-image: url(http://cdn.onlinewebfonts.com/svg/img_94880.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 25px;
  height: 25px;
  position: relative;
  left: 8%;
  background-color: #e6f5ff !important;
}
  • background-image: url("image 주소");
  • background-repeat: background-image가 반복될것인지 설정하는 것
    • 기본적으로 가로 세로로 지속적으로 반복됨. no-repeat으로 설정해야 원하는 이미지가 한 번만 나오도록 설정할 수 있음.
  • background-size: url을 사용해서 입력한 이미지의 크기를 조절함
    • cover: 이미지를 크기를 키워서 설정한 영역 전체를 체우도록 하는 것. 이미지가 배경과 다를경우 크게 늘어나 원하는 이미지가 모두 보이지 않을 수 있음.
    • contain : 이미지 크기를 조절하여 설정한 영역 내에서 이미지가 모두 보일 수 있도록 하는 것
    • image-position: 설정된 영역 내에서 이미지의 위치. 기본값은 좌측 상단에 위치한다
  1. DOM : HTML/CSS 와 JS가 소통하는 방식

    • createElement: element 만들 때 사용
    • appendChild : 기존에 형성된 element에 새로운 element를 추가
    • getElementsByClassName : 데이터를 배열로 가져오기 때문에 구체적인 것을 사용하려면 index를 호라용하여 잡아야 함
  2. Event : addEventListener

    • 이벤트를 달 때 사용하는 함수
    • 종류 매우 다양: onClick, keyUp, keyDown 써봄
    • keyCode: 키보드가 가지고 있는 고유 code, enter === 13