발전하는 개발자

[Bootstrap 설치] Bootstrap이란? 웹사이트 개발시 필요한 UI요소(버튼, 네브바 등)의 코드를 갖다 쓸 수 있게 만든 사이트 1. 사이트 접속 https://getbootstrap.kr/ Bootstrap 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리. getbootstrap.kr 2. 시작하기(get started) 버튼 누르기 3. 버전 확인 4. CSS/JavaScript 코드 붙이기 또는 Starter template을 html 파일에 덮어 씌우기 css는 html 파일의 header부분에 붙여넣기 JavaScript는 바로 위에 붙여 넣기 귀찮으면 스타터 템플릿 복사해서 html 파일에 전부 덮어씌우기 4. 스타터 템플릿으로 덮어씌웠다면 내 css파일을 다시 첨부하기..

1. 이벤트 리스너란? 마우스나 키보드 등의 움직임(이벤트)을 포착하면 어떤 동작을 실행해줌 이벤트의 종류는 다양함(scroll, mouseover(마우스를 갖다 댔을 때), click, keydown(키보드 입력 시) 등등) 2. 사용법 사건이 발생할 요소.addEventListener('사건', function(){사건이 일어나면 실행될 코드}); 여기서 function(){}을 콜백 함수라고 부름. 파라미터 자리에 들어가는 함수, 코드를 순차적으로 실행할 때 가끔 보임 3. 예시 1) 'alert'라는 id를 가진 div박스 안에 'close'라는 id를 가진 버튼 생성 닫기 2) 'close'라는 id를 가진 요소를 click하면 'alert'라는 id를 가진 요소가 사라짐. 4. 이벤트리스너 대..

[function] 1. function(함수) : 코드 축약, 재사용 편리 2. 함수명 작명법 : 1) 소문자로 시작, 2) camelCase(첫 단어는 소문자, 그다음 단어는 대문자로 시작), 3) 구체적인 의미 담기 3. 예 document.getElementById('alert'). style.display='block';라는 긴 코드를 '함수 이름()'만 적으면 쓸 수 있게 만들 수 있다. 버튼 4, 파라미터 1) 파라미터란? function()의 괄호 사이에 어떠한 값(파라미터)을 넣으면 코드를 전부 조작하지 않고도 다양한 활용 가능 예를 들어, 알림 창(열기), 알림 창(닫기) 등등 비슷한 기능을 하는 함수의 괄호에 넣는 값(파라미터)에 따라 간단하게 원하는 기능을 바꿀 수 있음. funct..

[alert 박스 만들기] 1. 알림 창 만들기 알림창임 2. css파일 생성 : main.css 파일을 하나 만듦 3. html파일에 css파일을 링크로 연결, html 파일의 부분에 작성 4. css로 알림창 꾸미기 .alert-box { background-color: skyblue; /*배경색*/ padding: 20px; /*여백*/ color: white; /*글자색*/ border-radius: 5px; /*테두리 둥글게*/ display: none; /*숨기기*/ } 5. 버튼을 누르면 알림 창이 나타나게 하기 버튼

JavaScript 사용 이유 : HTML 조작 [개발 환경] 1. 코드에디터(Brackets 또는 VS Code) 설치 2. 작업 폴더 만들고 열기 3. index.html 파일 만들기 4. html 양식 만들기 index.html 파일을 열고!+enter(또는 tab)을 누르면 html양식이 자동 완성됨(vs code에서) 5. 미리 보기 창 Brackets은 오른쪽의 번개 그림 누르기 VS Code는 왼쪽 블록 쌓기 그림(Extension)-live server 검색, 설치-html 파일에서 오른쪽 클릭-Open with Live Server클릭 [html 요소 변경하기] 1. 셀렉터(Selector)란? 1) 목적 : HTML의 요소를 변경할 때 변경할 요소를 찾기 위함 2) 종류 : 많지만 대표..