코딩하는 핑구

html 페이지에서 메뉴를 선택하고 선택한 정보를 출력하고 싶어서 사용해본 셀렉트 태그

아래의 빈 공백은 텍스트입력하는 input 태그이므로 신경안써도됨

html

<select class="form-control" id="menu" name="menu" required>
    <option value="" disabled selected>메뉴</option>
    <option value="boong">붕어빵</option>
    <option value="tako">타코야키</option>
    <option value="ddang">땅콩과자</option>
    <option value="other">그 외 간식</option>
</select>

select 태그에 required 속성을 덧붙여주면 해당 셀렉트 태그의 선택이 필수 선택으로 지정된다

나중에 form 형식에 셀렉트 태그를 넣은 다음 서버로 정보를 전달할 때 쏠쏠함

회원가입 경우, *필수 입력 정보가 필요할 때 쓰면된다

위의 이미지를 바탕으로 기록해보면

메뉴에 대해서 반드시 옵션 값을 선택해야하며, 메뉴라고 적혀있는 옵션 값은 선택이 불가능하다

각각의 메뉴의 value 값은 자바스크립트에서 데이터를 얻어올 때 유용하게 쓰인다

사용자에게 보여질 텍스트는 옵션 태그 사이에 넣어주면 된다

javascript

async function register(){
	var menu = document.getElementById("menu").value;
	console.log("선택한 메뉴 : "+menu);
}

위의 코드처럼 작성해보면 선택한 메뉴를 출력해볼 수 있다

저장이 필요하다면 위의 방식처럼 옵션의 value에 접근하여 저장하거나 데이터를 가공하면 되겠다

좀더 고급지게 작성할 수 있는데 일단 제일 쉽고 간단한 방법을 사용했음

다양한 방법을 덧붙인 사용을 원하면 아래 mdn 참고하자

참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/select#attr-disabled

요즘은 눈이 부셔서 폰이나 PC화면을 배경색이 어두운 다크모드로 거의 사용하고 있다보니까

내가 만든 웹사이트도 어둡게 보였으면 해서 찾아본 배경 글자 반전 다크모드

반전 예제

css

/* 다크모드 */
.dark-mode {
  background-color: #3e3a3a;
  color: white;
}

참고로 여기서 사용한 배경색은 완전한 검정색은 아니고 조금 진한 먹색

javascript

//다크모드
function useDarkMode() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

window.onload = function() { 	
	useDarkMode();
	
}

위의 코드처럼 작성을 해두면

css랑 자바스크립트만 수정해줘도 다크모드 사용이 가능하다

대신 동적으로 생성되는 객체들은 적용되는게 좀 차이가 있을수있다

나는 버튼 클릭 없이 아예 웹페이지가 열릴때 자동으로 다크모드를 실행하고 싶어서 위의 코드처럼 작성함

버튼클릭으로 배경 글자색을 반전하는 다크모드는 아래의 w3schools 참고하자

이 방식 말고도 되게 다양하게 다크모드를 적용할수있는데

나는 이방법이 제일 간단해서 일단 이렇게 사용했음

참고 : 

https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

파일첨부를 하는데 파일선택과 선택된 파일없음이라는 문구가 너무 거슬려서

인풋 파일 태그 내용 변경해본 기록

단순하게 인풋 파일태그를 숨기고 다른 텍스트로 대체한 상태

<input type="file" id="imgUpload" onchange="previewFile()" style="display:none;"></input>
<label for="imgUpload">이미지 추가</label>

기존의 못생긴 파일 선택녀석을 이렇게 단순 라벨링을 할수있다

아래의 등록하기의 경우 내가 임의로 submit 기능의 버튼을 추가한것이니 걱정ㄴㄴ

라벨링에 css 커스터마이징을 추가한 다른 형태

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

참고 : https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

버튼 ui를 수정하려는 참에 기존에 퍼블리싱을 외주로 맡겼던 곳에서 버튼을 a태그로 사용하길래

궁금해서 찾아본 내용

버튼과 a 태그 중 어느것을 클릭용 버튼으로 사용하는게 더 나을까?

w3schools 사이트의 html 튜토리얼과 다른 사이트를 참고한 내용 간단 정리

<a> a태그의 경우 anchor(앵커, 닻)의 a로,

현재 페이지에서 다른 페이지로의 이동이 있을 경우, 외부 요소에 접근하는 경우 사용하는걸 추천

<div> 간단한 컨테이너 태그로, 특별한 기능을 사용하는게 아닌

스타일적으로 커스터마이징이 필요할 때 주로 사용 (애니메이션, 모달, 트랜지션)

<button> 버튼 태그의 경우, html 페이지에 버튼을 만드는 가장 기본적인 사용법으로,

onClick 액션을 사용하고자 할때 사용하면 된다

<input type="button"> 인풋 타입 버튼 태그, 위의 버튼 태그와 동일한 버튼 태그이지만,

일반적으로 폼 데이터 제출 시, 사용하는것이 좋다

참고 : 

w3schools

stackoverflow

정독하기 좋은 내용

웹 개발 때, 크롬에서만 테스트를 진행해보다가 호기심이 생겨서 파이어폭스에서도 돌려보는데

메인페이지 접속부터 에러터지고 순탄치 않아서

뭔가했더니 HTML 태그를 끝까지 다 안닫아줘서 발생한 문제였음

보통 효율적인 개발툴을 사용한다면 이런 문제가 생기지 않을텐데

노트패드로 급히 수정하다보면 가끔 하게되는 허무한 실수라고 생각된다

이렇게.. 또 배워갑니다

심지어 내가 수정해야할 예상태그까지 다 알려준다

크롬은 알아서 해주지만 파이어폭스는 지적을 해줌

참 선생인듯 폭스선생