728x90
반응형

전체 글 95

[웹] 인프런메인페이지 구조짜기 - HTML(3)

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

2018-09-06

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

[웹] 인프런메인페이지 구조짜기 - HTML(2)

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

[웹] 인프런메인페이지 구조짜기 - HTML(1)

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

728x90
반응형