JavaScript(78)
-
[Bootstrap] 문자열 클래스
1. 문자열 클래스 HTML에서 제공하고 있는 문자열 관련 CSS에서 더 세밀하게 꾸밀수 있도록 다양한 클래스를 제공하고 있습니다. Bootstrap 4 Bootstrap 3 글자크기 16px 14px 줄간격 1.5 1.428 폰트 Helvetica Neue, Helvetica, Arial, Sans-serif 브라우저 기본 폰트 2. H1 ~ H6 주로 제목을 표시하는 용도로 사용하는 HTML 태그로써 Bootstrap은 각각 문자열 크기와 굵기, 폰트 등을 기본적으로 설정해두었습니다. Bootstrap 4 h1 문자열(40px) h2 문자열(32px) h3 문자열(28px) h4 문자열(24px) h5 문자열(20px) h6 문자열(16px) Boostrap 3 h1 문자열(36px) h2 문자열(3..
2022.05.25 -
[Bootstrap] Grid
1. 그리드 CSS를 통해 가로 길이를 정해주면 그 가로 길이만큼 공간을 차지하게 됨 Bootstrap은 가로 한줄을 12등분하여 요소 하나의 비율을 정해 배치할 수 있도록 제공하고 있음 2. 기본 코드 3. 양식 col-scale-숫자 : 12칸 중 몇 칸을 차지할 것인지 설정 col-숫자 : 세로 방향으로 배치되지 않음 (BS3 지원 X) col-sm-숫자 : 576px 이하면 세로로 배치됨 (모바일용) col-md-숫자 : 768px 이하면 세로로 배치됨 col-lg-숫자 : 992px 이하면 세로로 배치됨 col-xl-숫자 : 1200px 이하면 세로로 배치됨 4. 예제 col-6 aaa bbb col-sm-6
2022.05.25 -
[Bootstrap] 개발환경 및 테스트 예제 구축
1. Bootstrap Framework란 무엇인가? 트위터에서 시작된 jQuery 기반의 HTML5 웹 프레임워크 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈 소스 프레임워크 2. 개발환경 JDK 15 Apache Tomcat 9.0.56 Eclipse 4.21 Bootstrap 4 3. 테스트 예제 구축 3.1 이클립스 IDE -> File -> New -> Dynamic Web Project -> Project Name : BootstrapBasic -> 프로젝트 생성 3.2 Server 생성 : Server -> New -> Server -> Apache -> Tomcat v9.0 Server 선택 -> Apache Tomcat 디..
2022.05.24 -
[자바스크립트] ES6 모듈 내보내기/가져오기(Export/Import)
학습목표 1. Named Export에 대해서 학습 2. Default Export에 대해서 학습 3. Default export-import / Named export-import 혼합 사용에 대해서 학습 4. *를 이용한 Import에 대해서 학습 5. Dynamic Import에 대해서 학습 1. Nmaed Export Named Export방식은 export하고자하는 객체들만 export 키워드를 명시적으로 붙여 내보내는 방식입니다. 내보내기(Export) math.js export const plus = (a,b)=>{return a+b}; export const minus = (a,b)=>{return a-b}; export const divide = (a,b)=>{return a/b}; 위와..
2022.02.02 -
[자바스크립트] 자바스크립트를 이용한 구구단 생성
gugudan.html gugudan.js const renderGugudan = function(){ const gugudanTable = document.querySelector("#gugudan"); const thead = document.createElement("thead"); const tbody = document.createElement("tbody"); let tr, th, td; // header tr = document.createElement("tr"); for(let i=2; i
2022.01.26 -
[자바스크립트] 비동기 처리방식을 수행하는 콜백함수, Promise, async/await
1. 동기식 처리와 비동기식 처리란 무엇인가? 1.1 동기식 처리(Synchronous) 동기식 처리란 여러개의 작업 요청이 들어올 경우 요청이 들어온 순서대로 처리하는 방식을 의미합니다. 먼저 들어온 요청 작업이 수행중인 동안 다른 작업 요청들은 대기합니다. 예를 들어 마트에서 계산대가 1대만 있다고 가정할 경우 여려명의 손님들은 순서대로 줄을 서서 계산을 기다릴 것입니다. 즉, 정리하면 동기식 처리란 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 대기하다가 작업이 완료되면 새로운 작업을 하는 방식입니다. 1.2 비동기식 처리(Asynchronous) 비동기식 처리란 여러개의 작업 요청이 들어올 경우 한 개의 요청이 수행되는 동안 다른 작업 요청들은 대기하지 않고 병렬적으로 각각의 ..
2021.11.15