input 이벤트 태그에서만 일어나는 input이벤트와 change 이벤트가 있는데 안에 뭔가 입력할 때 발생한다. ``에 입력된 값이 변경될 때 input 이벤트가 발생한다. input에 아무거나 입력해보면 그 때마다 콘솔창에 안녕이 출력된다. > chang

Navbar 만들기 Bootstrap을 설치해놨으면 그 사이트에서 원하는 웹 UI 검색해서 복붙하면 웹페이지 개발 하기 쉽다. 예제) 상단바 제작 버튼 누르면 등장하는 서브메뉴 > **1. 미리 html css로 디자인 해놓고 숨겨놓기 버튼누르면 보여줌**

자바스크립트 function 문법함수는 길고 복잡한 코드 한 단어로 축약하고 싶을 때 쓰는 문법이다.특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법인데그냥 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 외우자function 키워드 쓰고 소괄호, 중괄호 붙인다

기본적인 UI 만드는 법칙웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있다.1\. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김2\. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짜기\*1\. Ale

JavaScript 자바스크립트자바스크립트는 HTML 조작을 위해 사용한다.자바스크립트는 html 파일 안에 몰래 집어넣는 하위 언어이고,html 파일 안에 몰래 숨어서 "html 조작과 변경" 을 담당하는 언어다.그래서 자바스크립트 코드를 잘 짜시면 html을 원하는

position : sticky 참고 사이트 : apple.com/apple-tv-4k (잘 되어있다고 함)(Edge 이상에서 사용가능)스크롤이 되었을 때 화면에 고정되는 요소를 만들고 싶을 때 사용할 수 있는 CSS 속성이다.position : fixed 는 항상 화

간단한 Grid 레이아웃 만들기 Grid 레이아웃은 말그대로 격자를 만드는 레이아웃이다. 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열된다. grid-template-columns는 격자의 열 너비와 갯수 grid-template-row

transform 관련 CSS 속성들 transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다. 본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다. rotate는 회전, translate는 좌표이동, scale은 확대축소, s

비디오 태그 및 속성기본태그controls는 재생버튼type은 써주는게 좋음<source>를 통해서 작성하면 호환성을 챙길 수 있는 장점이 있다.속성muted는 음소거상태autoplay는 자동재생 (muted와 함께 넣어야 동작함)poster는 썸네일이미지prel

CSS라는 언어는 그냥 h4태그의 색깔이 어쩌고하는 스타일만 넣는 언어여서 매우 원시적인 언어이다. 그런데 CSS가 몇천줄이 넘어가기 시작한다면 CSS 관리 자체로도 큰 부담이 된다. 그래서 이런 상황에서 여러가지 문제들을 해결할 수 있는 Preprocessor (전

Shadow DOM HTML 개발시 코드가 너무 복잡해지지 않기 위해 숨겨놓은 HTML 요소들이 있는데 이것을 Shadow DOM이라고 부른다. 하지만 아무나 볼 수는 없어서 '어둠을 보는 눈'이 필요한데 이걸 얻는 법이 있다. 일단 크롬 개발자도구 셋팅 변경이

CSS 덮어쓰기 3가지 방법내가 직접 원본 CSS파일을 건드리지 못하는 경우 새로운 CSS로 덮어써야 한다.(매우 중요)1\. 같은 클래스명이나 스타일을 하단에 작성하나의 CSS 파일일 경우, 같은 class 명이라도 하단에 정의한 클래스 명과 스타일을 우선적으로 적용

Bootstrap 사용한 복붙식 개발getbootstrap.com 에 방문하여 마음에 드는 UI 요소를 골라서 HTML 파일에 복붙하면 웹개발이 끝!하지만 제공되는 UI 들의 디자인까지 그대로 쓰라는 건 아니고 거의 뼈대디자인 밖에 없기 때문에 CSS 파일과 class

(예제) 상품 진열 레이아웃 > 애니메이션 만들기 one-way 애니메이션 혼자 알아서 만드는 법 / 그냥 외우기!!! one-way 애니메이션은 A에서 B로 정지없이 쭉 이동하는 애니메이션을 뜻한다. 시작스타일 정하기 최종스타일 정하기 언제 최종스타일로 변할지

내가 짠 스타일이 버그가 생긴다면 CSS파일부터 뒤져보기 but 시간이 오래걸림. 크롬 개발자 도구를 열면 버그 수정이 편하다. 이렇게 봤을 때, 우선 적용중인 스타일을 맨 위에서 보여준다. 그래서 수정할거면 맨 위를 변경.

반응형 웹을 만들 때 head 태그에 들어가야할 내용이것이 들어가있어야 모바일에서도 예쁜 레이아웃을 만들 수 있다.모던 웹에서 사용하는 단위정리typography 디자인할 때 글자사이즈를 px 단위로 기억하기 귀찮고 힘들 때 폰트사이즈로 rem을 가끔 사용할 수 있음1

Flexbox 레이아웃 사용법 html css 박스들을 감싸는 부모 요소에게 display : flex를 사용 그러면은 쉽게 박스들이 가로정렬로 배치 > flex 세부속성 많기 때문에 필요할때마다 찾아서 쓰기 박스 좌측 & 우측정렬 동시에 하기 첫 div

폰트 패밀리 설정법 이건 폰트가 컴퓨터에 설치되어 있어야 작성 가능버그없이 사용하려면 폰트의 영문명을 사용폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는게 좋음폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용한다.실패하면 뒤에 있는 폰트들을 차례로 적용

pseudo-class상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터<button> <input> <a> 등 클릭할 때 스타일을 다르게 줄 수 있는 셀렉터hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야

tabletable태그 내에 tr(table row)은 row, td(table data)는 column을 의미함.내가 원하는 만큼 row, column을 넣어주면 표를 완성시킬 수 있음. tbody, thead는 단지 헤드부분 영역구분을 위해 사용하며 td 대신 th