💻 웹사이트
웹 브라우저 통해 접속하는 웹페이지들의 모음
링크를 통해 여러 웹 페이지를 연결한 것이 웹 사이트
💻 HTML
Hyper Text Markup Language
웹 페이지의 구조를 잡는 것
- HyperText
참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 - Markup Language
태그 등을 이용해 문서나 데이터의 구조를 명시하는 언어
웹 페이지를 구조화 하기 위한 언어
💻 HTML 기본 구조
html
문서의 최상위(root) 요소
head
문서 메타데이터 요소
문서 제목, 인코딩, 스타일, 외부파일 로딩 등
일반적으로 브라우저에 나타나지 않는 내용
<head>
<title>HTML 수업</title>
.
.
</head>body
문서 본문 요소
실제 화면 구성과 관련된 내용
요소
여는 태그와 닫는 태그
태그와 내용(contents)로 구성
열었으면 닫아야 하고, 모든 내용은 태그로 감싸져 있어야 한다
- HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성
태그는 컨텐츠 내용 감싸는 것으로 정보 성격과 의미 정의 - 내용이 없는 태그들
br(줄바꿈), hr, img, input, link, meta - 요소는 중첩될 수 있다
요소 중첩 통해 하나의 문서를 구조화
여는 태그와 닫는 태그의 쌍을 잘 확인해야함
오류를 반환하는 것이 아닌 그냥 레이아웃 깨진 상태로 출력되기 때문에, 디버깅이 힘들다
속성(attribute)
각 태그별로 사용할 수 있는 속성 다르다
속성 = 속성명+속성값
- 속성을 통해 태그의 부가적 정보 설정
- 요소는 속성 가질 수 있고, 경로나 크기와 같은 추가적인 정보 제공
- 요소 시작 태그에 작성하며 이름과 값이 하나의 쌍으로 존재
- 태그 상관없이 사용가능한 속성도 있음
💻 CSS
스타일을 지정하기 위한 언어
선택하고 스타일을 지정한다
- CSS 구문은 선택자를 통해 스타일을 지정할 HTML 요소 선택
- 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
CSS 정의 방법
- 인라인
<h1 style="color: blue; font-size: 100px;"></h1>- 내부 참조
- 외부 참조
CSS 적용 우선순위
<p class="blue green">3</p>
<p class="green blue">4</p>
.blue {
color: blue;
}
.green {
color: green;
}위에서 두 p 태그는 모두 그린
css에서 green이 더 나중에 작성되었기 때문
CSS 상속
CSS는 상속을 통해 부모 요소 속성을 자식에게 상속한다
- 속성(프로퍼티) 중에는 상속이 되는 것과 되지 않는 것들이 있다
/* 자식 결합자 */
/* 자식만 결합 */
.box > p {
font-size: 30px;
}
/* 자손 결합자 */
/* 아래 모든 자식 결합 */
.box p {
color: blue;
}