본문 바로가기

Web Programming52

[Front-End] 4) class 와 id 속성 학습 목표 CLASS와 ID의 목적을 이해하고, 구분해서 작성할 수 있다. 핵심 개념 HTML 태그 안에서 사용되는 class속성과 ID속성 학습하기 [영상보강] 영상 4:38 에 소개된 nav-section 클래스를 가진 section엘리먼트는 유심히 보면, nav만 감싸있는게 아닙니다. nav와 아래 section등도 모두 포함한 wrapper역할을 합니다. 영상에서는 nav-section이라는 이름을 주었지만,전체 영역을 모두 커버하는 class이름이 더 적당할 거 같네요. nav-section 클래스 이름이 적당한 엘리먼트는 그럼 무엇일까요? 네 section 바로 아래있는 nav엘리먼트에 그 클래스 이름을 주는 것이 어울 걸 겁니다. ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니.. 2019. 12. 18.
[Front-End] 3) HTML 구조설계 학습 목표 CSS 없이 먼저 HTML구조를 설계할 수 있습니다. 핵심 개념 HTML구조화 설계 학습하기 HTML 구조설계 구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다. 즉 어떠한 화면을 보면서 그대로 구현하는 것이죠. 그 화면을 보면서 구조를 분석해야 합니다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다. 각 영역 안의 내용 역시 여러 가지 형태일 겁니다. 목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다. 이때마다 적절한 태그를 쓰면 됩니다. 그러면서 영역 안에 또 다.. 2019. 12. 18.
[Front-End] 2) HTML Layout 태그 학습 목표 레이아웃(전체 페이지 구성)을 위한 적절한 HTML 태그들을 이해합니다. 핵심 개념 HTML layout 태그들 학습하기 레이아웃을 위한 태그 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용됩니다. header section nav footer aside html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 됩니다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성됩니다. HTML5 layout tag 생각해보기 간단한 웹페이지를 만든다고 가정하고, 상단 영역, 네비게이션 영역, 하단 영역을 layout tag를 사용해서 구성해보면 좋습니다. 여러 웹사이트들이 어떻게 layout태그를 사용하고 있는지 살펴보세.. 2019. 12. 18.
[Front-End] 1) HTML Tags 학습 목표 HTML 태그를 이해하고, 이를 사용할 줄 압니다. 핵심 개념 HTML tag 학습하기 HTML tag의 종류 태그는 그 의미에 맞춰서 사용해야 합니다. 링크 이미지 목록 제목 anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그 등이 자주 사용됩니다. 그 밖에 가장 많이 사용하는 div태그가 있습니다. div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용합니다. 많은 태그를 모두 외울 필요는 없으며, 필요한 태그를 찾아서 적절한 의미에 맞는 태그를 사용하는 것이 중요합니다. 실습코드 강의에서 진행한 실습용 코드입니다. JS Bin 반갑습니다 여기 여러분들이 좋아하는 과일이 있어요. 사과 사과 메론 귤 *reference : 1) .. 2019. 12. 17.

티스토리툴바