본문 바로가기

Language & Framework

바닐라 자바스크립트로 data 속성 사용하여 탭(Tab) 기능 만들기.
Language & Framework/JavaScript 2022. 2. 24. 바닐라 자바스크립트로 data 속성 사용하여 탭(Tab) 기능 만들기. 이 방법을 사용하여 탭 기능을 만들기 위해서는 JavaScript의 forEach와 HTML의 데이터 속성에 대한 사전 지식이 필요하다. (대충만 알면 만들 수 있음) 일단 데이터 속성에 관한 자세한 설명이 궁금하다면 여기를 참고할 것. 간단하게 설명하자면 사용자 인터페이스에는 노출되지 않는 추가적인 정보를 HTML에 저장하여 JavaScript로 불러올 수 있도록 하는 것이다. 참고로 이 데이터 속성은 사용자 인터페이스에 노출되지 않는다는 것이지 개발자 툴에서 모두 확인 가능하므로 중요한 정보를 이 안에 담아서는 안 된다. html에 data 속성을 담을 때는 data-원하는이름 = "문자열", JavaScript에서 이 속성을 불러올 때는 Element.dataset.원하는이름으로 불러오면 된다. 두..
자바스크립트 정규식 이용하여 로그인 유효성 검사. 대문자가 들어간 패스워드만 전송하기.
Language & Framework/JavaScript 2022. 2. 23. 자바스크립트 정규식 이용하여 로그인 유효성 검사. 대문자가 들어간 패스워드만 전송하기. 정규 표현식(regular expression)이란 무엇을 할 때 사용하는 것인가요? 특정 문자열 조건을 설정하고 값을 test하여 boolean 값을 반환하기 위해 사용합니다. 예를 들어 이메일 입력칸에 아무 쓸모 없는 이상한 글자를 적어서 send 누른다고 죄다 서버로 전송해줄 이유는 없으니까, 애초에 조건이 충족되지 않는 문자열은 서버로 보내는 것 자체를 차단하고 사용자에게 올바른 문자열을 입력할 것을 요청할 수 있습니다. 정규 표현식은 직접 외워서 쓰기에는 머리 아픈 친구이기 때문에 각각 어떤 것들을 의미하는지 한 번 훑어보고 구글 검색을 통해 필요한 정규식을 찾은 뒤 일부만 내 필요에 맞게 수정해서 쓰는 것이 좋습니다. 정규식에 대해 자세히 배우고 싶다면 여기로 가서 확인합시다. Email Pa..
HTML CSS 클론 코딩 (feat. chart.js)
Language & Framework/실습 2022. 2. 21. HTML CSS 클론 코딩 (feat. chart.js) 딱히 어려운 부분은 없었으나 chart.js의 크기가 자꾸 엉망으로 조정되어서 다른 부분 전체를 만드는 시간보다 chart.js 조절하는 방법 찾는 것에 더 많은 시간을 투자한 것 같다.. 이번에는 Bootstrap은 일절 사용하지 않고 미리 dashboard card로 사용될 가상 클래스를 만들어 @extend로 카드들을 만들어주고 col, row만 직접 scss로 구현하여 완성했다. html css 찍먹은 충분히 해봤으니 이제 다시 JS로 돌아갈 시간이다. https://github.com/yangddoddi/Admin-page GitHub - yangddoddi/Admin-page: admin page clone coding (html scss) admin page clone coding (htm..
부트스트랩을 활용한 HTML CSS 클론 코딩
Language & Framework/실습 2022. 2. 19. 부트스트랩을 활용한 HTML CSS 클론 코딩 부트 스트랩을 처음 사용해보면 신세계라고 하는데, 나한테는 다른 의미로 신세계였다. 도저히 눈을 뜨고 볼 수 없는 지저분한 html.. 반응형을 위해 미디어 쿼리를 따로 작성해주지 않아도 되는 것은 편하기는 하지만.. 별로 마음에 들지 않았다. 일단 찍먹은 해봤으니 실력 향상을 위해 앞으로 되도록 사용하지 않을 예정이다. https://github.com/yangddoddi/SNS-profile GitHub - yangddoddi/SNS-profile: HTML,CSS(+bootstrap) clone coding HTML,CSS(+bootstrap) clone coding. Contribute to yangddoddi/SNS-profile development by creating an account o..
바닐라 자바스크립트로 캐러셀(Carousel) 슬라이드 만들기.(문제 해결 완료)
Language & Framework/실습 2022. 2. 18. 바닐라 자바스크립트로 캐러셀(Carousel) 슬라이드 만들기.(문제 해결 완료) * 실습 카테고리에 올린 이유는 버그가 있으며 부족하다고 느끼기 때문이다. 남이 삽질한 게 궁금하면 읽어보고 아니면 다른 블로그 글을 참고하십시오. 제가 되새김질하고 나중에 수정하기 위해 올리는 것. * 영상을 보면 알겠지만 브라우저가 resize 될 때 캐러셀의 이미지 크기가 엉망으로 변할 때가 있다. 심지어 항상 그러는 것도 아님. * 이벤트 리스너 사용해서 매번 브라우저 크기에 맞춰서 캐러셀이 재정렬되게 설정해주면 해결은 되지만.. 이미 resize로 매번 사이즈 받아오는 것도 너무 무거운 게 아닌가 찝찝해서 다른 방법을 강구하고 있는데 정렬까지..? 멈춰~!~!~! 미래의 나한테 맡기려고 했는데 문제 해결했고 정말 별 거 아니였다. 하루 종일 고민할 때는 어렵게 느껴졌는데 포기하고 다른 거 배우려..
HTML , CSS 클론 코딩
Language & Framework/실습 2022. 2. 17. HTML , CSS 클론 코딩 HTML, CSS를 활용한 클론코딩. 배경 그라데이션과 투명 박스를 활용하여 테두리에 라인을 만들어주는 것은 처음 해보기는 했지만 어려울 건 없었다. 이제 이런 간단한 건 눈 감고도 할 수 있다. 깔깔. 근데 언제까지 기초만 배울 예정인지..? 공부할 시간이 너무 부족하다 🥲🥲 https://github.com/yangddoddi/landing-page GitHub - yangddoddi/landing-page: HTML,CSS clone coding HTML,CSS clone coding. Contribute to yangddoddi/landing-page development by creating an account on GitHub. github.com
CSS로 flip 효과 간단하게 구현하기
Language & Framework/HTML CSS 2022. 2. 15. CSS로 flip 효과 간단하게 구현하기 이런 효과를 한 번 구현해보자. 응애 나 애기 멍멍이 html은 이렇게 작성했다. 전체 박스 안에 앞면과 뒷면을 각각 만들어주면 된다. 앞면은 굳이 박스로 만들지 않고 img 태그에 바로 클래스를 줘도 상관 없다. .flipProfile { display: block; margin: auto; width: 300px; height: 300px; transform-style: preserve-3d; // 이 박스를 3d로 만들어주세요~ transition: 300ms all ease-in; } .flipProfile img { width: 100%; height: 100%; border-radius: 50%; } .flipProfile__front { position: absolute; z-index: 1..
SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게.
Language & Framework/HTML CSS 2022. 2. 12. SCSS(SASS) 기초 활용법과 반복문 활용하여 부트스트랩의 row, col 구현하기. 핵심만 간단하게. SCSS가 무엇인가요? CSS를 좀 더 깔끔하고 예쁘고 편하게 작성하도록 도와주는 전처리기다. 설치, 적용 방법의 경우 vscode를 사용하는 사람이라면 여기가 가장 설명이 잘 되어있는 것 같다. 나머지는 직접 찾아보도록 합시다. 나는 이 깜찍한 html을 토대로 SCSS의 기초적인 내용들을 설명하도록 하겠다. 세가지를 다룰 예정이다. 기본 작성법, extend와 mixin, 그리고 부트스트랩의 row와 col을 반복문으로 구현하기. 모두 쉬운 내용이다. 1) 기본 작성 방법 한 컷으로 이해하는 기본 작성 방법. css의 root 활용과 비슷하게 $변수명을 사용하여 미리 입력된 값을 불러와 사용할 수 있다. 다만 훨씬 눈에 잘 들어오고 깔끔하다. css와 달리 클래스 내부의 요소를 일일히 새로 클래스를 ..

티스토리툴바