- 웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.
- HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.
- HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.
- CSS 기본 개념을 활용하여 페이지의 레이아웃을 구성하며 요소에 스타일을 입힐 수 있다.
- Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.
HTML (Hypertext Markup Language) 간단한 상식 정리 ❤️
구체적인 뜻을 아는것도 좋지만, 말로 설명해보자.
-> html이라는 문서를 컴퓨터가 알아들을수 있는 언어를 사용하는것!!
- heading, heading = 제목
- h1 ~ h6 제목을 나타내는 h7태그는 없다!
- HTML의 줄바꿈은 br태그를 사용한다 (시작과 동시에 끝나는 태그)
- 단락을 표현할 때 쓰는 태그는 p : paragraph (단락)
- p태그 >>>>> br태그
- p태그는 정보로써 더 가치있게 만들어준다.
- p태그 위쪽에 여백을 주고 싶으면
<p style="margin-top: OOpx";>코드 사용
- 이미지 포함 태그 :
<img src="파일이름.jpg" width="100%">
부모태그 : <ul>, <ol> , 자식태그 <li>
<ul> : unordered list, 번호 리스트를 쓰지 않을 때 사용해도 좋음.
<ol> : ordered list, 번호가 1억개라도 번호 수정에 용이함.
<!DOCTYPE html>
HTML 파일이라면 제일 첫 줄에 꼭 !!! 위치해야 하는 선언문
모습은 태그와 비슷하지만 HTML태그는 아니다.
HTML5 버전을 사용한다는 의미이다.
<head>에 들어가는 기본 내용에 대하여 🙋🏻♀️
- 그 아래
<meta charset="utf-8">꼭 사용!
(한글, 중국어, 일본어가 포함된 페이지라면 utf-8이라는 값으로 인코딩 추가 필수!)
<meta name="viewport" content="width=device-width">
디바이스 가로 크기가 곧 웹 패이지의 가로와 같다는 의미.
- 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보.
해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상.
<title>repl.it</title>
브라우저 탭에 보이는 페이지 이름
<link href="index.css" rel="stylesheet">
(index.css 파일 호환해서 리팩터링 효과적 !)
<head>, <body>= 고위직 태그,<html>= 최고위층 태그
<!DOCTYPE HTML>
<html>
<head>
<title>제목</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
링크 걸 때는<a>태그 사용!
<a href="페이지 주소">클릭 하기 전에 툴팁처럼 무엇인가 알려주고 싶을 때 :
<a 태그 안에 target="_blank" title="쓰고싶은 제목">
코딩하면서 기록하는 메모장 ᰔ