본문 바로가기
반응형

전체 글99

자바스크립트 JavaScript 함수, 변수, 자료형 JavaScript 자바스크립트란? 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다. 모든 브라우저는 기본적 으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 기반으로 작동한다. JavaScript 자바스크립트 사용하기 안에 위와 같은 형태로 넣어준다. JavaScript 자바스크립트 함수 함수 : 부르면 정해진 동작을 한다. function hey(){ alert('안녕!'); } :: hey() 입력할 경우 '안녕!!' 이라는 알림이 뜬다. 자바스크립트 함수 만들기 function 함수이름(필요한 변수들) { 내릴 명령들을 순차적으로 작성 } 자바스크립트 함수 사용하기 함수이름(필요한 변수들); JavaScript 자바스크립트 변수.. 2021. 12. 31.
JQuery show() hide() - 창 보이기 숨기기 JQuery show() hide() - 창 보이기 숨기기 JQuery hide() 위의 사진에서와 같이 창(포스팅박스)이 오픈되어있을 경우, hide()를 이용해 숨김 처리할 수 있다. $('#post-box').hide(); 덧붙여 창이 열리진 상태에서는 '포스팅박스 닫기'로 바뀌고, 창이 닫힌 상태에서는 '포스팅박스 열기'로 바뀐 것을 확인할 수 있다. JQuery show() $('#post-box').show(); CSS에서 display:none;으로 해주면 맨 처음 버튼 상태이며, 해당 div는 가려진 상태 .posting-box { display: none; } JQuery show() hide() - 창 보이기 숨기기 적용한 전체코드 function openclose(){ } Hello,.. 2021. 12. 30.
제이쿼리란? JQuery 사용하는 방법 제이쿼리란? JQuery 사용하는 방법 JQuery란? : HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것이다. Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제 등도 고려해야해 JQuery라는 라이브러리가 등장하게 되었다고 한다. JQuery VS Javascript 코드 비교 Javascript로 길고 복잡하게 써야 하는 것을 JQuery로 보다 짧고 직관적으로 쓸 수 있다. -> Javascript를 사용한 경우 document.getElementById("element").style.display = "none"; -> JQuery로 사용한 경우 $('#element').hide(.. 2021. 12. 29.
간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap) 간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap활용) HTML, CSS, Bootstrap 바탕으로 간단한 쇼핑몰 페이지를 만들어 보았다. (우선은 한 페이지) 기획서를 참고하여 필요한 부트스트랩 중, div class="input-group", option(갯수) 선택할 수 있는 select 등 이미지는 css에서 background-img로 삽입해 주었다. 마지막으로 간단하게 주문하기 버튼을 눌렀을 때, JavaScript로('주문이 완료되었습니다!')기능까지 넣어주어 아주 간단한 원페이지 쇼핑몰 완성! 간단한 쇼핑몰 페이지 코드 행복을 팝니다 가격:1,000원/개 행복한 순간을 담을 수 있는 곳은 우리의 머리, 가슴 그리고 또 하나, 사진이 있죠 당신의 행복한 순간을 사진에 .. 2021. 12. 28.
부트스트랩 활용해 간단한 메모장, 게시판 만들기 나만의 메모장, 게시판 만들기 (Feat. HTML & CSS + 부트스트랩) 부트스트랩 bootstrap 활용하기 Bootstrap 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것으로 다른 사람이 완성한 부트스트랩을 가져다 내 HTML 파일에 적용한다고 할 수 있다. 부트스트랩 활용을 위한 기본 템플릿 형태 본문 내용 넣기 ! 부트스트랩 페이지에서 jumbotron, card-columns 의 형태를 가져와 메모장/ 게시판을 만들었다. https://getbootstrap.com/docs/4.0/components/alerts/ 활용하기 에 들어가는 갯수를 원하는만큼 입력하여 다양한 모양으로 나타낼 수 있다. 간단한 메모장, 간단한 게시판 만들기 코드 Hello, This is Jann's world! .. 2021. 12. 27.
HTML과 CSS를 활용해 기본 로그인페이지 만들기 HTML, CSS 로그인페이지 만들기 HTML, CSS의 기본 태그들을 활용해 로그인페이지를 간단하게 만들 수 있다. div, input, button 태그 등이 차례로 쓰였는데, div 범위 확인을 위해 backgroung-color:green; 지정한 경우다. 크기를 조정하고, div를 가운데로 위치 시켜 화면에 가운데 위치할 수 있게 해준다. 구글에서 적용 가능한 한글 폰트 적용한 기본 로그인페이지 예시 로그인페이지 아이디, 패스워드를 입력해주세요 ID : PW : 로그인하기 background-image: url ("사진 경로"); background-image:url을 지정하여 원하는 사진으로 로그인페이지를 다양하게 만들 수 있다. background-image: url("/HJ.jpg"); 2021. 12. 23.
반응형

티스토리툴바