자바스크립트
ㅡ 이벤트 : 사용자가 하는 모든 행동
ㅡ 태초부터 웹 UI 를 제어하기 위한 언어였다.
작성법에는 기초적으로는 3가지 순서가 잇다.
1) js로 제어하고 싶은 html태그를 선택
2) 어떤 이벤트가 발생했을 때 제어할 것인지 선택
3) css를 변경
ㅡ . 은 ~ 의 로 해석 가능함
ㅡ 변수의 종류는 var, let, const 가 있음.
ㅡ <script> 로 자바스크립트 사용
console.log(""); 로 콘솔 화면에서 실행 가능하다.
<script>
console.log("안녕하세요");
</script>
아래에서 사용방법에 대해 상세히 알아보자 !
1) 자바스크립트로 선택하는 HTML 태그
<script>
var 박스 = document.getElementById("box");
console.log(박스);
</script>
ㅡ선택자 예제 ( querySelector 아이디 또는 클래스 선택가능 )
document.querySelector(".modalDiv");
2) 어떤 이벤트가 밸생했을 때 제어할 것인지 선택하는 방법
박스.addEventListener("",function(){
});
<script>
var 박스 = document.getElementById("box");
박스.addEventListener("click", function () {
console.log(박스);
});
</script>
3) CSS로 변경하기
박스.addEventListener("mouseover", function () {
박스.style.width = "200px";
});
<script>
var 박스 = document.getElementById("box");
var 박스투 = document.getElementById("box2");
박스.addEventListener("mouseover", function () {
박스.style.width = "200px";
});
박스.addEventListener("mouseout", function () {
박스.style.width = "100px";
});
박스투.addEventListener("click", function () {
박스투.style.border = "3px solid red";
박스투.style.width = "200px";
});
</script>
4) 함수 만들기
function 함수이름() {
자바스크림트 코드
}
ㅡ예제 ( 삭제 버튼 누르면 제목 글씨가 빨간색으로 변경됨 )
<h1 id="heading">제목</h1>
<p>내용</p>
<button>수정</button>
<button onclick="함수이름()">삭제</button>
<script>
function 함수이름() {
var heading = document.getElementById("heading");
heading.style.color = "red";
}
</script>
<예제> Modal - UI 만들고 css로 숨기기
1. html/css ui 를 만든다
2. css로 숨긴다
3. js로 다시 나타게 한다 .
1. 예제
<h1>내용</h1>
<button>취소</button>
<button onclick="모달창열기()">삭제</button>
</div>
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까 ?</p>
<button onclick="모달창닫기()">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기() {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "block";
console.log(모달);
}
function 모달창닫기() {
var 취소 = document.querySelector(".modalDiv");
취소.style.display = "none";
}
</script>
</body>
2. 예제 dry : don't repeat your code
function 모달창열고닫기(인자) {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = 인자;
}
<h1>내용</h1>
<button>취소</button>
<button onclick="모달창열고닫기('block')">삭제</button>
</div>
<div class="modalDiv">
<div class="bg"></div>
<div class="modal">
<p>정말 삭제하시겠습니까 ?</p>
<button onclick="모달창열고닫기('none')">취소</button>
<button>삭제</button>
</div>
</div>
<script>
function 모달창열기() {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = "block";
console.log(모달);
}
function 모달창닫기() {
var 취소 = document.querySelector(".modalDiv");
취소.style.display = "none";
}
// 두개 합치기
function 모달창열고닫기(인자) {
var 모달 = document.querySelector(".modalDiv");
모달.style.display = 인자;
}
</script>
ㅇ Tip!
overflow:hidden; 넘쳐흐르는 것은 숨겨주세요 !
.box {
width: 100px;
height: 100px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box-overloay {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 100px;
left: 0;
transition: all 1s;
}
ㅡ예제2
body {
margin: 20px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
background-image: url(../instagram/img/moana.jpeg);
background-size: cover;
background-position: center;
position: relative;
border-radius: 14px;
overflow: hidden;
}
.box-overloay {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
display: flex;
flex-direction: column;
border-radius: 14px;
top: 100px;
left: 0;
transition: all 0.5s ease-in-out;
}
.box-overloay p {
/* margin: 0px; */
text-align: center;
color: blue;
font-weight: bold;
font-size: 10px;
}
.box:hover .box-overloay {
top: 0px;
}
'언어 > HTML & CSS' 카테고리의 다른 글
| [IT] HTML - noopener, noreferrer 사용법 정리 (0) | 2024.02.06 |
|---|---|
| [IT] HTML - hidden 속성이란 ? (css 글자수 넘어가면 말줄임표 ) (0) | 2024.01.31 |
| [IT] SASS - SASS의 모든 것 ! (1) | 2024.01.29 |
| [IT] SASS - VScode에서 사용하기 ( VS코드) (1) | 2024.01.29 |
| [IT] HTML - position 속성이란 ? (1) | 2024.01.27 |
