IT 공부를 위한 블로그

1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 툴이다. - 브라우저의 성능이 높아지고 자바스크립트 애플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌다. - 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 모듈화가 필요해졌다. - 자바스크립트 모듈시스템이 등장하기 전에 모듈 패턴으로 사용했고, 정식 지원하는 모듈 시스템이 생겨났지만, IE 브라우저에서는 지원하지 않았기 때문에 모든 브라우저 환경에서 모듈 시스템을 사용할 수 있도록 만들어진 게 webpack이다. Webpack 공식홈페이지: https://webp..

1. jQuery cdn을 입력하여 jQuery 라이브러리 가져오기 head 사이에 cdn을 입력하여 라이브러리를 가져온다. 2. 섹션 이동 함수 코드 작성 body 태그 사이에 위의 script 코드를 작성해준다. 3. 예제 html 섹션1 섹션2 섹션3 섹션4 section1 section2 section3 section4 css #section1 { background-color: skyblue; height:500px; margin:20px; } #section2 { background-color: yellow; width: 100%; height:500px; margin:20px; } #section3 { background-color: pink; width: 100%; height:500px;..

1. 수직적인 기본구조 html, css의 기본적인 레이아웃 구조는 수직으로 쌓인다.(위에서 아래로) 하지만 flex를 쓰면 레이아웃이 쌓이는 것을 수평으로 쌓을 수 있다. 2. flex 예제 1) 기본적인 구조 (수직) 위 그림과 같이 기본적으로 박스들이 수직으로 쌓인다. - HTML 코드 BOX1 BOX2 BOX1 BOX2 container라는 속성 값을 가진 div 안에 firstbox와 secondbox라는 속성 값을 가진 div들을 입력 div는 기본적으로 block 요소이기 떄문에 수직으로 쌓인다. - CSS 코드 .container { background-color: darkgray; } .container .firstbox { width: 100px; height: 100px; backgr..

부트스트랩이란? 부트스트랩은 트위터에서 만들었으며, 웹개발을 좀더 편하고 빠르게 하기위하여 웹프로그래밍에 필요한 다양한 레이아웃,버튼 등의 디자인을 CSS와 Javascript로 만들어 놓고 모아놓은 프레임워크이다. 반응형 웹을 지원하고 확장이 가능한 기반코드로 이루어진다. jquery라이브러리를 사용할 수 있다는 특징이 있다. 부트스트랩의 사용법은 1. 부트스트랩 다운로드 2. CDN을 통해 불러오기 *CDN이란 웹사이트 서버가아닌 다른 공유공간에서 여러 웹사이트가 참조할 수 있게 하는 서비스를 의미한다. 따라서 별도의 다운로드가 필요 없다. 나는 보다 간단한 방법인 CDN방식을 통해 부트스트랩에 있는 CSS디자인 하나를 가져와 보겠다.(부트스트랩 4.3사용) 1. 부트스트랩을 프로젝트와 연결시키기 위..

border는 CSS에서 테두리를 만들어줍니다! 1. HTML 코딩 for it study! border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ border로 테두리 만들기~ 2. CSS 코딩 div { margin: 10px; text-align: center; } .title { font-weight: bold; font-size: 30px; } .border1{ border: 4px solid #f44336; } .border2{ border: 4px dotted #009688; } .border3{ border: 4px dashed #0000FF; } .border4{ border: 4px double #006400; } .bo..