.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..

인프런의 메인페이지 하단 footer 구조 짜기 html 결과물 - 이미지 부분은 css 를 적용하면서 함께 적용될 예정 - 전체적으로 레이아웃이 깔끔하고 단순한 편이라 html 코드짜며 연습하기에 좋은 레이웃 - 그러나 역시 이름 짓는건 어렵..... (CSS를 다루면서 class 명은 수정되거나 추가, 삭제될 예정) code-reading 블로그에 방문해 주셔서 환영합니다. 댓글은 모두 환영하니 많이 달아주세요.

인프런메인페이지 구조짜기 1단계 - 메인페이지 구조 분석 2단계 - 분석토대로 시멘틱태그와 클래스명 정하기 3단계 - 불꽃코딩 1단계 - 메인페이지 구조 분석 현재 인프런의 메인페이지 캡쳐화면▲ 큰 구조로 나눔 ▲ 큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲ 큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲ 큰 구조에서 다시 세부구조로 나누면서 예상되는 class명 지정▲ 2단계 - 분석토대로 시멘틱태그와 클래스명 정하기 3단계 - 불꽃코딩 결과화면 인프런 로고와 함께 있는 이미지는 css 에서 background 로 삽입된 이미지라 html에서는 포함하지 않았습니다. 실제 인프런 페이지는 FONTAWSOME 이란 라이브러리를 통해 아이콘을 사용하였고 전체 레이아웃은..