![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/tbsx9/btsovJATFPL/QVTorj7g2WrsWQFI8azruK/img.png)
안녕하세요 찐망고 입니다. 웹사이트에서 푸터에 해당하는 부분을 보면 꼭 들어가는 내용이 있죠? 카피라이트, 사업자정보, 그리구 개인정보처리방침!!!! 개인정보처리방침이란 개인정보보호법 제 30조에 따라 모든 개인정보처리자에게는 개인정보 처리방침을 수립 및 공개할 의무가 있는데요 '개인정보처리자'란 개인정보보호법 제2조 제5호에 '업무를 목적으로 개인정보파일을 운용하기 위하여 스스로 또는 다른 사람을 통하여 개인정보를 처리하는 공공기관, 법인, 단체 및 개인등을 말한다.'라고 명시되어 있습니다. 따라서 고객 개인정보를 보유한 개인정보처리자뿐만 아니라, 고객 개인정보는 보유하고 있지 않으나 내부 임직원의 개인정보를 수집 및 이용하는 개인정보처리자의 경우에도 개인정보 처리방침을 수립해야 합니다. (다만, 공공..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/lNTjc/btsn27vYT4O/WGueD3itwSTKKmVpbjwn00/img.png)
안녕하세요 찐망고 입니다. 오늘은 Form요소를 CSS를 이용하여 디자인하는 포스팅을 해볼건데요. Form요소들은 기본적으로 본인들의 스타일이 적용되어있는데요 잘 살려서 작업해 보도록 하죠 기본 예시는 selecto웹사이트를 참고하였습니다. 수업 예제로 셀렉토 사이트를 클론코딩 해봤는데요. 오른쪽에 지역검색과 매장명, 매장서비스검색에 체크박스를 디자인해보려구 합니다. // HTML 지역검색 도/시선택 강원 경기 서울 인천 구/군 선택 매장명 02 매장 서비스별 검색 무선인터넷 기능 흡연시설 보유 주차가능 야외테라스 보유 모바일 가맹점 select요소를 이용해서 드롭다운 목록을 만들었는데 처음 보이는 부분의 디자인을 위해 span요소를 감싸주었구요 체크박스는 체크박스형태는 CSS가 가능하지만 체크모양 자체..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/c1ztXe/btsnfEBpJmP/S4OxukrvNGKWXibxtmUDHk/img.png)
안녕하세요 찐망고입니다 포스팅 순서가 지금 두서없긴 한데 양해를... HTML에서 FORM은 사용자로부터 입력을 받기 위해 사용되는 요소이고 웹페이지에서 데이터를 전송하거나 처리하기 위한 컨테이너 역할을 하는데요 일반적으로 폼은 텍스트입력, 체크박스, 라디오버튼, 드롭다운 목록등과 같은 다양한 입력요소를 포함할 수 있죠. Select요소는 FORM요소에서 드롭다운 목록역할을 하는 요소인데 사용자에게 선택할 수 있는 옵션 목록을 제공합니다. 제자들이 많이 하는 질문 중 하나는 모바일에서 꼭 Select요소를 사용해야하는지에 대한 질문이었어요 이 질문이 왜 나왔냐면 현재 드롭다운 목록형태의 구조를 가지는 디자인요소들이 생각보다 꽤 많이 Select요소 대신 다른 구조로 작업 되고 있거든요 이런 디자인들 많이..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/uUdgY/btsmUH5SPGE/ZJC9T4neKzzKCZGSYv8731/img.png)
안녕하세요 찐망고입니다. 아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요. 요즘 기업사이트 추세가 메인 비주얼 섹션에 영상을 많이 넣더라구요. 거의 국룰이랄까.. 영상을 넣을거다 라고 하면 HTML요소로는 VIDEO요소가 있고 내가 다른 서버에 있는 영상을 좀 가지고 쓸거다 라고 하면 IFRAME요소로도 가능합니다 // VIDEO요소 메인에 영상만 넣으면 멈춰있는 상태로 들어가요 그래서 자동재생(autoplay) 하는게 좋은데 자동재생 속성을 넣어도 멈춰있단 말이죠. 사용자입장에서 처음 가보는 페이지에 접속하자마자 시끄러운 소리와 함께 (나름 고르고고른 bgm이라 할지라도) 영상이 재생되면 당황하겠죠? 그래서 음소거(muted)를 하는 거고, 음소거가 되야 자동재생이 됩니다. 한번 ..
안녕하세요 찐망고입니다. 얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요 2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); 안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 uiweb.tistory.com 아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요? 다알아요 하고싶은거.. 물론 스크롤이벤트가 가능한 플러그인..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Znrzp/btsl0lvqjVZ/pSHwq1nFFBDgiTGiqGlvgk/img.png)
안녕하세요 저는 찐망고이고 오늘은 마우스 커서를 따라다니는 이미지 효과를 만들어 볼건데요.. 이벤트는 mousemove를 사용하고 좌표값을 알 수 있게 pageX와 pageY를 체크하시면 되요 작년 10월에 SELECTO COFFEE 웹사이트가 업데이트 되었는데.. https://www.selecto.co.kr/brand/main.asp 셀렉토커피 커피전문점,카페창업,아메리카노 전문점,브런치 카페,입맛에 따라 골라먹는 커피전문점등 www.selecto.co.kr 요 귀여운 친구가 마우스를 따라다니더라구요~~ 머 아주 간단한 코드로 가능하니까 작업해볼께요 일단 이미지를 넣어야하는 요소가 필요하고 그 요소에 이미지를 담을거고 그친구를 mousemove이벤트를 이용하여 움직일겁니다. // html // jav..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bzyxhZ/btslJ8QQ78e/8Qe3qIwg2oRRDbeH0nI9Kk/img.png)
2023.06.27 - [WEB/CSS] - flex를 배워보자 - 1 flex를 배워보자 - 1 원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 uiweb.tistory.com 이전글을 읽고 오시길 바랄게요 display: flex를 선언하면 부모요소가 flex-container가 되면서 자식들이 flex-item이 된다고 했는데요 각 flex-item들에게 각각의 속성을 지정할 수 있습니다. HTML 삽입 미리보기할 수 없는 소스 align-self 부모요소에게만 적용할 수 있는 정렬속성들이 각각의 플렉스 아이템에게도 적용이 가능한데요 align-self입..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bfDvoR/btsluXbD4ws/kFeVL3cYGl3zqm5HZyXQkK/img.png)
안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 참고하시고~~ 2023.06.07 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout() JS) 숫자 카운트 setInterval(), setTimeout() 웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Ma ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bKzljq/btsjlZpekMQ/ABkIm1Ld6TNXnweKYfXbsk/img.jpg)
원래 레이아웃의 시작은 Float이긴 했는데 ie작별인사하시고 굳이 써야되는 상황이 적은 것 같아 레이아웃의 끝판왕(이라고 생각했는데 그리드 레이아웃과 섞어쓰는것이..) flex에 대해서 포스팅 해보려 합니다. 워낙 자세하게 나온 포스팅들이 많지만 시작해보겠어요 예전 학생과의 카톡..내용 float를 배우고 flex를 하고 나면 생각보다 너무 편리해서 학생들이 좋아하고 잘 사용하긴 했는데 중요한건 제대로 알고 써야 하니까~ flex는 display 속성 중 하나이고 flex와 inline-flex가 있어요 block과 inline-block개념이라 생각하시면 되고 잘 모르겠으면 일단 보고오... 2021.12.12 - [WEB/HTML] - inline요소와 block요소 inline요소와 block요소..
안녕하세요 찐망고 입니다. 오늘은 자바스크립트 함수에 대해서 가볍게 포스팅해볼게요 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 코드를 재사용하고 구조화하여 프로그램을 개발하는데 도움을 주는 사용자정의함수와 자바스크립트에서 내부적으로 제공하는 내장함수가 있어요 function funcName(parameter1, parameter2) { // 함수실행코드 // 결과반환(선택가능) } function addNumbers(a, b) { return a + b; } let result = addNumbers(3, 5); console.log(result); // 8 함수는 함수 선언식과, 함수 표현식이 존재하는데 함수를 선언하고 사용자가 직접 실행할 함수의 이름을 짓거나..
- Total
- Today
- Yesterday
- 자바스크립트숫자카운트
- 프로그래밍기초
- CSS3
- JavaScriptTips
- css
- 코딩교육
- 스마트폰해상도
- uiux
- 웹표준
- 웹디자인
- css그리드
- css4
- uidesign
- UI디자인
- 피그마플러그인
- 슬라이드플러그인
- margin
- padding
- 크로스브라우징
- 디자인팁
- Border
- boxmodel
- JavaScript
- 포토샵합성
- uxdesign
- 웹접근성
- slickAPI
- 시멘틱마크업
- 반응형웹
- Slick
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |