본문 바로가기

부트스트랩

[JQuery] 제이쿼리와 부트스트랩(Bootstrap) ch.1
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL🚴‍♀️] CodingON 2022. 11. 10. [JQuery] 제이쿼리와 부트스트랩(Bootstrap) ch.1 개인공부 - 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 customi..
[Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (2) & 스터디
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 9. 4. [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 추가 실습 (2) & 스터디 01. 이미지 원본보기 기능 개발하기 ​ 이미지를 클릭할 때, 팝업으로 원본을 띄워주기(= 모달 활용) ​ ​ 1. 부트스트랩 홈페이지에서 모달 가져오기 (Live demo 코드) https://getbootstrap.com/docs/4.6/components/modal/ Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 이때 버튼을 제외하고 모달 부분만 카피 스크립트 바로 위에 추가 2. html, 모달 수정하기 (불필요한 부분 제거 및 변경) ​ 1) save changes..
[Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : pagination
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 9. 2. [Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : pagination 스스로에게 재미있다고 생각하는, 모바일 청첩장 코드를 마저 해보기 ​ 01. 코드 스니펫 살펴보기 ​ 1) 색상 정의해서 사용하기 (.root) ​ 1-1) 이렇게 css에서도 color를 마치 변수처럼 설정할 수 있음 이는 필요한 색상이 많아지고 웹사이트가 성장할수록, 각 코드를 #ffffff 이렇게 입력하는 것보다 변수명으로 쓰는 것이 좋기 때문이다. ​ 1-2) 이를 쓰려면 var함수를 이용해서 사용한다. TIP🤖 Var 함수 var 함수를 이용하여 CSS 앞부분에 선언한 값을 변수로 사용할 수 있다. ​ 2) 글꼴 사용 (font-face) ​ 글꼴을 사용하고 싶을 때 쓰는 css 문법이다. - font-family : 이 폰트를 적용할 때 사용할 이름 - src : 그 폰트의 경로 (주소에 파일..
[Let's TIL✍️] 코딩 18 : 2 Week _ AJAX와 API
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 8. 22. [Let's TIL✍️] 코딩 18 : 2 Week _ AJAX와 API 이번 내용은 정신을 부여잡고 공부하는데도 1분 들었다가 30초 돌아오고의 반복이다... 그만큼 jquery와 ajax를 사용하고, api를 쓴다고 하는걸 이해하는 게 어려운 것 같다. 안되면 또 들어야지.. ​ ​07. AJAX와 API를 이용한 코드 작성 ​ 1) Ajax 요청 하기 ajax를 요청해서 우리가 하고 싶은 것 = data를 가지고 오는 것이다. 그래서 get 요청을 만들었고, 이 뒤에 url 즉 주소를 쓰면, 그 주소의 결과를 가지고 온다. 이러한 결과를 사용할 때에는 .then 이라는 함수를 연결해서 사용한다. then = 다 가져왔으면 여기로 오라는 의미이다. ​ let url ="https://jsonplaceholder.typicode.com/posts"; $.get(url).th..
[Let's TIL✍️] 코딩 18 : 1 Week _ 스터디 & 자율학습
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 8. 19. [Let's TIL✍️] 코딩 18 : 1 Week _ 스터디 & 자율학습 01. 1주차 목요일 스터디 1) 숙련된 조교님의 시범 : JS로 이번에 만든 리스트를 자동화할 수 있다는 예시 반쯤 넋을 놓고 봤다. 아니 로봇이 치는 줄... 엄청 빠르게 타이핑 하시면서 설명하시는데 아직 나는 멀었구나를 깊이 깨달았다. ​ 2) async / defer 차이 1) async : async 옵션으로 다수의 script 파일들을 다운로드 받게 되면 정의된 script 순서에 상관없이 다운로드 된 파일을 우선적으로 실행하기 때문에 JS파일이 순서에 의존적이라면 문제가 생길 수 있다. 2) defer 반면, defer 같은경우는 모든 script 파일들이 다운로드 된 이후에 실행 되기 때문에 훨씬 안전하다. 참조 : https://velog.io/@cherrycock/script-async..
[Let's TIL✍️] 코딩 18 : 1 Week _ 게시판 만들기(2)
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 8. 19. [Let's TIL✍️] 코딩 18 : 1 Week _ 게시판 만들기(2) 게시판 만들기 2 - 몸살 & 목감기와 함께하는 1주차 2번째 시간! 열심히 달려보자 - 1주차 _ 게시판 만들어 보기 (2) HTML = 페이지를 구성하는 언어 ​ CSS = 페이지를 꾸미는 것 (배경색 등) ​ Java Script = 사용자의 클릭 등으로, 화면이 바뀌는 동작 언어 (사용자와 상호작용을 위해 필요) ​ ​ 01. JAVA SCRIPT + 문법 이번 시간에는 자바 스크립트 문법을 배운다. JAVA SCRIPT란? 브라우저에서 동작하는 코드이다. 동일하게 비주얼 스튜디오 코드에서 해도 되지만, 더 편한 방법으로 볼 수 있는 방법이 있다. ​ 1) 아무 페이지를 열어 (네이버, 구글 등) 개발자 도구에 들어가서, console 을 눌러본다 콘솔에서는 자바스크립트를 바로 실행할 수 있다. ..
[Let's TIL✍️] 코딩 18 : 1 Week _ 게시판 만들기
[부트캠프] IT 코딩 부트캠프 후기/[Let's TIL😶‍🌫️] FastCampus 2022. 8. 5. [Let's TIL✍️] 코딩 18 : 1 Week _ 게시판 만들기 드디어 기다리던 패스트 캠퍼스 개강 👀 ​ 1주차 _ 게시판 만들어 보기 비주얼 스튜디오 코드 APP 활용 배울 언어 : HTML, CSS, Java Script : 이들은 각각 웹페이지를 구성하는 뼈대, 꾸미기, 움직임(동적) 이라 할 수 있다. 01. 개발환경 구성 1) 먼저 비주얼 스튜디오 코드를 설치한다. - 이때 '한국어 팩'을 깔고 재시작을 하면 한국어로 구동된다. - 새 파일을 만들때는 왼쪽 를 사용한다. - 이후에 html, head, body 기본 태그를 작성하는 실습으로 이어진다. 2) table 태그와 tr, td를 이용해 행과 셀을 만들어 보기. - CSS 없이 html 만으로 나름 '표처럼 나오게' 만들 수 있다. 3) CSS 테이블에 스타일 적용 후, width 하고 500px ..

티스토리툴바