프로그래머스 데브코스, 국비지원교육, 코딩부트캠프
🚩 프로그래머스 데브코스 웹 풀사이클 과정 2주차 DAY 3
오늘은 HTML과 CSS, 자바스크립트를 이용하여 아주 간단한 로그인 페이지를 만들었다.
❓CSS란?
CSS(Cascading Style Sheets)는 쉽게 표현하자면 우리가 만든 HTML 파일을 보기 좋게 꾸며주는 스타일시트 언어다.
HTML로 문서의 기본 뼈대를 잡고 CSS로 꾸며주는 거다. 그리고 여기서 이런저런 이벤트를 추가하고 싶으면 자바스크립트를 이용해서 웹페이지를 발전시켜나갈 수 있다.
💡HTML 파일에 CSS 입히기
HTML에 CSS를 입히는 방법은 총 세 가지가 있다.
HTML 태그 내부에 함께 작성하는 인라인 스타일 시트, HTML 문서 내 head 태그에 작성하는 내부 스타일 시트, 그리고 다른 파일로 분리하고 HTML과 연결해주는 내부 스타일 시트 방식이 있다. 나는 다른 파일로 분류해서 연결하는 걸 선호한다. 그냥 코드 길어지는 걸 별로 좋아하지 않아서 그렇다. 특히 head 코드가 길어지는 건 그다지 좋아하지 않는다.
- 인라인 스타일 시트
첨부한 예시 사진처럼 HTML 태그 내에 style=원하는 스타일 을 추가하는 방식으로 폰트 사이즈를 조정하거나 색상을 변경한다. 위처럼 사이즈나 색상 정도만 변경할 거라면 나쁘지 않겠지만 다양한 스타일을 많이 입히는 경우에는 가독성이 매우 매우 떨어지게 된다.
- 내부 스타일 시트
이렇게 head 태그 내에 <style> 태그를 작성하여 해당 태그에 CSS를 작성하는 방식이다.
쓰는 방식은 전혀 어렵지 않다.
그냥 내가 스타일을 변경하기를 원하는 태그(id, class)를 적고 중괄호를 이용하여 스타일을 작성한다. id와 class의 차이에 대해서는 나중에 따로 포스팅을 할까 한다. 포스팅 완료!
- 외부 스타일 시트
하지만 내부 스타일 시트 또한 CSS 코드가 길어지게 되면 지저분해 보일 수 있기 때문에 아예 다른 파일로 분리할 수 있다. *.css 형식으로 같은 디렉토리 내에 파일을 생성한 후
<link rel="stylesheet" href="login.css">아래의 코드를 head 태그 내에 작성해주면 정상적으로 연결이 완료된다.
아주 쉬운 방법이고, HTML 코드를 깔끔하게 관리할 수 있기 때문에 나는 보통 이 방식을 사용한다.
이건 CSS를 적용한 페이지다. CSS를 입혔다고 하기에 아직 휑하지만 일단 기본적으로 어떻게 동작하는지만 보이기 위해 간단하게만 적용했다.
❓자바스크립트란?
자바스크립트는 특정 HTML 요소를 선택하여 제어 할 수 있는 스크립트 언어다. 웹페이지에 동적인 이벤트를 추가하기 위해 만들어진 언어인데, 이 자바스크립트로 작성한 언어를 바로 스크립트라고 한다. 이런 스크립트는 HTML 내에 작성할 수 있고, 웹페이지를 불러오면 자동으로 실행된다.
근데 이 자바스크립트라는 이름 때문에 의문을 가지는 사람들이 아주 많다.
자바랑 자바스크립트는 무슨 관계야?
누군가 이런 비유를 들었다. 햄과 햄버거, 인도와 인도네시아 같은 거라고... 그니까 이름만 비슷할 뿐 별 관계가 없다는 거다.
근데 왜 자바스크립트라는 언어를 붙였는가? 그냥 그 시기에 유행했던 언어가 자바여서 그렇다고 한다.(진짜임) 근데 그냥 막 쓴 건 아니고, 찾아보니 상표권 허락은 받았다고.
💡자바스크립트로 이벤트를 추가해보자
우리는 이 자바스크립트를 이용해서 웹사이트를 조금 더 웹사이트스럽게 만들 수 있다. 예를 들어 버튼을 클릭했을 때 팝업창을 뜨게 하는 등의 이벤트를 추가할 수 있게 된다.
로그인 버튼을 클릭했을 때 팝업창 뜨게 하는 법
버튼을 눌렀을 때 함수가 실행되게 하는 건 간단하다. 버튼 태그 내에, onclick="함수이름"을 추가해주면 해당 버튼을 클릭했을 때 함수가 실행된다.
팝업창을 띄우는 메소드는 alert이다. 이걸 함수 내에 작성하여 로그인을 눌렀을 때 1, 2, 3이 차례로 팝업되게 했다.
입력한 ID 값을 팝업창에 띄우는 법
사실 위의 내용은 정해진 수를 팝업에 띄우기만 하는 것이라 크게 어렵지 않다.
근데 만약 내가 입력한 내용을 팝업창에 띄우고 싶다면 어떻게 하면 될까?
그럴 때 사용하는 자바스크립트의 메소드가 바로 Document.getElementById()이다.
이 메소드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 element 객체를 반환한다.
즉, 쉽게 말하자면 내가 매개변수로 입력한 id를 찾고, 해당 id의 요소를 리턴해주는 거다. id는 문서 내에서 유일하기 때문에 요소를 찾아야 할 때 유용하다.
위 예시에서는 txt_id를 매개변수로 입력했으니, 문서 내에서 txt_id를 가진 요소를 찾는다. 해당 요소는 아이디를 입력하는 input 타입이기 때문에 내가 input에 입력한 값을 팝업창에 띄워주게 되는 거다.
이렇게 잘 작동되는 것을 볼 수 있다!
이 메소드에 대해 더 알아보고 싶다면 아래 링크에서 공부해보는 것을 추천한다. 예시도 있기 때문에 이해하기에 한결 편하다.
조건문을 추가해 입력하지 않았을 때 다른 메시지 팝업
입력한 내용을 팝업창에 띄우는 것까지는 완료했는데, 여기서 약간의 문제가 발생했다.
바로 입력하지 않고 로그인을 누르면 저렇게 빈 팝업창이 나타난다.
잘못된 건 아니지만, 대부분 로그인 창에서 아이디란을 비워두고 로그인을 하게 되면 아이디를 입력하라는 경고 메시지가 뜬다.
우리도 그런 경고 메시지가 나타나게 만들어보자. 아주 쉽다. 그냥 조건문을 추가하기만 하면 된다.
이렇게 txt_id라는 id를 가진 속성의 요소 값이 비어있을 때 아이디를 입력해주라는 조건문을 추가해주자.
그러면 글자를 입력했을 때는 입력한 글자가 팝업되고, ID란을 비워두면 위와 같이 아이디를 입력해달라는 경고 메시지가 팝업되게 된다.
외부 자바스크립트 파일로 적용
사실 자바스크립트를 적용하는 것도 CSS와 크게 다르지 않다. 위에 첨부한 예시들은 내부 스타일 시트 형식으로 head 태그 내부에 작성했는데, 이제는 다른 파일로 분리해서 HTML에 연결해주는 방식을 사용해보자.
.js 파일을 같은 디렉토리 내에 분리하고
<script type="text/javascript" src=login.js></script>head 태그 내에 위 코드를 적어서 연결을 해주면 성공적으로 자바스크립트와 HTML 파일의 연결까지 완료했다.
🍀마치며
HTML과 CSS, 그리고 간단한 자바스크립트를 구현해서 기본적인 웹 프론트의 내용을 익혔다. 내용이 어렵지는 않았는데 이런저런 일이 많이 생기는 바람에 TIL 작성이 늦어지고 말았다...😔
어제 들은 것도 얼른 정리해서 올리자! 이제 슬슬 어려워지고 있어서 강의를 듣는 데에도 시간이 제법 소요되고 있다.
