HTML
- 원문 출처: https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML
- 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분할 수 있도록 의미를 부여하고, 헤더인지, 컨텐츠 컬럼인지, 네비게이션 메뉴인지 알 수 있도록 논리적인 영역으로 구조화하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어
- HTML: 문서의 구조
- CSS: 문서의 표현
- JavaScript: 문서의 동작
- HTML은 프로그래밍 언어가 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
- 여는 태그: 요소의 시작
- 닫는 태그: 요소의 끝
- 내용: 요소의 내용, 단순 텍스트
- 요소: 여는 태그, 닫는 태그, 내용을 통틀어 칭함
포함(내포)된 요소
- 요소 안에 다른 요소가 들어가는 형식
- 단어의 강조 등에 사용(
<strong></strong>) - 내포되어지는 요소는 다른 요소 속에서 열고 닫혀야 하며, 다른 요소를 포함시키는 요소는 그 바깥에서 열고 닫혀야함
블록 레벨 요소와 인라인 요소
- 블록 레벨 요소: 웹페이지 상에 블록을 만드는 요소. 줄바꿈이 수행됨
- 인라인 요소: 항상 블록 레벨 요소 내에 포함되어 있음. 문장, 단어와 같은 작은 부분에 대해서만 적용될 수 있음. 작성한 단락 내에 위치
빈 요소
- 문서에 무언가를 첨부하기 위해 단일 태그를 사용
속성
- 요소에 실제로 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용
- 대표적인 예로,
<a>의 속성들을 보면 href와 title이 있음 <a href="https://mozilla.org/" title="The Mozilla hompage">href: 연결하고자 하는 웹 주소title: 링크에 대한 추가 정보. 마우스를 오버시키면 나타남target: 링크가 ‘어떻게’ 열릴지 지정. “_blank”를 지정할 경우 새 탭에서 실행됨(레퍼런스 참조)- Boolean 속성: 값이 없을 수 있음. 이름과 동일한 하나의 값만을 가질 수 있음.
<input type=”text” disabled=”disabled”>
구조
<!DOCTYPE html>: 유효한 문서 형식을 나타냄<html>: 최상위 루트 요소. 전체 페이지의 콘텐츠를 포함함.<head>와<body>의 부모<head>: 사용자에게는 보이지 않지만, 검색 결과에 노출될 키워드, 홈페이지 설명, CSS 스타일 등 HTML 페이지의 모든 내용을 담고 있음<meta>: 페이지 추가 정보<title>: 페이지 제목<body>: 페이지의 모든 콘텐츠 포함
- 페이지에 표시되지 않음
- 페이지에 대한 메타데이터 포함(메타데이터: 데이터의 데이터, HTML이라는 데이터를 설명하는 데이터)
<link>: css 파일 적용
<h1> ~ <h6>
- 구조화된 계층의 표현
- 검색 엔진들의 검색 순위에 영향
- 시각 장애인들을 위한 프로그램에서 heading을 읽어줌
Lists
- Unordered(순서가 없는) list: 항목의 순서가 중요하지 않은 항목.
<ul>,<li> - Ordered(순서가 있는) list: 항목의 순서가 중요한 목록.
<ol>,<li>
강조
- Emphasis: 강조의 의미.
<em> - Strong importance:
<strong>
CSS
HTML에 CSS 적용하기
- 외부 스타일 시트: .css 별도 파일이 작성되고, html
<link>요소에서 참조<link rel=”stylesheet” href=”~.css”>- CSS를 여러 페이지에 연결할 수 있으므로 가장 일반적이고 유용한 방법
- 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있음
- 내부 스타일 시트:
<head>안에<style>요소 내부에 CSS를 배치- 일부 상황에서만 유용
- 인라인 스타일 시트:
style속성 내에 포함된 한 요소에만 영향을 주는 CSS<p style=”color:red;”>테스트</p>
백엔드 개발자가 되자!