본문 바로가기

전체 글

[JS] 배열(array)의 요소 조작 문제 풀어보기 배열의 요소를 가지고 문제를 풀어 봅니다 문제) divideArrayInHalf 함수를 다음과 같이 구현해주세요 divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다. divideArrayInHalf 함수는 인자로 들어온 array로부터 새롭게 구성된 배열 result을 리턴합니다. array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소부터 재구성을 진행해주세요. 예를 들어, 인자로 들어.. 더보기
[CSS] margin으로 가운데 정렬 간단하게 가운데 정렬을 쉽게 할 수 있는 방법이 있습니다 바로 예를 들어 보자면 아래 box를 만들었습니다 box .box { width: 300px; height: 300px; background-color: royalblue; } 왼쪽 상단에 box가 위치해 있습니다 여기서 margin을 통해 간단하게 body요소의 흐름에 따라 가운데 정렬을 할 수가 있습니다 margin: 0px auto; .box { width: 300px; height: 300px; background-color: royalblue; margin: 0px auto; } body가 상위요소가 아닌 부모 요소를 하나 만들어 가로(width)를 설정해주고 만들어 보겠습니다 box body { background-color: bisqu.. 더보기
[CSS, HTML] display(디스플레이) inline, inline-block, block inline 줄 바꿈 없이 나란히 배치되는 속성을 의미합니다 대표적인 , , 태그가 있습니다 AAA BBB CCC inline-block inline-block으로 지정된 요소들은 기본적으로 inline의 속성을 가지지만 가로와 세로를 block처럼 지정해 줄 수 있습니다 span { display: inline-block; width: 200px; height: 200px; background-color: rgb(118, 83, 29); } block 전후의 줄 바꿈이 있고 다른 엘리먼트를 밀어내고 한 줄을 차지합니다 대표적으로 , , 가 있습니다 div, h1, p{ background-color: yellow; } AAAA BBBB CCCC 더보기
[CSS] position(포지션) relative, absolute, fixed css의 position을 활용하면 일명 box라고 하는 레이아웃의 위치를 자유롭게 이동할 수 있습니다 position을 이용할 수 있는 프로퍼티가 몇 개 있습니다 relative absolute fixed 세 가지를 알아봅니다 relative 로얄블루색상의 박스를 만들었습니다 가로 100px, 세로 100px의 박스입니다 .box1 { width: 100px; height: 100px; background-color: royalblue; position: relative; } 여기에 relative 속성을 추가하겠습니다 실행시키게 되면 아무 일도 일어나지 않습니다 그 이유는 position속성을 움직일 명령어를 입력하지 않았기 때문입니다 position 속성들을 움직일 수 있는 명령 중 대표적으로 to.. 더보기
[HTML] Semantic(시멘틱) Tag(태그)와 Web(웹) 시멘틱 웹은 의미론적인 웹이란 뜻이다 시멘틱 웹 = 의미 있는 웹 시멘틱 태그 = 의미있는 태그 과거 또는 현제 div(디비전)이라 하는 태그를 이용하여 마크업의 영역들을 구분해 왔는데 최근에 들어 사용자가 사용하기에 검색엔진과 같은 찾는 수단의 정확도가 중요해지면서 시멘틱 태그를 사용하여 개발을 하는 경우가 많이 있다 시멘틱 태그 적용 전 중요한 제목 입니다 중요한 내용 입니다 시멘틱 태그 적용 후 중요한 제목 입니다 중요한 내용 입니다 영역이 가지고 있는 확실한 의미를 부여함으로써 개발환경에 있어 관리에 용이함은 물론 사용자에게 있어도 검색엔진 등 정확도를 올려줄 수 있다는 점이다 예를 들어 HTML의 img태그와 CSS의 background-image를 통해 이미지를 넣는다고 가정할 때 둘의 차이점.. 더보기
[React / javascript] React 시작하기 React 시작하기 전 필수로 설치해야 할 요소들이 있습니다. 아니면 React를 무겁게 배우기는 싫다 그냥 가볍게 React가 어떤 건지 알고만 싶다 하시면 CodePen Create a New Pen ... codepen.io Stackblitz React (forked) - StackBlitz stackblitz.com 사용하여 간단하게 react 사용환경을 경험하실 수 있습니다 저는 VScode를 기준으로 설명해 드리겠습니다 주의) Node.js의 최신버전이 설치되어 있어야 합니다! 각 운영체제의 맞는 터미널 환경을 확인해 주세요! 저는 바탕화면에 React-playground라는 폴더를 새로 생성하여 불러왔습니다 순수하게 html, css, js로만 작성할때는 파일을 바로 만들면 간단하게 사용할.. 더보기
[JS / javascript] scroll X, Y 값 구해보기 필요한 학습 문법이 있습니다 addeventlistener 알고 계시면 scroll값을 편하게 구할 수 있습니다 이것을 통해 간단하게 스크롤 이동을 할 수 있습니다 예시를 통해 봅시다 제가 간단하게 만든 자기소개 페이지입니다 지금 보이는 화면은 페이지의 하단이고 우측 하단에 보이는 TOP 이라는 버튼을 누르면 페이지의 제일 상단으로 이동하고 싶습니다 순서를 정리해 보자면 1. 화면의 스크롤 Y 값을 구한다 2. 버튼을 누르면 구한 스크롤 Y 값으로 페이지가 이동한다 3. 부드럽게 이동시켜 본다 1. 스크롤 값 구하기 window.addEventListener('scroll', function() { console.log(window.scrollY); }); console창으로 확인 했을때 페이지 제일 상.. 더보기
[JS / javascript] if문 조건식 한번에 여러개 비교하기 if문의 조건을 두 가지, 세 가지 한 번에 비교할 수 있는 방법이 있습니다 우리가 아는 형태의 if문 입니다 저기 조건식 부분에 조건을 여러 개 넣고 비교하려면 여러 가지 방법이 있겠으나 제가 아는 방법입니다 한 번에 비교하기 &&(논리 연산자)는 두 개의 조건식이 모두 맞아야 ture를 출력하는 연산자입니다 예시) num이라는 파라미터에 5라는 숫자를 넣었을 경우 두 가지의 조건식이 만족하는지 확인합니다 첫 번째 조건식은 10 보다 작은 숫자인가? 두 번째 조건식은 num 숫자가 5와 일치하는가? 이렇게 두 가지 조건식이 일치할 경우 내가 실행하고 싶은 자바스크립트 코드가 실행됩니다 더보기

티스토리툴바