본문 바로가기
카테고리 없음

HTML 각 잡고 공부하기

by 지삶앎 2022. 12. 3.
반응형

HTML 각 잡고 공부하게 된 동기

비전공자에서 프론트엔드 공부를 한 지 거의 1년, 실무는 6개월이 됐는데 스타트업에서 빠르게 작업한다고 매일 쓰던 HTML 태그만 썼었다. 특히 div 태그만 쓰다가는 안 되겠다 싶어서 더 늦기 전에 html을 제대로 숙지해야겠다 싶어 공부를 하고 기록을 하려 한다.

 

HTML, CSS, Javascript

HTML(HyperText Markup Language)은 웹 페이지를 위한 마크업 언어다. 웹 문서의 기본적인 골격이라 할 수 있다. CSS는 각 요소들의 레이아웃과 스타일링을 맡고 있다. 마지막으로 Javascript는 동적인 요소를 담당한다.

웹 표준과 접근성 그리고 호환성

내가 HTML을 각 잡고 공부하게 된 이유, 내가 웹페이지를 만들지만 표준과 접근성 그리고 호환성을 신경쓰고 있는가했을 때 아니었다. 내년이면 개발자로 2년차로 이제는 알아야할 때가 왔다.

  • 웹 표준 : 통상적으로 HTML5 W3C에서 공식 표준화했고 HTML Living Standard라 한다. 웹 표준에 맞춰 작성한다면 운영체제, 브라우저마다 의도대로 웹 페이지를 만들 수 있다.
  • 웹 접근성 : 모든 사람들이 웹사이트를 이용할 수 있게 하는 방식으로, 스크린리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등의 기능이 웹 접근의 예시이다. 그래서 시력이 좋지 못한 사람, 손을 이용하기 어려운 사람들 등 불편한 사람들도 웹 페이지를 이용할 수 있게 해주는 것이 접근성을 높인다라 한다.
  • 웹 호환성 : 웹 브라우저 버전, 종류와 관계없는 웹사이트 접근을 의미하며, HTML, CSS 문법을 준수해야 한다.

 

HTML

<여는 태그> 내용 <닫는 태그/>
  1. 여는 태그
  2. 닫는 태그
  3. 내용 : 요소의 내용
  4. 요소 : 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.

HTML5에서는 태그를 모두 소문자로 작성하는 것을 권장한다. 보통은 여는 태그와 닫는 태그가 같이 존재해야하는데 내용이 없으면 빈 요소라는 하여 닫는 태그가 없어도 된다. 이미지나 수평선, 줄바꿈 태그가 대표적인 예시이다.

 

html 문서의 구조로는 <html>, <head>, <body> 로 볼 수 있다.

  • <html> : 페이지 전체의 내용을 감싸는 루트 요소이다.
  • <head> : 브라우저 화면에 직접적으로 나타나지는 않지만 웹페이지의 정보를 담고 있다.
    • <meta> : 문서의 일반적인 정보와 문자 인코딩을 명시한다.
    • <title> : 브라우저 상단 탭에 제목이 써있는 부분을 의미한다.
  • <body> : 웹 브라우저 화면에 나타나는 모든 콘텐츠이다.

 

블록과 인라인

블록(Block) : 언제나 새로운 라인에서 시작하고, 좌우 양쪽 최대한 늘어나 가능한 모든 너비를 차지하는 요소

인라인(Inline) : 줄의 어느 곳에서나 시작 가능하고 요소의 내용 만큼만 차지한다.

인라인 요소는 블록요소를 포함 할 수 없다.

반응형

댓글