개발자의 낙원

이 글은 먼저 자바스크립트 코드를 통해 글의 동기를 서술하고, 밑부분에 새로고침이 발생하는 이유를 보여주는 구성을 가지고 있습니다. 이유바로 보기 Form(폼) 태그를 다루는 자바스크립트 코드 밑의 코드는 자바스크립트를 통해 폼의 이벤트를 감지하는 예제의 템플릿이다 코드의 구성은 다음과 같다. 1. 변수: DOM document 오브젝트의 메서드를 통해 폼 태그가 저장되어 있다. 2. 콜백함수: "submit"이벤트가 폼태그에서 발생했을 때 호출된다 3. 이벤트리스너: 1번의 변수에 저장한 폼의 "submit" 이벤트를 감지하는 비동기함수이다. const myForm = document.querySelecotr("form") /**Event Listener는 콜백함수의 첫 인자로 * event 오브젝트를..

일반적으로 하나의 웹페이지를 개발할 때, html, css, 그리고 javascript 세 종류의 파일에 코드를 분리해서 저장한다. html 문서의 구조 사실 스타일을 지정하거나, 브라우저의 동작을 지정할 코드들도 html 문서 내부에 충분히 작성할 수 있다. 그렇다면 대체 왜 개발자들은 css파일과 javascript파일을 따로 분리해서 html 파일에 연결해 주는 방식을 택한 것일까? html 파일 하나에 모두 작성하지 않는 이유! 를 CSS와 javascript 를 통한 html 태그의 조작을 간단히 소개하면서 살펴보겠다. 기술적 이유: 사실은 이렇습니다. CSS (Cascading Style Sheets)? CSS는 HTML와 같은 웹페이지 구성요소의 스타일을 지정하는 언어이다. CSS코드를 HT..

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..

실시간 화상채팅을 하기 위한 예시 영상을 업로드하기 위한 예시 This browser doesn't support video 이 브라우저는 동영상 재생을 지원하지 않습니다. Attribute (속성) autoplay: 자동재생 비디오가 페이지에 로드되자마자 자동으로 재생되게 하는 속성 요즈음에는 마우스 커서를 올렸을 때, 임시 재생화면을 따로 제공하는 게 유행이라 웹페이지에서는 잘 쓰이지 않는다. 하지만 web으로 구동되는 실시간 영상통화 어플에는 여전히 유용하다. controls: 조작패널 유저와 상호작용하기 위한 기본 조작 ui를 추가하는 속성. 재생, 정지, 볼륨조절, 재생장면 이동 등의 기능을 제공한다. loop: 루프 영상재생이 끝났을때 다시 처음부터 재생하게 하는 속성 muted: 침묵 영상의..

프로그래밍을 하다 보면 특정 이벤트에 딜레이를 걸어줘야 하는 일이 종종 있다. 자바스크립트에서 자주 사용되는 딜레이 메서드인 setInterval과 setTimeout에 대해 알아보자. 이 두 메서드를 사용할 때 주의할 점은, 딜레이 측정이 동시에 진행된다는 점이다. 간단한 소개 이후 실제 예제를 통해 살펴보자. setTimeout 메서드 함수실행까지 일정 딜레이를 부여하는 기능을 가진 메서드이다. Timeout은 시간초과를 뜻한다. 메서드 코드형태 setTimeout(함수이름, 지연시간); 이때, 지연시간의 단위는 millisecond(밀리세컨드, 천분의 1초)이다. 만약 함수실행까지 10초의 딜레이를 주고 싶다면 두 번째 인자로 숫자 10,000을 집어넣으면 된다. setInterval 메서드 함수를..

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..

Html icons created by Pixel perfect - Flaticon HTML: Hyper Text Markup Language 하이퍼텍스트 마크업 언어 하이퍼 텍스트: 인터넷에서 사이트끼리 접속을 매개해 주는 링크 마크업: Tag(태그)들의 집합 Tag: 요소의 배치방식이나 요소간 관계등의 특징을 정의하기 위한 도구. html은 요소의 앞과 뒤에 태그를 붙여 특징을 정의한다. ex) 요소 앞에 있는 태그를 opening tag(여는 태그), 뒤에 있는 를 closing tag(닫는 태그)라 한다. 단일 태그로 존재하는 요소 : 줄바꿈태그. 앞뒤 태그가 따로 존재하지 않는다. 태그속성(attribute) 태그에 포함되는 문자를 "속성"이라 한다. 각 요소들의 행동 및 배치구조를 나타내기 위..

부트스트랩? 웹 디자인용 템플릿 코드를 모아놓은 Html, CSS, js기반의 프론트엔드 프레임워크. 특징 mobile-first(모바일 우선): 스마트폰, 태블릿등의 모바일 사이트를 개발하기 수월하다. responsive(반응성): 화면의 크기에 맞춰서 웹페이지의 요소들이 자동으로 조절된다 홈페이지 Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr bootstrap, navbar, toggler를 이용해서 링크 목록을 제공해주는 버튼을 만들어보자. navbar? 네비게이션바의 준말로 웹사이트 맨위에서 사이트..