✨ HTML 기본 태그
<h1>~<h6>- 제목 및 부제목
<a>- <a href=”페이지 URL”> Contents 형식으로 링크 이동
<p>- Paragraph의 약자로 본문 내용을 표현
<ol>,<ul><ol>은 순서가 있는 리스트<ul>은 순서가 없는 리스트<li>~</li>로 각 리스트 항목 생성
- 시맨틱태그
<strong>과<b>,<em>과<i>는 시각적인 차이가 있는 것은 아니지만 의미적인 차이가 있음
✨ 문서 기본 구조 잡기
<!DOCTYPE html>: 이 문서가 HTML5 문서임을 정의<html>: HTML 페이지의 루트 요소<head>: HTML 페이지에 대한 메타 정보 포함<meta>: 문자 집합, 페이지 설명, 키워드, 문서 작성자, 뷰포트와 같은 설정을 지정<title>: 브라우저의 제목 표시<body>: 본문을 의미하며 모든 내용을 담는 컨테이너- VScode에서 ! 입력 시 기본 구조 불러옴
<header>,<main>,<footer><article>- 반드시
<h>태그가 안에 함께 쓰여야 함(웹 표준)
- 반드시
<section>- 헤더에 id와 a href를 활용해서 북마크 구현하기
<header style="background-color:white">
<ol>
<li><a href="#01">1주차 바로가기</a></li>
<li><a href="#02">2주차 바로가기</a></li>
</ol>
</header>
<div>
<section>
<article id="01">
<h2>1주차. 웹 시작</h2>
</article>
<article id="02">
<h2>2주차. HTML/CSS 기초</h2>
</article>
</section>✨ CSS 기본
- CSS 적용 방법
- 인라인 스타일 (Inline Style)
- 각 HTML 요소에 style 속성을 사용하는 형태
- 내부 스타일 (Internal Style)
- HTML 문서의
<head>태그 내부에<style>태그를 사용하는 형태
- HTML 문서의
- 외부 스타일 (External Style)
-
.css 파일 따로 생성해
<head>태그 내의<link>태그에 불러오는 형태<head> <link rel="stylesheet" href="style.css"> </head>
-
- 인라인 스타일 (Inline Style)
- CSS 작성 방법
- 선택자: 어떤 요소에 스타일을 적용할지 선택
h1 { color: red; background-color: yellow; }
- 선택자: 어떤 요소에 스타일을 적용할지 선택
-
CSS 선택자
- 태그 선택자: h1, body 등
- id 선택자: #id
- class 선택자: .classname
- 자식 선택자
.classname ol: 해당 클래스 하위에 있는 모든 ol에 적용#id>ol: 해당 id의 직계자식인 ol에만 적용 (깊이가 1만 차이나는 경우)
-
캐스케이딩: 선택자의 우선순위를 매기는 기준
- 순서: 나중에 작성한 속성값의 우선순위가 높음
- 디테일: 더 구체적으로 작성된 선택자의 우선순위가 높음
- 선택자: style(inline) > id > 클래스 > 요소 ( 자식 > 부모 ) > 전체
✨ CSS로 레이아웃 잡기
-
블록(Block)태그와 인라인(inline) 태그
- 블록 태그는 항상 새 줄에서 시작하고 가능한 전체 너비를 차지
<h1>~<h6>,<p>,<ul>,<ol>,<li><div>: 블록 단위 공간을 구분 및 블록 스타일 지정 가능- width, height, padding, margin 적용 가능
- 인라인 태그는 새 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지
<a>,<em>,<img>,<strong><span>: 인라인 단위 공간 구분 및 텍스트부분 스타일 지정 가능
- 블록 태그는 항상 새 줄에서 시작하고 가능한 전체 너비를 차지
-
마진 병합 현상
- 인접하는 블록태그가 각각 margin-bottom과 margin-top 속성을 가지고 있을 때 큰 값으로 병합되는 현상
- top ↔ bottom 끼리만 병합현상이 일어남 (좌우 마진의 병합은 일어나지 않음)
- 자식 블록에 margin을 설정하는 경우, 부모 블록 안에서 margin이 생기는 것이 아니라 부모 요소도 같이 이동함
-
display
- 블록 태그와 인라인 태그의 성격을 바꿀 때 사용
- inline: 블록 요소를 인라인 요소로
- block: 인라인 요소를 블록 요소로
- inline-block: x축으로 정렬된 블록 요소로
-
float
- 블록/인라인에 상관없이 왼쪽 혹은 오른쪽으로 정렬
- float: left;
- float: right;
-
clear
- float 속성을 쓸 경우, 그 아래에 작성된 요소들은 띄워져있는 float 요소들의 뒤로 배치가 된다.
- 그래서 하단에 배치하고자 float을 멈추고자 할 때 clear 사용
- clear: both;
-
브라우저의 기본 공백 제거
- html, body 속성은 디폴트로 margin과 padding 값을 가지고 있으므로 아래 코드 작성을 통해 초기화해주어야 한다. 혹은 * 선택자를 사용해 모든 html 태그를 초기화해준다.
html, body{ margin: 0; padding: 0; }
- html, body 속성은 디폴트로 margin과 padding 값을 가지고 있으므로 아래 코드 작성을 통해 초기화해주어야 한다. 혹은 * 선택자를 사용해 모든 html 태그를 초기화해준다.
https://github.com/jiyehyeon