오늘 배운 내용 요약
- VScode와 IDE의 차이점
- HTML 속성 및 프로퍼티의 차이점
- HTML의 기본 구조 및 주요 태그
- Favicon과 OG Tags 설정법
- Git에서 기본 브랜치 설정 및 push 명령어 사용법
<b>와 <stron>의 차이가 뭐였는지 생각이 안났다
단순 굵게 하는것과 강조의 차이!! 기억하자
favicon과 og tag 실습 어렵지않겠지 했다가 된통 당함..
집중하자 집중!!
1. VScode와 IDE 차이점
VScode: 텍스트 편집기. 기본적으로 코드 작성, 수정 및 플러그인 추가 기능을 제공
코드 자동완성, 오류 탐지 등 기본적인 기능 지원
IDE: 코드 작성 뿐만 아니라 디버깅, 빌드, 배포 기능 등을 갖춘 통합 개발 환경
예시: IntelliJ IDEA, PyCharm, Eclipse 등
2. HTML 기본 구조
HTML은 웹 페이지를 만들 때 사용하는 마크업 언어
<head>: 웹 페이지 메타데이터 정의 (화면에는 보이지 않음)
- 페이지의 제목, 외부 스타일시트 및 스크립트 파일, SEO 태그 등
<body>: 웹 페이지의 실제 콘텐츠
- 사용자에게 보이는 부분.
3. HTML | 속성 (Attributes) vs 프로퍼티 (Properties)
Attributes: 주로 어떤 객체나 사물의 특징이나 성질을 나타낼 때 사용 -> "키"
- 예시: src, href, alt, class, id 등.
Properties: 일반적으로 어떤 것이 가진 고유한 특성이나 속성을 나타낼 때 사용 -> "value"
- 예시: element.src, element.alt 등.
4. 주요 글로벌 속성
class: 요소를 분류하거나 그룹화하는 데 사용 - 0개 이상의 공통 스타일을 적용하거나 여러 요소에 같은 스타일 지정할때 사용됨id: 페이지 내에서 요소를 고유하게 식별 - 유일해야한다style: 인라인 CSS 스타일을 적용할 때 사용 - 꾸며준다
5. 주요 HTML 태그
<span>: 인라인 요소로, 다른 요소와 함께 사용되며 크기만큼만 공간을 차지함<b>: 텍스트를 굵게 만듦 (단순한 스타일링)<strong>: 텍스트를 강조하여 의미적으로 중요한 정보를 전달 (스크린 리더 및 SEO에도 영향 있음)<ul>: 순서 없는 리스트 (bullet points)<ol>: 순서 있는 리스트 (numbered list)<img>이미지를 삽입할 때 사용.
- src: 이미지의 경로
- alt: 이미지가 로드되지 않을 때 보여줄 설명.<a>: 하이퍼링크를 정의.
- href: 링크 주소.<form>: 사용자가 데이터를 입력할 수 있음 서버로 데이터를 전송할 때 사용<input>: 텍스트 필드, 체크박스 등 다양한 입력 필드.<button>: 버튼을 생성합니다.
6. Git 명령어
git push -u origin main
-u: 기본 원격 브랜치를 설정하여, 이후 git push나 git pull 시 브랜치를 명시하지 않아도 기본 브랜치가 사용됨
git log: 커밋 로그 확인
7. Favicon, OG Tag(Open Graph Tags)
Favicon: 웹사이트의 아이콘, 웹 브라우저 탭에 표시됩니다.
OG 태그: 링크를 공유할 때 미리보기 정보를 제공하는 메타 태그
