📌 백엔드 공부를 하다보니 포트폴리오를 채워야 한다는 압박감에 사로잡히는게 일상이 되었습니다.
몇 번씩이나 팀 프로젝트가 어긋나다보니 개인적인 욕심이 생기더라고요.
'화면 구현부터 스스로 해보자.'
이 결심이 어떤 방식으로 제 인생에 독특한 얼룩을 새겨줄지 한 치 앞을 알 수 없으나
그래도 시작해보려합니다.
✅ HTML 시작 전
- Visual Studio Code와 Codesandbox를 함께 사용해보고자 합니다.
- codesandbox.io
- codesandbox에 가입 후 create a new sandbox를 누르면 새 프로젝트를 생성할 수 있습니다.
✅ HTML 기본 태그
- html5까지 입력 후 enter키나 tab키를 사용하면 다음과 같은 코드블럭이 형성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
- <!DOCTYPE html> : 이 문서는 html 파일이다.
- <html lang="en"> : language = english이다. (한국어의 경우 lang="ko"로 표기)
- </html> : html 파일은 기본적으로 여는 태그와 닫는 태그로 구성되어 있다. 역슬래쉬가 포함된 행은 해당 헤더나 바디 부분, 혹은 파일 자체를 닫는 태그이다.
- <title>Document</title> : 페이지 제목은 Document이다.
- <meta>
◾charset="UTF-8"> : body에 나타난 것들은 UTF-8 인코딩 방식을 가지고 있다.
◾name : 메타 정보 (author, keywords, description 등)
◾viewport : 반응형 웹 관련 태그로 viewport란 화면에서 실제로 보여지는 영역. 확대 및 축소시 화면이 깨지기 때문에
기본적으로 설정해 놓은 것
◾device-width : 해당 기기의 초기 너비
◾initial-scale : 초기의 확대값 (1.0 = 100%)
'코딩하는 코커두드 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [CSS] CSS 단위 이해와 색상표기 (0) | 2024.07.25 |
|---|---|
| [CSS] CSS 입문 (0) | 2024.07.25 |
| [HTML] HTML 추가로 알아두면 좋은 개념들과 이미지 (1) | 2024.07.25 |
| [HTML] HTML 기본 태그들 (입문기 3) (0) | 2024.07.23 |
| [HTML] HTML 기본 태그들 (입문기 2) (0) | 2024.07.17 |
