웹: 개발의 기초 (입문)
웹 브라우저: 사이트에 접속할 수 있게 도와주는 것
서버 클라이언트: 웹 브라우저의 작동 원리
서버: 주는 쪽
클라이언트: 받는 쪽
(F12를 이용해 코드를 수정하면 내 사이트에서만 코드가 변경됨)
라이브러리: 누군가 이미 만들어 놓은 것
VSC(Visual Studio Code)를 사용하는 이유:
코드를 더 편리하게 사용하기 위함
보고서를 메모장보다 워드 등을 사용하는 것처럼
HTML: 보여주는 것
CSS: 꾸며주는 것
엘리먼트: <></>
여는 태그: <>
닫는 태그: </>
<head></head>태그: 파비콘과 제목이 삽입됨
*파비콘: 웹사이트 제목 좌측에 있는 이미지
<body></body>태그: 뼈대, 각종 태그, 자바스크립트와 css가 입력됨
스타일 생성하는 방법
(여는 태그에) 클래스 또는 아이디 생성
→ 스타일 태그 생성
위치는 상관 없음
엘리먼트만 있으면 됨
→ 스타일 설정
// 1. 클래스 생성
<div class="eun-dong"></div>
// 아이디는 <id="eun-dong"> 이렇게
<style>
// 2. 스타일 태그 생성
.eun-dong {
// 3. 스타일 설정
background-color: #fff;
color: #000;
border-radius: 50%;
}
</style>
★문장 끝에 세미콜론(;) 필수 ★
<h1> ~ <h6>: 제목 태그 (header)
숫자가 커질수록 글자 크기는 작아짐
글자 크기를 목적으로 사용하면 안됨
<p></p>: 단락 태그 (paragraph)
<br>, <br/>: 줄바꿈 태그 (break)
닫는 태그는 없음
요즘은 <br>를더 많이 씀 → 챗gpt 가 말해줌
<hr>: 수평줄 태그 (horizontal)
<strong></strong>, <b></b>: 볼드체
<strong>: 경고 or 주의사항
<b>:글자 굵게 (bold)
<i></i>: 이텔릭체 (italic: 서양 활자체)
<mark></mark>: (노란색) 형광펜 효과
<blockquote>, <q>: 인용 내용 (blockquote: 인용구)
<blockquote>: block요소, 들여쓰기, 긴 인용에 사용
<q>: inline요소, 앞 뒤로 "" 출력, 짧은 인용에 사용
<q>태그 내 <blockquote>태그 사용 x
<ul></ul>: 순서가 없는 아이템을 감싸는 태그 (unordered list)
list-style 모양을 수정하거나 없애려면 css의 list-style 수정
<ol></ol>: 순서가 있는 아이템을 감싸는 태그 (ordered list)
<ol type = "속성 값">
속성값의 종류:
숫자 (1, 2, 3...)
영어 대문자 (A, B, C...)
영어 소문자 (a, b, c...)
아라비아 숫자 대문자 (I, II, III...)
아라비아 숫자 소문자 (i, ii, iii...)
<dl></dl>: 데이터 목록 (definition list)
<dt></dt>: 정의 (definition term)
<dd></dd>: 설명 (definition description)
<a href = "url 주소">텍스트</a>: 링크 태그 (anchor)
<div></div>: 분할 태그 (division)
'내일배움캠프 > 내배캠_ [왕초보] 웹개발 종합반' 카테고리의 다른 글
| [왕초보] 웹개발 종합반 5주차 (0) | 2024.06.24 |
|---|---|
| [왕초보] 웹개발 종합반 4주차 (1) | 2024.06.21 |
| [왕초보] 웹개발 종합반 3주차 (0) | 2024.06.21 |
| [왕초보] 웹개발 종합반 2주차 (0) | 2024.06.20 |