.log('FE')

- 정보처리기사 / 산업기사 실기 알고리즘 수학 부분 문제풀이 - 인프런의 메인페이지를 본따 작업물 진행중 css 코딩중 - 현재 다니고 있는 교회의 홈페이지가 너무 오래되보여 리뉴얼을 하려고함 - 게시판위주의 자료 업로드 홈페이지라서 그누보드를 활용할 예정

뼈대를 다 만들었으니 이제 디자인을 입히려고 한다. 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 블로그에 방문해 주셔서 환영합니다. 댓글은 모두 환영하니 많이 달아주세요.

- 정보처리기사 및 산업기사 실기시험 공부 (1과목 실무알고리즘 응용문제풀이) - 인프런의 러닝패스 '웹 프론트엔드 개발 로드맵' 에서 '핵심개념을 알아보는 Javascript Flow' 강좌 수강완료 [내용정리] 자바스크립트 데이터 타입은 크게 두가지 Primitive Type, Reference Type Primitive Type (기본유형) - Number - String - Boolean - null - undefined = 값을 그대로 할당 예를들어 변수명을 정하고 변수를 할당할경우 빈 데이터 공간을 할당하고 정해진 주소에 입력한 변수를 저장하게 된다. 새로운 변수를 지정했을경우 기존에 있던 데이터에 새로운 변수값을 덮어 씌운다. Reference Type (참조유형) - Object (객체) ..

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

현재 인프런의 '웹 프론트엔드 개발 로드맵' 에서 생활코딩에서 강의하는 HTML강좌를 빠르게 청취하고 현재는 동일하게 생활코딩에서 강의하는 'CSS 기본부터 활용까지' 를 수강중이다. [새로알게된것] - 폰트파일을 웹폰트로 변환해주는 사이트 url : https://www.web-font-generator.com/

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