2주차 - CSS, JavaScript

 

기간	230515 - 230519
배운 내용	CSS, JavaScript

 

◎ CSS

트랜스폼: translate 이동/ scale 확대축소/ rotate 회전/ skew 비틀기
트랜지션: 엘리먼트의 스타일 바뀔 때 천천히 바뀌도록(속도 조절)

뷰포트 : 실제 내용이 표시되는 영역. 
모바일 기기와 pc는 뷰포트가 다르다.

prompt는 숫자 입력해도 문자열로 변환됨

 

---

◎ JavaScript

1. 변수

함수 안에서 var와 같이 명시해주지 않으면(변수 선언 없이 생성하면) 전역변수로 생성됨

function a() {
   var v1 // 지역변수
   v2 // 전역변수
}

전역변수 많이 사용하는 것 권장하지 않음.
전역변수 사용 시 결합도 증가 -> 하나 수정하면 다른 것에도 영향을 미침. 유지보수에 좋지 않음

자바스크립트에서는 같은 이름 변수 재선언 가능

재선언 시 기존 변수 사라짐. 하지만 let 사용 시 오류남. 

let은 블럭변수라서 감싸고 있는 블록 안에서만 사용 가능 (자바의 지역변수와 비슷)

2. slice와 splice

slice 는 복사해서 가져오므로 기존 배열에 영향 없음
splice는 기존 배열에 영향 줌

3. innerText와 innerHTML

innerText -> 태그가 있어도 다 문자열로 처리
innerHTML -> 태그 등이 반영됨
=> 글자에 태그/효과 주려면 innerHTML

 

4. event.preventDefault

디폴트 이벤트 존재한다면 그 이벤트 처리하지 않도록. 원래 이벤트 핸들러 동작하지 못하도록 함.

 

실습

버튼이 클릭 되면 id = first 인 element가 보이지 않고 id = second 인 element가 보이도록 구현(background 색은 #fcf5d4 로 변경)
다시 버튼이 클릭 되면 id = second 인 element가 보이지 않고 id = first 인 element가 보이도록 구현(background 색은 #c5e9fe 로 변경)

 

구현 코드(js 부분)

<script>
    function show() {
        var state = document.getElementById("first");
        if(state.style.display==='none')
        {
            document.querySelector('#first').style.display="block";
            document.querySelector('#second').style.display="none";
            document.querySelector('.container').style.backgroundColor='#c5e9fe';
        }
        else
        {
            document.querySelector('#first').style.display="none";
            document.querySelector('#second').style.display="block";
            document.querySelector('.container').style.backgroundColor='#fcf5d4';
        }
    }
</script>