본문 바로가기

Front-end

JavaScript 랜덤한 위치에 dom요소 생성
2022. 7. 17. DOM요소를 랜덤한 위치에 생성하는 방법을 알아보자. 우선 js 로 html을 조작하기 위해서는 해당 html을 특정하는 변수가 필요하다. 위 section 내부 랜덤한 위치에 div를 생성한다고 가정하여 보자. const field = document.querySelector('.field'); 우선 첫번째로 field를 골라 변수에 담아둔다. const fieldRect = field.getBoundingClientRect(); dom요소의 전반적 위치와 크기 등의 필요한 정보는 getBoundingClientRect() 를 이용하면 구 할 수 있다. const newDiv = document.createElement('div'); newDiv.style.width = `${30}px`; newDiv..
Event
2022. 7. 13. Event는 프로그래밍 중인 시스템에서 발생하는 작업 또는 발생으로, 이에 반응 할 수 있도록 시스템에서 알려주는것이다. 시스템은 event가 발생 할 때 일종의 신호를 생성한다. 우리는 이러한 신호를 받을때 무엇인가를 처리하도록 만들 수 있다. 예를들어 페이지에 성별을 고르는 체크박스가 있다고 가정하면 사용자는 자신이 해당하는 성별의 체크박스를 클릭 할 것이다. 그때 시스템에서 "남자라는 체크박스가 클릭되었어" 라고 알려주게 되고 우리는 그 정보를 가지고 "아 이 체크박스를 사용하는 사용자는 남자이구나" 를 알 수 있다. 이러한 이벤트를 처리 하려면 이벤트 핸들을 통해 처리 할 수 있다. const btn = document.querySelector('button'); function random(nu..
Brower 구조
2022. 7. 13. 우리가 브라우저를 실행할 때 전체적인 브라우저 즉 Window라는 오브젝트가 존재하고, 포함된 요소로 우리가 작성한 HTML이 보이는 Document 오브젝트가 존재한다. 또한, 보이지는 않지만 Navigator라는 윈도 자체 정보를 가진 오브젝트도 있다. 즉 우리가 사용하는 DOM요소나 Navigator, JavaScript 모두 윈도우라는 오브젝트 안에 포함되는 요소들이기 때문에 우리는 JavaScript로 DOM요소도 조작가능하고 Navigator의 정보들을 이용하여 윈도우를 조작이 가능하다.
Web APIs란 무엇인가??
2022. 7. 13. API(Application Programming Inertfaces)는 개발자가 보다 복잡한 기능을 쉽게 사용하여 만들 수 있도록 하는 구성 요소이다. 예를 들어 우리가 자판기를 사용할 때 자판기 내부의 동작이 어떻게 작동하는지 알지 못하여도 자판기의 사용방법 즉, 동전을 넣고 버튼을 누른다.라는 것만 알면 그 자판기를 사용할 수 있는 것과 동일하다. 우리가 윈도에 동작하는 애플리케이션을 만들고 싶다면 윈도우에서 제공하는 API, 모바일에서 동작하는 어플리케이션을 만들고싶다면 안드로이드나 맥os에서 제공하는 API를 사용한다면 보다 쉽게 어플리케이션을 만들 수 있다. 우리가 프로젝트를 만들 때 로그인을 해주고 로그아웃을 해주고, 파일을 삭제해주는 함수를 만들었다면 이러한 함수들이 API가 되는 것이다...
Flexbox를 이용한 레이아웃 방법을 알아보자(2)
2022. 6. 12. 지난번에 이어 이번에는 Flexbox의 속성 중 내부아이템 속성을 알아보자 item에 적용되는 속성값은 grow, shrink, basis, align-self, order가 있다. flex-grow는 아이템들이 컨테이너의 전체 크기에 맞게 스스로의 사이즈를 늘리려는 성질이다. flex-grow의 기본값은 0이며 위 문서를 보면 원래의 크기보다 남은 공간이 더 넓어지자 해당 공간을 item1과 item2가 각각 2:1의 비율로 나눠 가져 사이즈가 커진것을 알 수 있다. flex-shrink는 grow의 반대이다. 원래의 아이템 사이즈보다 컨테이너가 줄어들었을때 설정한 비율만큼 더 줄어 드는 것이다. flex-shrink의 설정값이 클 수록 더 많은 비율의 사이즈가 줄어드는 것을 볼 수 있다. flex-b..
Flexbox를 이용한 레이아웃 방법을 알아보자
2022. 6. 12. Flexbox가 나오기 전까지만 하더라도 우리들의 레이아웃은 position과 float, table 등이 담당하였다. 그중에서도 요소와 요소의 배치를 할 때 float를 많이 사용하였는데, 사실 float는 요소와 요소가 아닌 이미지와 글을 함께 배치하기 위하여 만들어졌다. Flexbox가 나오면서 float는 온전히 자신의 역할을 수행 할 수 있게 되었다. 그렇다면 Flexbox가 어떻게 생겼는지 살펴보자. Flexbox는 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있는데, 먼저 컨테이너 관련 속성을 살펴보면, display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content 가 있다. 사용법은 ..
CSS 레이아웃을 알아보자
2022. 6. 11. HTML을 작성하고 CSS로 스타일을 입힐때 가장 중요한것은 뭐라고 생각하는가?? 폰트나 색상, 배경 이러한 요소들도 물론 중요하지만, 내가 작성한 요소들이 내가 원하는 위치에 있도록 하는것이 제일 중요하다. 이러한 요소들을 원하는 위치로 이동시키기 위해서는 CSS 속성중 display 와 position 두가지 속성이 중요하다. 두가지 속성을 간단하게 이야기하자면, display는 요소의 성질을 정해준다. 즉, div와 같은 block의 성질을 지닌 요소들을 inline이나 inline-block등으로 성질변환을 시킬 수 있다. 반대로 inline성질을 가진 요소들도 다른 성질로 변환 시킬 수 있다. 해당 자료를 보면 display 속성을 이용하여 block요소인 div 와 inline요소인 span의..
CSS패딩과 마진
2022. 6. 11. HTML과 CSS를 작성하다 보면 요소 주변에 여분의 자리가 있음에도 다른 요소들과 일정 간격이 벌어진 것을 볼 수 있다. 이는 HTML의 블록요소로 인하여 생긴 공백일 수도 있고, 그렇지 않다면 CSS의 패딩과 마진이 바로 이 간격의 원인이다. 그럼 패딩과 마진은 무엇일까?? 우선 HTML과 CSS를 통해 작성된 요소의 구조는 제일 안쪽부터 콘텐츠 영역 > 패딩 영역 > 볼더 영역 > 마진 영역으로 이루어져 있으며 아래 사진과 같다. 즉, 패딩은 콘텐츠 영역과 볼더라인 사이에 있는 여백을 의미한다. 아래 작성한 두 문서를 비교해보면 쉽게 알수있다. 볼더 라인과 div내부 텍스트를 기준으로 사이에 간격이 벌어지는 것을 볼 수 있다. 내가 좋아하는 MDN사이트(https://developer.mozilla..

티스토리툴바