Selector, UI 제작
강의 개요
1) 실무 예제 중심의 수업으로 재밌게 진행
2) 기술을 혼자서도 구현해낼 수 있는 원리 학습
Selector
*자바스크립트로 수학계산을 잘하고 싶으면 변수 자료형부터 배워야하지만
자바스크립트로 다이나믹한 웹개발을 하고 싶으시면 셀렉터부터 배우면 됩니다.
document.getElementById('hello').innerHTML = '안녕'document.getElementById 이 부분이 셀렉터.
문법의 자세한 내용은 오브젝트 학습 이후 이해될 것.
바꾸고 싶은 것은 지정하는 것이 셀렉터,
그 이후는 바꾸고 싶은 요소의 내용.
바꾸고 싶은 건 구글링을 통해서 방법을 확인하면 된다.
UI 제작
UI 만드는 법: 1) 미리 디자인해놓고 숨긴 2) 버튼 누르거나 하면 보여줌
0) 일단(?) 클래스를 선언한다.
1) CSS 파일을 폴더에 만든다.
2) html 파일에 css파일을 첨부한다.
3) css파일에서 디자인을 한다.
:display 상태를 none으로 해두면 안 보임 세팅 완료
*컬러피커 여는 방법 찾아봐야 함
4) 버튼을 만들고 onclick에 alert창을 보이게 하는 코드를 작성
:display 상태를 block으로 바꿈
마치며
자바스크립트에 대한 기초 강의를 찾고 있었는데 쉽고 간략하게 이해할 수 있는 강의가 있어서 안성맞춤이었다.
이 글은 <애플코딩> 진짜 웹개발로 배우는 실용 자바스크립트 1강 : 셀렉터 selector와 실용 자바스크립트 2강 : Alert 만들어서 유저 위협하기을 참고하여 썼습니다.
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--CSS파일 첨부-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- UI 만드는 법: 1) 미리 디자인해놓고 숨긴 2) 버튼 누르거나 하면 보여줌-->
<div class="alert-box" id="alert">
Alert 박스
<button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display = 'block';">버튼</button>
<script>
</script>
</body>
</html>
시작은 창대하나 끝은 미약하리라