HTML(1)
2022, Aug 29
HAPPY WEB!
HTML -> 구조
CSS -> 표현
JavaScript -> 동작
HTML
웹 사이트와 브라우저
- 웹 사이트는 브라우저를 통해 동작함
- 브라우저마다 동작이 약간씩 달라서 문제가 생기는 경우가 많음(파편화)
- 해결책으로 웹 표준이 등장
웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- 어떤 브라우저든 웹 페이지가 동일하게 보이도록 한다.(크로스 브라우징)
HTML 이란?
Hyper Text Markup Language : 웹 페이지를 작성(구조화) 하기 위한 언어
Hyper Text : 참조(하이퍼링크)를 통해 사용자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
HTML의 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOCUMENT</title>
</head>
<body>
</body>
</html>
- html : 문서의 최상위(root)요소
- head : 문서 메타데이터 요소
- 문서 제목, 인코딩, 스타일, 외부 파일 로딩 등
- 일반적으로 브라우저에 나타나지 않는 내용
- body : 문서 본문 요소
- 실제 화면 구성과 관련된 내용
head 예시
<title>: 브라우저 상단 타이틀<meta>: 문서 레벨 메타데이터 요소<link>: 외부 리소스 연결 요소(CSS 파일, favicon 등)<script>: 스크립트 요소(JavaScript 파일/코드)<style>: CSS 직접 작성
요소(element)
<h1>contemts</h1>
- HTML 요소는 시작 태그와 종료 태그, 태그 사이에 위치한 내용으로 구성
- 요소는 태그로 내용을 감싸는 것으로 그 정보의 성격과 의미를 정의한다.
- 내용이 없는 태그들도 존재(닫는 태그가 없음)
- br, hr, img, input, link, meta
- 요소는 중첩될 수 있다.
- 요소의 중첩을 통해 하나의 문서를 구조화
- 여는 태그와 닫는 태그의 쌍을 잘 확인해야함
- 요류를 반환하는 것이 아닌 그냥 레이아웃이 깨진 상태로 출력되기 때문에 디버깅이 힘들어질 수 있다.
속성(attribute)
<a href(속성명)="https://google.com"(속성값)></a>
- 속성을 통해 태그의 부가적인 정보를 설정할 수 있음
- 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
- 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재한다.
- 태그와 상관 없이 사용가능한 속성들도 있음
- 모든 HTML요소가 공통으로 사용할 수 있는 대표적 속성
- id : 문서 전체에서 유일한 고유 식별자 지정
- class : 공백으로 구분된 해당 요소의 클래스의 목록(CSS, JS에서 요소를 선택하거나 접근)
- style : inline 스타일
텍스트 요소
<!-- a태그(anchor) 링크를 표현> -->
<a href="https://google.com">구글</a>
<!-- b태그(bold) -->
<b>굵은 글씨</b>
<!-- 강조 -->
<strong>강한 글씨?</strong>
<!-- i태그(italic) -->
<i>italic</i>
<!-- 기울임 강조 -->
<em>강한 글씨?</em>
<!-- heading -->
<h1></h1>
<h2></h2>
<h6></h6>
<!-- 줄바꿈 -->
<br>
<!-- 띄워쓰기 -->
<!-- img -->
<!-- alt는 대체 텍스트 -->
<img src="https://item.kakaocdn.net/do/2e134bd9f0af46e1e661fcf6240cfebfa88f7b2cbb72be0bdfff91ad65b168ab" alt="농담곰">
<!-- 문단 -->
<p>
문단
</p>
<!-- 수평선 -->
<hr>
<!-- ol(ordered list), ul(unordered list) -->
<ol>
<li>순서가 있음</li>
</ol>
<ul>
<li>순서가 없음</li>
</ul>
<!-- 인용문 -->
<blockquote></blockquote>
CSS
Cascading Style Sheet : 스타일을 지정하기 위한 언어, 위에서 부터 아래로 흐르면서 스타일을 입혀줌
CSS 구문
h1(선택자) {
color : blue;(선언)
font-size(속성): 15px;(값)
}
- CSS 구문은 선택자를 통해 스타일을 지정할 HTML 요소를 선택
- 중괄호 안에서는 속성과 값, 하나의 쌍으로 이루어진 선언을 진행
- 각 쌍은 선택한 요소의 속성, 속성에 부여할 값을 의미
- 속성(property) : 어떤 스타일 기능을 변경할지 결정
- 값(value) : 어떻게 스타일 기능을 변경할지 결정
CSS 기초 선택자
- 요소 선택자
- HTML 태그를 직접 선택
- 클래스(class) 선택자
- 마침표(.) 문자로 시작하며, 해달 클래스가 적용된 항목을 선택
- id선택자
#문자로 시작하며, 해당 아이디가 적용된 항목을선택- 일반적으로 하나의 문서에 1번만 적용
- 여러번 사용해도 동작하지만 단일 id 사용을 권장
CSS는 선택해서 스타일을 적용한다.
적용에는 우선순위가 있으며 같은 레벨이라면 나중에 ‘선언’된 것이 적용된다.
id, class, 태그는 서로 다른 레벨이다.
id > class > 태그 순으로 우선 순위를 가진다.
다만, 일반적으로 CSS 스타일링은 클래스로만 하고
id는 잘 활용하지 않으며 JS로 개발 시 보통 활용된다.
id는 문서에서 반드시 한번만 등장하는것이 관례이다.