1 . 기본 틀 만들기, 기본 동작
! -> 엔터 -> Emmet -> 기본 틀 출력
- <DOCTYPE html> : 문서의 html 버전을 브라우저에 알리는 역할, 현재 5
-> 문서 버전에 따라 페이를 해석하는 방법이 다를 수 있음
- <태그 속성="값"> => ex) <html lang="en">
-> 태그(tag) : 웹페이지의 구조와 의미를 나타내는 명령어 (html, head, body, h1, p, a, img, div, button, input 등)
-> 속성 : 태그에 추가 정보를 주는 것
- <head> : 문서의 정보, 웹페이지 설정 정보를 넣는 부분
- <meta charset="UTF-8"> : 한글, 영어 등을 정상 표시하기 위한 문자 인코딩 설정, 없으면 한글이 깨질 수 있음
- <title>Document</title> : 브라우저 탭에 표시되는 제목
- <body> : 실제 화면에 보이는 부분
-> 현재 비워져 있음(아무것도 출력 안 됨)
- </head> / </body> : / 로 열었던 <head> 혹은 <body>를 닫아줌
- Extentions -> Live Server 다운
=> HTML 파일을 진짜 웹사이트처럼 실행하고 자동 새로고침까지 해주는 도구
- 파일 실행 단축키 : Alt + L + O
- 주석문 : <!----> => Ctrl + /
=> 실제 화면에는 출력되지 않으나 파일 창을 열고 우클릭 소스보기를 누르면 주석문 내용이 나옴
- 주석문 색깔 바꾸기
=> setting -> Launch 검색 -> Edit in settings.json
-> "editor.tokenColorCustomizations": {"comments": "원하는 색 코드"}
- 문단 자동 정렬 : shift + alt + f (윈도우 기준)
- 대소문자 구분 X
2 . 태그
- 블록 태그 : 한 줄 전체를 차지, 줄 바꿈이 자동으로 발생
- 인라인 태그 : 내용만큼만 공간을 차지하며 줄 바꿈이 발생하지 않음 (일반 텍스트), 텍스트 꾸미는 용도
- 헤딩 태그 : 제목 태그, 블록 태그의 한 종류
2 - 1 . 제목 태그
- 웹페이지의 제목이나 소제목을 나타낼 때 사용
- <h1>이 가장 중요하고 크기가 큼
- <h6>로 갈 수록 중요도와 크기가 줄어듦
- 블록 태그
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
- 제목 태그를 사용해 <h1>부터 <h6>까지 작성한 코드
- <h1>부터 <h6>까지 파일로 실행한 결과
- 파일창 여는 방법
열린 파일창 => F12(개발자 모드) -> Elements -> 코드에 마우스 커서를 올리면 해당 코드 표시해 줌
or
열린 파일창 -> 원하는 코드에 우클릭 -> 검사 -> 개발자 모드에 들어가 해당 코드 표시해 줌
- Auto Rename Tag
=> Auto Rename Tag 다운 시 앞 태그 바꾸면 뒤 태그도 자동으로 바뀜
=> ex) <h1>만 적어도 </h1>도 적힘
2 - 2 . 문단 태그
- 텍스트를 일반 문단 형태로 표시할 때 사용
- <p></p>로 구성
- 블록 태그
- 문단 태그를 사용해 코드 작성
- 파일 실행 결과
=> <p>가 블록 태그이기 때문에 뒤의 텍스트인 '일반텍스트'도 자동 줄 바꿈
2 - 3 . 서식 태그
- 글자의 모양을 바꿀 때 사용 -> 굵기, 기울임, 밑줄 등
- p 사용
- <p></p>
- 굵은 글씨 표현 : <b></b> or <strong></strong>
- 밑줄 표현 : <ins></ins>
- 삭제 표현 : <del></del>
- 이탤릭체 표현 : <i></i> or <em></em>
- 서식태그를 활용해 코드 작성
- 파일 실행 결과
2 - 4 . 일반 텍스트
- 인라인 태그
- 그냥 텍스트만 작성하는 건 태그가 아니라 텍스트 노드임
- 하지만 화면에 표시될 때는 인라인처럼 동작함
- 줄 바꿈이나 공백을 사용할 수 있음
- 줄바꿈 : <br>
- 공백 삽입 :  :
- 구분선 표시 : <br>
- 일반 텍스트 작성
- 파일 실행 결과
3 . 리스트
3 - 1 . 순서가 없는 태그
- <ui> 사용
- 항목의 순서가 중요하지 않을 때
- <ui> : 목록 전체
- <li> : 각 항목(List item)
- 사용 형식
<ul>
<li></li>
<li></li>
<li></li>
. . . . .
</ul>
- 다른 방법
=> ui>li*3을 치고 Emmet하면 자동으로 생성
- 순서가 없는 태그 예제 코드
- 파일 실행 결과
3 - 2 . 순서가 있는 태그
- <oi> 실행
- 항목의 순서가 중요할 때 사용
- <li> : 각 항목(List item)
- 사용 형식
<oi>
<li></li>
<li></li>
<li></li>
. . . . . .
</oi>
- 다른 방법
=>oi>li*3을 치고 Emmet하면 자동으로 생성
- 순서가 있는 태그 예제 코드
- 파일 실행 결과
=> 1번부터 순서대로 출력되지만 시작 번호를 바꿔서 출력할 수 있음
3 - 3 . 설명 목록 태그
- <dl> 사용
- 용어와 설명을 짝으로 묶을 때 사용
- <dt> : 용어
- <dd> : 설명
- 사용 형식
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
. . . . . .
</dl>
- 다른 방법
=> di>dt+dd*3을 치고 Emmet하면 자동으로 생성
> : 자식
+ : 형제
* : 곱하기
- 설명 목록 태그 사용 예제 코드
- 파일 실행 결과
4 . 이미지
- html에서 이미지 넣을 때 사용
- <img> 태그 사용
- src : 이미지 파일 위치
- alt : 이미지가 안 보일 때 표시할 설명문
- <img> : 닫는 태그가 없는 빈 요소
- 인라인 태그
- 기본 문법
<img src="이미지 주소" alt="이미지 설명">
- 자주 사용하는 속성
- width="" : 크기 지정
- width="", height="" : 크기 지정
- title="" : 제목 표시
4 - 1 . 절대 경로
- 이미지의 전체 위치 작성 => 이미지의 인터넷 주소가 정확함
- 파일 경로로 삽입 시 파일 실행하면 사진 오류 발생
- 어디서든 같은 이미지 사용 가능
- 외부 서버에 의존함
- 인터넷 연결 필요
- 절대 경로 예시 -> 이미지가 저장된 파일 경로로 삽입
- 파일 실행 결과
- 절대 경로 예시 -> 이미지의 인터넷 주소로 삽입
- 파일 실행 결과
4 - 2 . 상대 경로
- 현재 HTML 파일을 기준으로 위치 지정
- 같은 폴더라면 파일 이름만 작성해도 됨
- 하위 폴더일 경우 : 파일명/사진명
- 상위 폴더일 경우 : . ./사진명
- 상대 경로 예시
- 파일 실행 결과
5 . 하이퍼링크
- 클릭해서 다른 페이지나 파일로 이동하게 함
- <a> 사용
- href : 이동할 주소 지정
- 링크 -> 절대 경로, 상대 경로 삽입
- 기본 문법
<a href="이동할 주소">링크글자</a>
- 절대 경로로 삽입
=> 2번째 코드 : 이미지도 같이 삽입
- 파일 실행 결과
=> 클릭 시 이동
- 상대 경로로 삽입
=> 1번째 코드 : 상위 폴더로 이동
=> 2번째 코드 : 하위 폴더로 이동
- 파일 실행 결과
=> 클릭시 이동
6 . css
- CSS(Cascading Style Sheets)
- HTML 요소의 색상, 크기, 글꼴, 배치, 여백 등을 꾸미는 언어
- 대소문자 구별하지 않음
- <head>에 작성함
- 선택자 : 어떤 HTML 요소에 스타일을 적용할지 지정
=> ex) h1, p, body 등
- CSS 적용 방법
1 . 인라인 방식 : 태그 안에 직접 작성 -> 자주 사용하지 않는 방식
=> ex) <h1 style="color:red;">제목</h1> ====> h1 선택, 글자를 빨간색으로 바꿈
2 . 내부 스타일 : <style> 태그 사용해 css를 작성하는 방식
3 . 외부 스타일 : css 코드를 별도의 .css 파일에 작성, HTML 문서에서 link 태그로 연결하는 방식 -> 가장 많이 사용
=> <link rel="stylesheet" href="파일이름.css">
- 기본 문법
선택자 {
속성 : 값;
}
- 인라인 스타일 예제 코드
- 파일 실행 결과
=> 출력문(안녕하세요 css입니다.)의 글자색을 노란색으로 변경
- 내부 스타일 예제 코드
=> body : <body> 코드 <h1>CSS란?</h1>
=> h1 : <h1>CSS란>?</h1> 의 출력문 CSS란?
- 파일 실행 결과
=> 배경색을 파란색으로 변경, 글자색을 흰색으로 변경, 글자 정렬을 가운데로 함
- 외부 스타일 예제 코드
- href="이동할 주소" : 다른 폴더에 새 css 만듦
=> p의 글자색을 흰색으로 변경하고 기울임 꼴로 변경
- 파일 실행 결과
=> 글자색을 흰색으로 변경했지만 실행 결과 색이 이전에 인라인 스타일로 실행한 결과가 남아있음
=> 글자의 기울임 꼴 만 변경 됐음
=> 먼저 실행된 결과가 우선순위임 (덮어쓰기 개념)
7 . 선택자
- 어떤 HTML을 꾸밀지 고르는 방법
- HTML : 대상, CSS : 선택자가 지목하는 방법
7 - 1 . 태그 선택자
- HTML 태그 이름 자체로 선택하는 CSS
=> h1 태그를 달고 있는 글자의 색을 deepskyblue로 바꾸고 글자를 가운데로 정렬
7 - 2 . 클래스 선택자
- 클래스 여러 개를 한 번에 지정 가능
- 클래스 표시 => .
=> intro : class 이름
=> class intro에 있는 글자 크기를 굵게 변경, 글자색을 deeppink로 변경
7 - 3 . 아이디 선택자
- 아이디 표시 => #
- 아이디는 하나만 존재
=> favorite-list라는 아이디의 배경색을 아이보리로 변경, padding을 10픽셀로 변경
- 기본 16px
- padding : 내용과 테두리 사이의 공간
7 - 4 . 그룹 선택자
- 여러 선택자를 한 번에 묶어서 같은 스타일을 적용
- 쉼표 사용으로 선택자 구분
=> 2개의 선택자 p, li 안의 글자 사이즈를 20px로 조정
7 - 5 . 클래스 선택자 (여러 태그 중 하나만 선택)
- HTML요소에는 클래스가 여러 개 붙을 수 있음
- 그 중 하나만 선택할 수도 있음
=> bluecolor 클래스의 글자를 파란색으로 변경
=> highlight 클래스의 글자를 기울임 꼴로 변경
7 - 6 . 의사 클래스 선택자
- HTML 요소의 특정 상태나 조건을 선택할 때 사용
- 조건에 따라 스타일 적용하는 것
- 선택자:의사클래스 {속성: 값;}
=> 마우스를 링크 a 위에 올렸을 때 링크의 모양을 변경
-> 색깔은 연두색으로 변경
=> :hover => 가상 클래스를 뜻함(마우스를 요소 위에 올려놓은 상태)
7 - 7 . 속성 선택자
- HTML 요소의 속성 값을 기준으로 요소를 선택하는 방법
=> h1 중에서 타이틀이 제목인 값의 배경색을 아이보리로 변경
7 - 8 . 자식 선택자
- 기호 >를 사용함
- >를 사용해 자식임을 나타냄
=> ul 아이디 favorite-list의 자식인 li의 리스트 스타일 타입을 네모로 변경
7 - 9 . 자손 선택자
- 자식 포함
- 공백 사용
- ul#favorite-list 공백 p => 공백의 의미 : 자손
=> ul 아이디 favorite-list의 자손인 p의 값들의 색을 바이올렛으로 변경, 글자도 굵게 변경
7 - 10 . 형제 선택자
- 같은 부모를 가진 요소들 사이의 관계
- 바로 옆에 있는 형제 선택 => +로 연결
- 일반 형제 선택 => ~로 연결
=> p 클래스 intro와 바로 옆 형제 p의 배경색을 아쿠아로 변경
'web' 카테고리의 다른 글
| Git (0) | 2026.06.15 |
|---|---|
| JavaScript - 1 (0) | 2026.06.15 |
| HTML, CSS - 3 (0) | 2026.06.13 |
| HTML, CSS - 2 (0) | 2026.06.11 |
| 1 . 웹, 웹 서비스 (0) | 2026.06.10 |