본문 바로가기
728x90

전체 글86

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.
HTML / CSS 기본 태그 사용법 '기본기, 기초가 중요하다'는 말은 너무 익히 들어 누구나 아는 말 일터. 하지만, 막상 '중요한 것= 어려운 것' 이란 착각 또는 오해를 자주 하다, 최근에 먼 길을 돌아서야 기초와 기본을 다시 제대로 해야겠다는 결심과 함께 기본기부터 공부 하고 있어 정리해본다. 그런 차원에서, HTML과 CSS의 기본 태그들의 중요성은 두말하면 입 아픈 이야기들! 웹(Web)이 동작하는데 있어서 각각의 특징에 익숙해져야 한다. 그 중에서 가장 많이 만나는 3대장! HTML, CSS, JavaScript! HTML - 뼈대, CSS -꾸미기, JavaScript - 움직이는 부분 HTML / CSS 기초 태그 사용하기 HTML - div (division): 구역을 묶어주는 친구 - P (paragraph) : 문단 .. 2021. 12. 22.
728x90

티스토리툴바