.log('FE')

이제 자격증시험까지 얼마 남지 않아서 작업물 포스팅에는 조금 딜레이가 생길것같다. 암기해야할게 너무 많은데 외워지지도 않고....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..

인프런 메인페이지 구조짜기의 css 과정중 마지막 과정인 footer 부분까지 완성하였다. CSS /* footer */ footer { width:100%; } .f-container, .footer-bottom { border-top:1px solid #cccccc; padding-top:30px; margin-top:20px; } .f-layout { max-width: 1170px; margin:auto; } .f-layout.upper { height:150px; } .f-box { width:33%; float:left; box-sizing: border-box; padding:0 2%; } .f-purpose { font-size:1.1rem; line-height:160%; } .f-pur..

자격증 시험공부와 동영상강의 그리고 오프라인 강의수강을 병행하다보니 메인페이지 하나 짜는데 너무 기간이 오래 걸리는것같아서 좀 빠르게 진행하고 원래 목적인 javascript 를 적용하는걸 진행해야겠다는 생각이 들었다. 그래서 오늘은 contents 부분을 css로 디자인을 입혀보았다. 상당히 단순한구조라 강의박스 하나만 잡아주면 나머지는 자동으로 잡힌다. 아이콘들은 https://fontawesome.com/ 에서 cdn 을 이용하여 적용하였다. CSS /* contents */ .contents-area { width:100%; } .contents-area .contents { max-width: 1170px; margin:0 auto; } .quick-banner { height:159px; ma..

뼈대를 다 만들었으니 이제 디자인을 입히려고 한다. CSS 요소나 태그명들이 인프런과 다를 수 있다. 반응형이나 기타 다른 부분은 제외하고 전체창일떄 보여지는 화면을 css 로 짜려고 한다. CSS /* 초기화 */ * { margin:0; padding:0; } html, body { height:100%; font-size:100%; color:#515151; } li { list-style: none; } a { text-decoration:none; color:#515151; } .hidden { height:0; width:0; visibility: hidden; } .clear::before { content:''; display:block; clear: both; } /* header */ ..

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

지난 페이지에서는 header 부분만 html 을 짰는데 이번엔 contents 영역을 코딩하려고 한다. 비교적 단순한 구조이고 내용의 구조가 반복되는 형태가 많아 class 명도 많이 사용하지않고 구조 짜는것이 가능하다. HTML 코드구조 이미지는 캡쳐화면의 사이즈를 고려하여 넣지않고 img 태그의 속성중 alt 속성을 사용하여 설명글로 대체하였다. 결과화면 - section 이라는 큰 틀에서 contents 를 담았다. - section 내부에 article 이라는 태그를 넣어서 새로운강좌와 추천강좌를 구분지었다. - 의미를 명확히 하기 힘든 구조는 div 태그로 묶고 class 명을 지정해 주었다. - class 명은 최대한 다른사람이 보더라도 어느 부분에 해당하는지 알기쉽게 하려고 노력하였다. -..

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