.log('FE')

input 의 타입중 radio 는 브라우저마다 기본 스타일이 다르게 보여집니다. 그리고 일반적인 css 스타일을 적용해서는 원하는대로 스타일을 바꾸기가 어렵습니다. 때문에 label 과 input 이 가진 특성을 활용하면 커스텀한 라디오를 만들 수 있습니다. text text2 text3 input[type=radio] { display: none; } div { display: flex; align-items: center; gap: 5px; } label { cursor: pointer; } .circle { width: 20px; height: 20px; border: 2px solid #cccccc; display: block; border-radius: 20px; display: flex; a..

1. JS 만을 활용한 TAB 메뉴 구성 2. 탭 메뉴 클릭시 컨텐츠 내용 변경 3. 탭 메뉴 클릭시 메뉴의 디자인 변경 HTML Home Resume Self introduvtion Portfolio Connect 안녕하세요 CodeReading 소개에 오신것을 환영합니다. 이력서 자기소개 포트폴리오 연락처 CSS * { margin:0; padding:0; } .tab { width:100%; height:40px; background: #eeeeee; display: flex; justify-content: center; align-items:center; list-style:none; } .tab li { margin:0 1rem; cursor:pointer; padding:1rem 2rem; }..

[HTML+CSS+JS(jQuery)] 인프런 메인페이지 Demo : https://clone-coding-inflearn.firebaseapp.com/ Github : https://github.com/kangyongseok/my-result/tree/master/html_css_js/clone_Inflearn Inflearn Clone Coding html + css + JavaScript(Jquery) 메인 페이지만 구현 제작기간 약 2일 추가할사항 소셜로그인 기능 회원가입 및 일반 로그인 기능 로그인시 메인화면에 로그인사용자 정보 반응형으로 프론트엔드 체크리스트 보면서 수정사항 반영 반응형 웹 디자인을 위한 Viewport 설정 Meta Description 추가 언어속성 추가 모든 CSS 파일이..

이제 자격증시험까지 얼마 남지 않아서 작업물 포스팅에는 조금 딜레이가 생길것같다. 암기해야할게 너무 많은데 외워지지도 않고....60점만 넘으면 되는데 그래서 오늘은 슬라이드 버튼부분 조금 손본거랑 돋보기 아이콘 클릭시 검색창이 뜨는 기능을 추가하였다. Slide Script let prev = document.querySelector('.arrow-left'); let next = document.querySelector('.arrow-right'); let slideList = document.querySelectorAll('.test'); var count = 0; next.addEventListener('click', nextSlide ); function nextSlide() { if(count..

인프런메인페이지 구조짜기에서 html 과 css 는 얼추 마무리되었고, 이제 javascript 를 적용해볼 차례다. 우선 상단 배너안에있는 Carousel 을 움직이도록 해보려고 한다. 바로 이부분이다. 하나만 제대로 완성해 놓으면 하단의 다른 슬라이드에도 함께 적용이 가능하다. 우선 생각나는대로 짜보고 수정과 리팩토링을 거치면서 동작되는걸 확인해 보려고 한다. html 에서의 변화는 기존 li 구성이 4개에서 슬라이드를 확인할 수 있도록 6개로 늘려주었고 css 에서는 ul 의 범위를 넘어가면 가리는 속성추가와 높이값 추가 그리고 부드러운 움직임을위해 transition 속성을 추가하였다. .slide-area ul{ width:340px; height:65px; overflow: hidden; ma..