본문 바로가기
반응형

전체 글136

selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 selectbox를 JS로 컨트롤 해보기 - input, change 이벤트 이전 포스팅에서는 Javascript로 DOM을 조작하는데 있어, input 사용을 주로 예제로 들었습니다. 이번 포스팅에서는 input의 사촌(?) 격인 selectbox 컨트롤을 추가로 정리해보면서, 다양한 form 요소들을 사용하는 방법을 확장해 나가보기로 합니다. selectbox의 장점 input은 사용자가 직접 타이핑을 해서 입력을 하기 때문에, 입력되는 데이터를 '한정'하거나 제한을 해야하는 장치들이 필요합니다. 예를 들어 대학교 이름을 입력받아야 하는 경우 사용자에 따라서 '한국대학교', '국립한국대학교', '한국대', '한대' 등으로 각양각색으로 입력을 할 수 있기 때문입니다. 그래서 마치 4지선답 객관식 문제처.. 2023. 2. 16.
[IIS] http:// 요청을 https:// 로 Redirection 해주기 - ft. ChatGPT 도움 [IIS] http:// 요청을 https:// 로 Redirection 해주기 저도 서버에 관해서는 앞으로도 공부할 것이 너무나 많은 초보입니다. 어쩌다 보니 SSL 설치를 직접 시도해 보게 되었고 우여곡절 끝에 잘 설치를 했더랬습니다.(차후에 포스팅해보겠습니다) 다행히 windows 서버 환경이라서 그런지 인터페이스가 친숙해서 그나마 덜 버벅댔던 것 같습니다. https://로 보안 통신을 해주는 SSL은 443번 포트를 사용합니다. 이 사이트는 2개의 도메인을 사용 중입니다. 그래서 www가 붙는 도메인과 붙지 않는 도메인이 각각 80번 포트로 바인딩되어 있습니다. SSL을 설치한 후에는 https 프로토콜로 www가 있는 경우와 없는 경우를 바인딩을 해두었습니다. 사이트 바인딩을 마치고 나서, 테.. 2023. 2. 15.
Client-side 렌더링 vs. Server-side 렌더링 ? CSR, SSR Client-side 렌더링 vs. Server-side 렌더링? 웹을 공부하다 보면 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이라는 용어를 만나게 됩니다. 이 용어는 사용자가 브라우저를 통해서 보게 되는 웹문서들을, 서버에서 완성해서 보내주느냐 아니면 사용자의 PC나 모바일 기기에서 완성해서 보여주느냐? 의 차이라고 보면 됩니다. 간단하죠? 이참에 간단하게 정리해 두고 넘어가기로 합니다. 서버 사이드 렌더링(SSR) 대표적이고 전통적인 방식입니다. 서버 사이드에서 동작하는 프로그래밍 언어를 통해 html 파일을 모두 생성한 후 사용자에게 보내주는 방식을 말합니다. 단점으로는 서버가 모든 일을 다 처리하기 때문에, 사용자가 몰리면 서버에 부하가 걸린다는 것이죠. 반면 서버에서 모든 .. 2023. 2. 14.
float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 float를 이용한 탭 메뉴 버튼 만들기2 - jQuery, vanilla JS 구현 이전 포스팅에서 HTML/CSS를 이용해서 탭메뉴 버튼의 UI를 만들어보았습니다. float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사 kincoding.com 그러면 이제 이 메뉴를 동적으로 작동하도록 만들어야겠죠? 그런 역할을 해주는 언어가 바로 Javascript입니다. 프로그래밍 언어를 이용하는 코딩은 흥미진진합니다. 생명력을 불어 넣.. 2023. 2. 13.
float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사실 flex를 이용하는 게, 익숙치 않은 float를 사용하는 것보다 훨씬 더 직관적이고 쉬울듯 하지 않을까라는 생각이 들기도 하지만, 다른 사람이 만들어 놓은 결과물을 수정해야 하는 경우도 있으니, 이 참에 먼저 float를 이용하여 만든 탭 메뉴에 익숙해질 수 있도록 포스팅을 통해 정리를 합니다. html 뼈대 구성 뼈대가 되는 html은 다음과 같이 ul, li를 이용해서 메뉴 형식으로 구성했습니다. 하단 각각의 div는 각 탭을 눌렀을 경우에 보여주거나 숨길 설명 내용입니다. 물론.. 2023. 2. 12.
페이지 스크롤 진행률을 표시해보자 - 상단 progress-bar 만들기 페이지 스크롤 진행률을 표시해 보자 - 상단 progress-bar 만들기 이전 2개의 포스팅에서 이벤트 리스너를 달고, scroll을 감지하는 내용을 배우고 정리해 보았습니다. 이런 것들은 배우고 익혀서 대체 어디에 써먹을 수 있을까요? 웹사이트를 서핑하다 보면, 이렇게 페이지 상단에 프로그래스 바를 만들어 두고 본문을 얼마큼 읽었는지 표시해 주는 UI를 만나는 경우가 있습니다. 왠지, 스크롤 전체 높이를 알고, 현재 스크롤한 값을 알 수만 있다면 Javascript로 구현을 할 수 있겠다는 생각이 들지 않은가요? scroll 이벤트를 배웠으니, 당장 써먹어 보도록 합니다. 세로 높이가 긴 문서 준비 예제로 활용할 HTML 문서는 다음과 같이 만들어봤습니다. VSCode에서 lorem * 500 정도 .. 2023. 2. 11.
반응형

티스토리툴바