웹 UI개발 기초강의 정리 02

[ Script ]

.toFixed()

• 숫자의 소수점 부분을 반올림해주는 메서드. 주의할 점은 변환 결과가 문자형임
• 모든 숫자형 뒤에 붙일 수 있으며, 파라미터로는 반올림 받을 자리수를 입력함

let pi = 3.141592;

/* 자리수 지정 안 했을 때 */
console.log(pi.toFixed()); // 결과 : 3, 정수 부분만 남겨줌

/* 자리수 지정 했을 때 */
console.log(pi.toFixed(2)); // 결과 : 3.14, 지정한 만큼의 소수점 자리수까지 남겨줌

 

 

parseFloat()와 parseInt()

• 문자형 꼴의 숫자를 숫자형으로 변환해주는 함수. float는 실수로, int는 정수로 변환해줌
• parseInt()를 적용했을 때, 소숫점 이후는 버림 판정

let pi = "3.141592";

/* 실수 형태로 변환 */
console.log(parseFloat(pi)); // 결과 : 3.141592

/* 정수 형태로 변환 */
console.log(parseInt(pi)); // 결과 : 3

 

 

querySelector()

• 셀렉터에 입력한 선택자와 일치하는 문서 내 첫 번째 요소를 반환. 일치하는 요소가 없다면 null 반환
• 태그를 선택할 땐 그냥 태그명을 써주면 되고, 클래스를 선택할 땐 온점과 클래스명을, 아이디를 선택할 땐 #과 아이디명을 씀
• 선택하고 싶은 요소가 첫 번째가 아닌 경우, 이름에 :nth-child를 붙여서 조정할 수 있음

/* 태그 선택 */
document.querySelector("html"); // "html"로 html 태그를 셀렉

/* 클래스 선택 */
document.querySelector(".classEx"); // ".classEx"로 classEx 클래스를 셀렉

/* 아이디 선택 */
document.querySelector("#idEx"); // "#idEx"로 idEx 아이디를 셀렉

/* 원하는 순서의 요소 선택 */
document.querySelector("div:first-child"); // div태그 중 첫 div 셀렉
document.querySelector("div:third-child"); // div태그 중 세 번째 div 셀렉
document.querySelector("div:last-child"); // div태그 중 마지막 div 셀렉

 

 

scroll관련 메서드

• .scrollY :현재 페이지에서 스크롤을 내린 정도를 px 단위로 알려줌. 가로 스크롤바가 있을 땐 .scrollX도 기능
• .scrollTo(x,y) : x좌표와 y좌표를 인자로 받아서 스크롤을 강제로 입력한 위치로 이동시켜줌
• .scrollBy(x,y) : 마찬가지로 스크롤을 이동시켜주는데, 출발 위치가 현재 스크롤 기준
• .scrollHeight : 현재 페이지에서 스크롤 가능한 총 높이를 알려줌 (페이지 로딩 마친 후 측정하는 게 정확하므로, body태그 후반부에서 측정하는 편이 정확함)
• .clientHeight : 스크롤 한 번에 보여주고 있는 화면의 높이를 알려줌
• .scrollTop() : 인자 없이 쓰면 페이지 y축 스크롤 양을 알려주고, 인자를 넣으면 그만큼 이동시켜줌
• .scrollLeft() : 인자 없이 쓰면 페이지 x축 스크롤 양을 알려주고, 인자를 넣으면 그만큼 이동시켜줌

 

scroll 값 다룰 때 주의할 점

• 스크롤 양은 정수단위로 나오지 않고, 브라우저나 OS마다 차이가 존재하기 때문에 엄격한 계산시 주의
• 스크롤 이벤트리스너의 코드는 1초에 60번 이상이나 실행되니, 많이 작성하면 중복 작동하거나 성능 저하될 수 있음

 

[ CSS ]

position : fixed

 화면을 스크롤하더라도 위치가 고정되도록 하는 속성. 상단 바나 하단 바를 고정시키는 등에 활용

 

 

z-index

• html 요소의 가상의 z값을 조정해줌. 화면 배치 우선순위나 포토샵의 레이어 등을 생각하면 좋을 듯. 
• position이 static인 요소의 z-index값은 기본값 0(=auto)이고, static인 요소와의 위치 대결에선 z-index가 효력이 없음
• z-index 값은 음수도 양수도 가능하고, static이 아닌 요소들 간 비교에선 숫자가 클수록 우선적으로 보임. 위치가 겹치는 div가 있다면 z-index가 큰 쪽이 위에 보임