HTML이란?
HTML은 CSS, JavaScript와 함께 쓰이는 마크업 언어이다.
건물로 따지면 HTML은 기초나 뼈대를 담당하고있는데 그런만큼 처음에 HTML로 셋업을 잘 하는게 중요할 것 같다.
아래 HTML의 정의를 위키에서 가져와보았다.(https://ko.wikipedia.org/wiki/HTML)
HTML(HyperText Markup Language)
초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트, 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
HTML을 구성하는데는 여러가지 tag들이 필요한데, 그중 가장 많이 쓰는 tag를 위주로 배워보았다.
영어로 되어있어서 익숙하지 않지만 무조건 암기 해야 될 것 같다😅
기초적인 개념을 배우고 로그인창 만들기 실습을 해보았다.
너무나 간단해서 할것이 없었다. 앞으로도 이런 난이도로 가면 좋을텐데 아니겠지...🤦🏻♂️
시멘틱요소
시멘틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(sementic web)이 중시되면서 시맨틱 요소(sementic element)가 새롭게 만들어졌다. 시맨틱이란 '의미가 있는, 의미론적인' 으로 해석할 수 있다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다고 볼 수 있다. 시맨틱 요소 중 하나인 h1 요소를 예로 들면 최상위 제목 (top level heading)을 표현할 때 사용하는 요소인 h1요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 한다. 이와 같은 효과는 div요소, span요소에 CSS속성을 추가하여 h1요소와 똑같이 보이도록 할 수 있지만, h1요소를 사용하는것과 다르게 의미적 가치는 없다.
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 div요소를 주로 사용했는데, 그러다 보니 웹 페이지 하나에 div요소 수십 개가 중첩된 이른바 div 지옥(ㅋㅋㅋ)이 되는 경우가 많았다.
시멘틱 요소를 사용해야 하는 이유
첫번째, 검색 엔진이 시맨틱 요소를 더 좋아한다. 검색엔진이 시맨틱 요소를 중요한 키워드로 고려한다. 즉 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위로 갈지 하위로 갈지 정해진다.
두번째, 여러 개발자가 함께 작업할때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하다. 뿐만 아니라 요소 안에 채워질 데이터의 유형도 어느정도 예측 할 수 있다.
오전동안 배운 마크업 언어 HTML을 가지고 실습을 하는 챕터가 있었다.
복잡한 태그가 아닌 아주 기초적인 단계의 태그를 사용하여 만드는 과제였기 때문에 시간이 오래 걸리지 않았던것 같다. 이미지 추가할때 상이한 폴더에 이미지 파일이 있어 html 템플릿들이 저장되어 있는 곳으로 이미지 파일을 옮겨 주니 잘 작동했다. 짜잔~~✌🏻😜
HTML 심화
-
와이어프레임
와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다.웹 애플리케이션을 개발할 때, 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미하며 이 단계에서 와이어프레임을 설계하는 방법과 id, class 속성을 목적에 맞게 사용하는 방법을 학습한다. -
웹 페이지 구조잡기
- 큰 틀에서 영역 나누기
예)쓰기영역, 읽기영역 등의 큰 부분으로 우선 나눈다. - 각 영역을 태그로 표현하기
웹의 구성요소(컴퍼넌트)의 tag가 어떻게 구성 되어있는지 고민하기.
종합퀴즈 오답노트
리팩토링?? 클린코딩??
