개인공부
- vscode 단축키
VS Code 비주얼스튜디오코드 유용한 단축키 사용법 모음 (VSC Shortcuts)
안녕하세요 양햄찌블로그 주인장입니다. 오늘은 비주얼스튜디오코드 일명 VS Code의 단축키를 알아보려고 해요 ㅎㅎ 특히 중요한건 별표(★)쳤음! Visual Studio Code 단축키 알아보기 (VS Code Shortcuts) [
jhnyang.tistory.com
BootStrap : 프레임워크
프레임워크는 틀이 잡혀 있어 초보자가 사용하기 좋음,
단 커스터마이징하기는 쉽지 않음.
(커스텀하고 싶으면 라이브러리 자체를 사용하기)
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
CDN 방식== 웹 상에 올라온 것을, 불러와서 사용하는 방식
<! doctype html
나와있는대로 쓸 수 있음
id가 연결되어 있으므로 버튼이 동작함
display class에 대한 설명
breakpoint
부트스트랩에서 flex 를 사용할 수 있음
반응형웹에 필요한 그리드
< body < h1 >Hello, world!</ h1 >
<!-- grid 사용하기. row 클래스와 col클래스를 기본형태로 사용한다 like tr td -->
<!-- 가로는 최대한 총 12개의 격자를 가진다. 즉 col을 세개로 나누면 4개만큼의 크기를 나눠갖는다.
12개를 넘치게 되면 내려와버린다.-->
< div class = "row" >
< div class = "col bg-primary" >1</ div >
< div class = "col bg-success" >2</ div >
< div class = "col bg-info" >3</ div >
</ div >
<!-- 만약 일정한 크기를 원하지 않으면, col에 숫자를 지정한다. -->
< div class = "row" >
< div class = "col-2 bg-danger" >1</ div >
< div class = "col-6 bg-dark" >2</ div >
< div class = "col-4 bg-primary" >3</ div >
</ div >
< hr >
<!-- 이때 그리드에 breakpoint를 줄 수 있다. 이때 총 12의 숫자가 되도록 맞춘다.
즉 반응형이 되었을때 크기가 달라진다. 특히 breakpoint md, lg에 따라 각각 1:2 비율 5:1 비율로 변경-->
< div class = "row" >
< div class = "col-8 col-md-4 col-lg-10 bg-primary" >1</ div >
< div class = "col-4 col-md-8 col-lg-2 bg-dark" >2</ div >
</ div >
<!-- 포른트엔드가 되고싶다면 반응형을 잘 이해해야 한다. -->
< div class = "row" >
< div class = "col-12 col-sm-6 col-lg-4" >
< img src = "./01.jpg" class = "w-10" style = " height: 100; " >
</ div >
< div class = "col-12 co-sm-6 col-lg-8" >
< p class = "bg-secondary" >이 이미지는 바다입니다.</ p >
</ div >
</ div >
< div class = "d-block d-md-block d-lg-none bg-warning" style = " height:300px; " >
<!-- d-block은 어떤 크기에서든 보이게 하는 class, bg-warning 배경이 경고창 색상
d-sm-none sm이라는 breakpoint가 되었을 때 사라진다-->
div
</ div >
< div class = "d-flex justify-content-center" >
<!-- bootstrap에 있는 flex속성을 사용해서 버튼정렬 가운데로 만들기 위해 div를 만들어서 감쌌다. -->
< button type = "button" class = "btn btn-primary" style = " margin-top:100px; " >Primary</ button >
<!-- //여기서 primary는 파란색 의미. -->
<!-- // style="margin-top:100px; 이런식으로 스타일을 줄 수도 있음. 즉 bootstrap 자체 클래스 아닌 다른것도 사용가능
즉 반응형 설정을 하는 것을 의미하며, 이러한 breakpoint는 부트스트랩의 레이아웃 목차에 breakpoint가 있다.-->
<!-- 여기는 아코디언 부분 -->
< div class = "accordion" id = "accordionExample" >
< div class = "accordion-item" >
< h2 class = "accordion-header" id = "headingOne" >
< button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne" >
제목 부분 #1
</ button >
</ h2 >
<!-- // class="accordion-collapse collapse show" 여기서 show가 있으면, 처음에 열린 상태로 보여준다 -->
< div id = "collapseOne" class = "accordion-collapse collapse show" aria-labelledby = "headingOne" data-bs-parent = "#accordionExample" >
< div class = "accordion-body" >
< strong >머리글</ strong > It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the < code >.accordion-body</ code >, though the transition does limit overflow.
</ div >
</ div >
</ div >
<!-- 여기는 캐러솔 -->
< div id = "carouselExampleIndicators" class = "carousel slide" data-bs-ride = "true" >
< div class = "carousel-indicators" >
< button type = "button" data-bs-target = "#carouselExampleIndicators" data-bs-slide-to = "0" class = "active" aria-current = "true" aria-label = "Slide 1" ></ button >
< button type = "button" data-bs-target = "#carouselExampleIndicators" data-bs-slide-to = "1" aria-label = "Slide 2" ></ button >
< button type = "button" data-bs-target = "#carouselExampleIndicators" data-bs-slide-to = "2" aria-label = "Slide 3" ></ button >
</ div >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
< img src = "./02.jpg" class = "d-block w-50" alt = "..." >
<!-- d-block은 display block으로, 부트스트랩 유틸리티의 display 부분에 설명이 있다. w-100 은 크기 -->
</ div >
참고할 (예정) 사이트
부트스트랩으로 전체 웹 사이트 틀 잡기
백엔드를 공부하면서 프론트까지 하기엔 시간이 없는 관계로.. 일단 부트스트랩 템플릿 중 마음에 드는 틀을 가져와서 조금씩 바꿔보는 것으로 진행하고 있습니다. 구글에서 '무료 부트스트랩
codevang.tistory.com
메뉴바 만들기
Admin Dashboard 만들기 part 2. Navbar(side menu) 추가하기
Admin Dashboard 만들기 part 2. Navbar(side menu) 추가하기 전체적인 navbar 위치에 대한 설정을 해준다. 일반적인 웹사이트는 responsive view 를 제공하고 있다. 이경우 화면이 작아지면 메뉴가 버튼하나로 coll
citylock77.tistory.com
[Bootstrap] navbar(내비게이션바) 오른쪽 정렬, 양쪽 정렬
부트스트랩은 사용법이 간단해서 참 좋은데 가끔 의도한 대로 움직이지 않는 경우가 있다. navbar(내비게이션바) 작업을 하면서 이런저런 시도 끝에 알게 된 다양한 정렬에 대해 공유해본다. 1. nav
oneul-losnue.tistory.com
한국어로 부트스트랩 설명보기
모달
Bootstrap JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 사용자 정의 콘텐츠를 만들 수 있습니다.
getbootstrap.kr
부트스트랩 주소 넣기
bootstrap4 modal에 daum 주소 찾기 삽입
부트스트랩4를 사용하는 프로젝트에서 daum 주소 찾기를 넣을 일이 있어서 찾아보다가, 없어서 다음 주소 a...
blog.naver.com
jQuery 자바스크립트 언어 기준, 간편 사용하기 좋은 오픈 소스 기반의 자바스크립트 라이브러리
장점 : 어느 웹 브라우저든 사용 가능, html css 등을 손쉽게 조작가능 , js 코드를 좀 더 단순하게 사용가능
사용법
1. 다운로드
2. CDN
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
jQuery 기초
$(선택자).동작함수();
$는 jquery()함수의 축약 형태로, 식별자 역할
jQuery를 불러오지 않으면 사용할 수 없으니 주의
기존에 썼던 js와의 비교
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >jQuery</ title >
< script >
function getData () {
var val1 = document . getElementById ( "input1" ). value ;
console . log ( val1 );
}
</ script >
</ head >
< body >
< input type = "text" id = "input1" >
< button type = "button" onclick = " getData () " >값 가져오기</ button >
</ body >
</ html >
요소 탐색 $(선택자).parent().함수()
바로 위에 존재하는 하나의 부모 요소 선택
$(선택자).parents().함수()
바로 위에 존재하는 부모 & 부모의 부모 & 모든 조상 선택
$(선택자).next().함수()
선택된 요소 바로 다음에 위치한 형제 요소 선택
$(선택자).prev().함수()
선택된 요소 바로 이전에 위치한 형제 요소 선택
$(선택자).children().함수()
선택된 요소의 자식 요소 모두 선택
전체 복습
<! DOCTYPE html < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >jQuery</ title >
< script >
// 값 가져오기, js와 jQuery
function getData () {
var val1 = document . getElementById ( "input1" ). value ;
console . log ( val1 );
var val2 = $ ( "#input1" ). val ();
console . log ( val2 );
}
//값 설정하기
function SetData () {
document . getElementById ( "input1" ). value = hi ;
$ ( "#input1" ). val ( "hello" );
}
//스타일 변경하기
function setstyle1 () {
var p = document . querySelector ( "#p1" );
p . style = "background-color: yellow; color:blue;" ;
}
//jQuery에서 스타일 변경 속성은 .css 를 이용한다.
function setstyle2 () {
$ ( "#p1" ). css ( "background-color" , "green" ); //인자를 적고, 속성(속성이름, 바꿀 것)
}
function setstyle3 () {
$ ( "#p1" ). attr ( "style" , "background-color: blue; color:white;" );
//attr은 style뿐 아니라 이미지 태그 등 여러 개의 속성 동시 변경에 사용한다.
}
//요소 변경 - text 와 html
function changeText () {
console .log();
