IT 개발 지식

Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩이란? 각종 사용하는 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Java Script로 만들어 놓은것이며 부트스트랩의 장점 1. 쉽게 반응형 웹사이트 개발 2. 이미 스타일된(CSS) 요소를 사용하여 개발 시간이 절약 된다. 3. 버그 발생 가능성을 처리해줌으로써 개발자가 반복 작업에서 실수하기 쉬운 부분을 커버해줍니다. 4. 유지보수가 효율적이다. 부트 스트랩의 단점 1. 초기 학습시간이 필요하다. 2. 제작자의 의도된 제약 사항에 걸려 유연하게 개발하는데 한계가 있다. 부트스트랩 사용방법 1. CDN 방법 Bootstrap The most..

⭐ 화면에 보이는 w, a, s, d, j, k, l을 클릭하거나 키보드로 입력을 하게된다면 소리를 출력한다. index.html Drum 🥁 Kit w a s d j k l Made with ❤️ in London. var btns = document.querySelectorAll("button"); //모든 버튼에 이벤트 달기 for(var i = 0; i < btns.length; i++){ btns[i].addEventListener('click', handleClick); } // btns[0].addEventListener('click', handleClick); // btns[1].addEventListener('click', handleClick); // btns[2].addEventLis..

https://desktop.github.com/ GitHub Desktop Simple collaboration from your desktop desktop.github.com 우선 위에 있는 GitHub Desktop 다운로드를 해주세요. 다운로드가 끝나셨다면 GitGub에 로그인을 하시면 되는데 아이디가 없다면 새로 회원가입을 하고 File => Options 클릭 후 로그인을 해주면 되겠습니다. File => New repository 클릭 후 어떤 파일을 git과 gitgub에 저장해서 올릴건지 경로와 폴더명을 입력 하시면 되겠습니다. 이렇게 까지 완료하셨다면 거의 다오셨습니다. 해당 폴더에 있는 소스를 수정하거나 추가하게 된다면 git에 저장하게 된다면 어떤것이 수정되었는지 내용과 소스코드를..

⭐DOM(문서 객체 모델) => Document(문서) Object(객체) Model(모델) 문서에 접근하기 위한 표준이다. 그렇다면 문서 객체란 무엇일까? 문서 객체란 ,와 같은 html문서의 태그들을 자바스크립트가 이용할 수 있도록 객체로 만드는 것을 문서 객체라고 한다. DOM 트리(Tree) DOM의 Model은 tree 형식의 자료구조를 가지고 있기 때문에 tree 자료구조를 알고있다면 이해하기가 더욱 수월하다. JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있다. JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있다. JavaScript는 페이지의 모든 CSS스타일을 변경할 수 있다. JavaScript는 기존 HTML 요소 및 속성을 제거할 수 있다. JavaS..

자바스크립트 기본문법설명에 앞서서 ⭐HTML ⭐CSS ⭐JavaScript 3가지의 차이는 무엇일까? 쉽게 건축물로 정리를 하자면 ⭐HTML은 아파트를 만드는 뼈대이며 ⭐CSS는 만든 아파트를 색칠 및 디자인을 하고 마지막으로 ⭐JavaScript는 아파트의 기능들을 추가하는 것이다. 그럼 HTML에서 JavaScript 사용방법으로는? 1. 내부 스크립트 2. 외부 스크립트 ⭐alert() 함수 실행시 결과 ⭐비교 연산자 두 값을 비교하여 true 또는 false로 표시한다. alert(2==3) alert(10==10) alert("one"=="two") alert("three"=="three") ⭐동등 연산자 ⭐일치 연산자 alert(10 =='10'); true alert(10 ==='10'); ..

Grid란? CSS의 레이아웃 시스템이며 2차원 레이아웃으로 아이템들을 배치한다. 사용방법으로는 Flex박스와 비슷하게 사용된다. Item 1 Item 2 Item 3 /* Grid 열 만들기 */ grid-template-columns: 300px 300px 300px; .grid { /* Grid rows */ display: grid; grid-template-rows: 1fr 2fr 3fr; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .item:first-child { grid-column: 1/4; grid-row: 1/3; }

Flexbox : 레이아웃 Display 속성을 사용함 Float보다 호율적으로 사용이 가능함 가로 세로로 아이템들을 정렬함 아이템들의 순서나 비율등을 쉽게 적용함 ⭐️Flex는 main-axis(주축)과 cross-axis(교차축)으로 구성된다 ※ flex를 적용하기 위해 부모요소의 CSS에서 시작한다. .container { display: flex; } ※ 단, 자식요소에게 전부 적용하기 싫다면 싫다면 >(꺽새)를 입력하게 된다면 container 안에 있는 div태그 하나만 선택하게 된다. 만약 >(꺽새를) 입력하지 않고 사용한다면 container안에 div태그가 몇개있던 전부 적용이 된다. .container > div { padding: 10px; text-align: center; font..

Position 속성 fixed relative absolute static 기본 ※ absolute 속성을 쓰기 위해서는 부모의 Position이 static 여서는 안된다. 화면의 정가운데 박스의 내용도 가운데에 넣기 박스의 꼭짓점 기준으로 가운데정렬이 되어 margin을 박스 절반만큼 줄여주거나 가로정렬, 세로정렬을 해준다. 정중앙으로 # Form CSS 실습 Sign Up It's free and only takes a minute First Name Last Name Email Password Confirm Password Sign Up By clicking the Sign Up button, you agree to our Terms & Conditions and Privacy Policy Al..

content : 내용물 padding : content(내용물)와 border의 간격 border : 경계선 margin : 여백 블럭 vs 인라인 차이점은? 블럭 인라인 한줄에 하나씩 쌓인다. 한줄에 여러 요소가 나온다. 가로와 세로 길이를 가진다. 가로 세로 길이 X, 내용물의 크기 만큼 차지한다. 화면 배치를 위해 주로 사용된다. 텍스트를 꾸밀 때, 주로 사용이 된다. font-family 속성 웹문서에서 사용할 글꼴을 지정 텍스트를 사용하는 요소들에 사용됨 지정한 글꼴이 없을 경우 2~3가지 글꼴을 지정할 수 있음 둘 이상의 글꼴을 지정할때에는 ,로 구분함 body { font-family:"맑은 고딕",돋움,굴림; /* 글꼴 */ } 1. Font Style, 폰트 글꼴 p.normal { f..

스타일(style) : HTML 문서에서 자주 사용하는 글꼴 및 색상, 정렬 각 요소의 배치 방법 등 문서의 겉모습을 표현 하는 내용이다. 스타일 시트(style sheet) : 스타일을 관리하기 쉽게 하나로 모은것이다. CSS를 사용하는 이유는? 많은 웹페이지를 동시에 관리가 가능하다 (많은 일을 절약 가능) 웹 사이트의 스타일을 일관성 있게 유지할 수 있다. (유지 보수가 쉽다) 다양한 기기에 맞추어 반응하는 문서를 만들수 있다. HTML에 CSS 적용방법은? 인라인 스타일 방법 (lnine Style Sheet) => 권장하지는 않는다. 내부 스타일 시트 (lnternal Style Sheet) 외부 스타일 시트 (Linking Style Sheet) 인라인 스타일 방법 h1 { font-size:..