본문 바로가기

전체 글

[TIL-120] 위코드 19일차: 위스타그램 Wrap-Up / Javascript 테스트 CSS bottom-up 개념 자식 태그에 속성을 먼저 부여하고 그에 따라 부모 태그의 속성이 결정되게 하는 방식이다. 예를 들어, 부모 태그에 고정된 크기를 주는 게 아니라, 그 안의 자식 요소들의 크기를 부여하여 부모 요소의 크기가 결정되게 한다. 그럼 내부의 자식 요소에 변동이 있을 때 부모 요소도 알아서 조절되기 때문에 변화에 유연하다는 장점이 있다. 하지만 무조건 bottom-up 방식을 쓰는 것은 아니다. 예를 들어, 부모 요소의 정해진 크기(영역)을 초과하도록 자식 요소가 추가될 경우 스크롤해서 확인할 수 있게 할 때가 있다. .boxComponent { height: 200px; padding: 10px; margin: 10px 0; overflow: scroll; background-co.. 더보기
[TIL-119] 위코드 18일차: 위스타그램 - 메인 페이지 CSS outline 개념 input 태그에 border 속성을 제거해도 기본값으로 focus 되었을 때(인풋을 클릭해서 입력 받을 수 있는 상태) 파란색으로 테두리가 생긴다. 이 테두리를 outline 속성으로 제어할 수 있다. focus된 input에 대한 선택자는 input:focus로 쓸 수 있다. input:focus { outline: none; } focus된 input의 outline을 없앤다. 선택자 > 개념 input 태그의 자식인 p 태그에 CSS를 적용하기 위해 선택할 때 input p라고 쓸 수도 있고 input > p라고 쓸 수도 있다. 이 차이는 >를 쓰면 직속 자식만 선택된다...? Javascript innerText & innerHTML 개념 어떤 태그의 내용에 접근할 때.. 더보기
[TIL-118] 위코드 17일차: 깃과 깃헙 Git & Github git init : 새 프로젝트 시작하기 개념 내가 새로운 프로젝트를 만들 때는 git init을 사용하여 깃을 시작한다. // 깃을 사용하여 변경 내용을 감지하기 시작함 git init // 코드를 올릴 깃헙 서버(remote)의 레포지토리 주소를 origin이라는 변수에 저장함 git remote add origin repository_url // 현재 디렉토리의 전체 파일을 staging 영역에 추가함 git add . // 지금까지의 변경사항을 깃으로 저장함(커밋) git commit -m "first commit" -----여기까지 local----- // 쌓인 커밋을 main 브랜치에 업로드함(푸시) git push origin main 작업할 디렉토리에 git init.. 더보기
[TIL-117] 위코드 16일차: 위스타그램 - 로그인 페이지 JS Javascript location.href = "이동할 페이지"; 개념 location 객체의 href 속성 값에 특정 페이지 주소를 입력하면, 입력한 페이지로 이동시켜준다. 사용법 function moveToMain(event) { event.preventDefault(); location.href = "main.html"; } btnLogin.addEventListener("click", moveToMain); cf) location.replace 더보기
[TIL-116] 위코드 15일차: 위스타그램 - 로그인 페이지 HTML 개념 태그에는 alt 속성이 있는데, 이미지가 로딩되지 않을 때 alt에 적어둔 값이 표시된다. 시각장애인의 경우 alt의 내용을 통해 이미지가 어떤 것인지 알 수 있다. 따라서 alt가 매우 중요하므로 src보다 먼저 작성한다. Javascript 삼항 조건 연산자 개념 조건부 삼항 연산자는 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. ?(물음표)와 :(콜론)을 사용하여, 조건문 ? 참일 때 : 거짓일 때 의 형태로 작성한다. 조건을 제시하고 이 조건이 참일 때, 거짓일 때 실행할 코드를 뒤이어 씀으로써, if를 사용한 조건문을 줄여서 쓸 수 있다. 사용법 function inactiveBtn() { btnLogin.style.backgroundColor = "#c5e1fb"; btn.. 더보기
[TIL-115] 위코드 14일차: enemyRain 게임 - 유령 잡기 Javascript clearInterval() 개념 setInterval 함수의 반복 실행을 멈추려면, setInterval()을 변수에 할당해주고 멈추고 싶을 때 clearInterval(변수);를 실행하면 된다. 사용법 function moveGhost() { const ghostsArr = document.getElementsByClassName("ghost"); const ghostsLeng = ghostsArr.length; if (ghostsLeng > 0) { for (let i = 0; i < ghostsLeng; i++) { const ghost = ghostsArr[i]; let ghostTop = parseInt(ghost.style.top); if (ghostTop < 536) {.. 더보기
[TIL-114] 위코드 13일차: enemyRain 게임 - 내려오는 유령 Javascript setInterval() 개념 setInterval() 함수는 특정 동작(함수)를 특정 시간마다 실행시켜준다. setInterval(함수, ms 단위 초) 형태로 사용한다. 예시 function createGhost() { const ghostDiv = document.createElement("div"); ghostDiv.className = "ghost"; ghostDiv.style.left = `${Math.floor(Math.random() * 756)}px`; document.querySelector("#bg").appendChild(ghostDiv); setInterval(moveGhost, 1000); } setInterval(createGhost, 5000); setIn.. 더보기
[TIL-113] 위코드 12일차: enemyRain 게임 - 배경 이미지와 캐릭터 이동 CSS Image Sprite 개념 여러 개의 이미지를 합쳐서 하나의 이미지 파일에 저장하여, 그때그때 원하는 부분만 잘라서 사용하는 방식이다. 페이지에 여러 가지 이미지가 필요해도 브라우저가 해당 이미지 파일 하나만 다운받으면 되기 때문에 서버 요청 과정이 효율적이다. 또한 수시로 이미지가 바뀌어야할 경우, 아무리 로딩이 빨라도 새로운 이미지 파일을 받아오려면 시간이 걸려서 깜박여 보이는 효과가 발생하는데 이를 막아준다. 사용법 .front-face { background-position: 0 0; } .right-face { background-position: 35px 0; } .left-face { background-position: 70px 0; } .back-face { background-.. 더보기

티스토리툴바