본문 바로가기

강의64

부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-4 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 2. HTML - FE 4) class와 id 속성 [2] 개념 정리 ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다. 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다. Class 하나의 HTML문서 안에 중복해서 사용 가능합니다. 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다. 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다. 이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다. 예를 들어 ID사용을 금하는 곳도 있습니다. class로만 사용하는 곳도 있습.. 2022. 3. 23.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-3 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 2. HTML - FE 3) HTML 구조 설계 [2] 개념 정리 HTML 구조 설계 구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다. 즉 어떠한 화면을 보면서 그대로 구현하는 것이죠. 그 화면을 보면서 구조를 분석해야 합니다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다. 각 영역 안의 내용 역시 여러 가지 형태일 겁니다. 목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다. 이때마다 적절한 태그를 쓰면 됩니다. 그러면서 영역 안에 또 다.. 2022. 3. 22.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-2 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 2. HTML - FE 2) HTML Layout 태그 [2] 개념 정리 이번 시간에는 레이아웃을 위한 HTML 태그를 배워보도록 하겠다. ‘레이아웃(Layout)’ 이란 ‘배치'라는 뜻으로, HTML 태그로 감싸진 각 정보 요소를 화면상의 어느 위치에 어떻게 자리잡을지를 결정하는 것을 말한다. 기본적으로 상단의 , 하단의 그리고 가운데의 본문 영역이 있다. 레이아웃을 구성하는 태그도 역시 그 의미에 맞춰서 사용된다. header section nav footer aside html태그는 레이아웃을 할 때도 그 의미에 맞는 것을 찾아 사용해야 검색도 더 잘되고, 가독성 있는 코드를 만들 수 있게 된다. 지금 언급된 태그들은 예를 들어 아래와 같은 화면으로 구성된다. [.. 2022. 3. 22.
부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-1 강의 정리 [1] 강의 웹 프로그래밍(풀스택) 2. HTML - FE 1) HTML Tags [2] 강의 정리 이번 시간에는 HTML 태그에 대해서 알아보겠다. HTML 태그는 굉장히 많은 것들이 있다. 또한 그 많은 것들은 모두 각각의 쓰임새에 대해서 정확한 의미를 가지고 있다. 우리는 그걸 또 영어로 표현해서 semantic한 태그다. 이런 표현을 한다. 각각의 어떤 의미를 가지고 있다고 할 수 있다. 그래서 그 많은 태그들을 A라는 용도에 써야 되는데 B 태그를 쓴다던가 또 B라는 용도가 분명히 있는데 A를 쓴다던가. 이렇게 잘못 써도 어떤 큰 문제가 안 나올 수도 있지만 각각의 태그들은 그 의미가 맞고 그래서 우리가 그 의미에 맞게 문서를 표현해주는게 중요하다. 화면상으로는 잘못 쓴 의미들, 의미를 다르게 .. 2022. 3. 21.

티스토리툴바