변수(scope)
- 변수, 객체, 함수 등은 선언된 위치에 따라 변수에 접근(읽기, 쓰기, 저장)이 제한적이다
- for() 명령문에 선언된 변수 i와 for() 블럭({})에 선언된 sum은 for() 명령문 블럭({})이 끝나면 소멸되어 사용할 수 없다.
- for() 명령문 앞에 선언된 sum은 for()명령이 종료 되어도 값을 유지하고 있다.
console.log(sum)에 의해 값 확인 가능
const inputScores = document.querySelectorAll("input.sc_score");
const btnOk = document.querySelector("button.score_add");inputs, inputScores 는 SelectAll() 을 사용하여 다수의 요소를 보관하기 위한 객체 배열 -> for를 이용하여 뭔가를 해결할 수 있다
btnOk 는 Selector()를 사용하여 단일 요소를 보관하기 위한 객체
- 저장된 데이터를 localStorage 에 영구 보관하기
영구보관하기 : persistance 처리, 영속성 유지
input.select();
입력된 text에 선택 block을 설정하여 즉시 문자열을 입력하면 text 를 지우고 다시 입력
방향키를 누르면 문자열 중간의 글자들을 수정할수 있도록 하여주는 역할(부분 수정시)
main01.js
scoreInput() 함수가 끝나는 부분 여기에 다다르면 score 는 소멸되고, scores 는
score들을 담고 계속 유지가 되고 있다
관점의 분리
함수를 이용해서 분리를 해 함수간에 결합도는 낮지만 응집도는 높다
- Object.values(객체)
객체의 변수들만 getter 하여 변수의 값들을 배열로 만들어주는 함수
<img>
화면에 image 를 보여주기 위한 요소 img tag 의 src 속성을 통하여 이미지가 저장된 경로와 이미지의 이름, 확장까지 지정을 해주면 화면에 이미지를 표현할수 있다
기본 크기는 실제 이미지의 크기가 반영된다 보여지는 이미지의 크기는 width와 height를 사용하여 조절할수 있다.
단,width 와 height 를 사용하여 이미지 크기를 조절하여도 실제 이미지가 변하는 것은 아니다.
UI 화면에서 이미지를 보이기 위해서는 가급적 실제 보이는 이미지와 원본 이미지의 크기를 일치 시키는 것이 좋다 큰 이미지를 가져오기 위해서는 그만큼 네트워크를 사용하여 데이터를 다운로드 하여야하기 때문에 비효율적이다.
단, 실제 원본 이미지는 보여지는 이미지 보다 약간 큰것이 좋다 약간 큰 이미지를 조금 줄여서 보여주면 선명도가 더 나아지기도 한다.
이미지크기에서 width나 height 둘 중 한개를 사용하면 이미지의 비율에 따라 나머지 크기가 결정된다 width와 height 를 모두 설정하면 이미지 비율이 일그러지는 현상이 발생할 수 있다
img 태그 끼리는 inline태그이다
float
이미지와 text를 조화롭게 화면에 표현하기 위한 style
div에 float 사용하지 말기
-
alt
<img src="images//bg_images_5.jpg" alt="bg image 5" />
이미지가 어떤 이유로 화면에 보이지 않을 경우 이미지에 대한 정보를 text로 보여주기 위한 설정
웹 접근성 지침에서는 alt 속성을 반드시 작성하도록 하고 있다 그 이유는 청각장애인을 위한 화면 Reading SW 에서 읽을 수 없지만 이미지 tag 의 alt 속성을 읽어주는 기능이 있기 때문에 필수로 사용해야하는 속성으로 지정하고 있다 -
background
background-image: url("images/bg_images_1.jpg");
background-size: 100% 100%;- background-size 설정
- auto : 기본값으로 원본 image 크기를 그대로 표현
- contain: 지정한 요소안에 배경 이미지가 가득 차도록 확대, 축소하여 표현
box 보다 이미지가 클때 주로 사용 - cover: 지정한 요소를 다 덮도록 이미지를 확대, 축소
box 보다 이미지가 작을떄 주로 사용 - px 값으로 지정 : 임의의 width,height 를 지정하는 방법
-
parallax 효과 :
background-size 를 100%으로 설정하여 background-attachment 를 fixed로 설정하면 box 가 위아래 스크롤 될때 내부의 이미지는 고정된 상태로 유지된다
-
transition: border 0.5s, background-color 1s;
기본 속성에서 변화가 일어날때 딜레이를 주어 조금 부드럽게 변화되도록 하는 기법 -
overflow :
box 크기가 고정된 상태에서 내부의 content 가 box 크기보다 큰 경우
overflow 를 지정하면 box 내부에서 content가 머물도록 할 수 있다hidden : box 보다 넘치는 content를 잘라서 보이지 않게 scroll : 항상 scroll bar 가 보이도록 auto : content 가 넘치는 경우에만 scroll bar 가 나타나도록 overflow : width, height에 모두 적용 overflow-y : height 에만 적용 overflow-x : width 에만 적용 -
position
모든 box tag 는 기본 positon 이 relative 이다
다른 tag 에 positon 을 지정하여 tag 의 위치를 지정하고자 할때는 부모 역할을 수행하는 tag 에 position을 relative로 강제 설정해 주어야 한다
section:hover img:nth-of-type(2){}
만약 section box 에 hover 가 되면 두번째 img tag에 style 을 지정하라라는 말
- ellipsis 효과 : 말줄임표
box 의 크기를 고정하고(px 로 설정하는 것이 더 정확)
white-space : nowrap
overflow : hidden
text-overflow : ellipsis
- display: -webkit-box;
webkit-line-clamp: 3; / 라인 수 /
webkit-box-orient: vertical;
-> 실험적인(공식적이 아닌) 속성이 속성을 적용하면 멀티라인 ellipsis 효과를 낼수 있다
그외
카카오 오븐, audobe xd
프로토 타입
https://pixabay.com/ko/ -> 무료 사진
http://guny.kr/stuff/klorem/
https://placeholder.com/
