-
Web 프론트엔드 (3) / HTML과 태그, 실습해보기Programming/Web Programming 2023. 5. 3. 04:17
본격적으로 HTML과 CSS를 공부하며 프론트엔드 개발이 들어가보았다.
HTML과 CSS는 이전에 이미 강좌를 들었던 경험이 있어, 새로운 내용 위주로 글을 남겨본다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과바 1교시] HTML, CSS, JS 프론트엔드 속성 실무!
https://class101.net/ko/products/5f53ae772e3e0d001cd99667
[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교
📍웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 이런 분들이 개발자 사관학교를 수강하면 크게 도움됩니다! 1) 대체 뭐부터 개발해야할 지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작
class101.net
CHAPTER3 : 옷과 뼈대 = HTML, CSS
[1. 마크업 언어와 HTML 기본]
HTML이 해당되는 마크업 언어란 태그를 통해 데이터를 표현하는 언어를 의미한다. (태그 언어라고도 한다.)
태그는 < > 꺽쇠로 이루어져 있으며 이 안에 다양한 태그를 불러오고 속성을 추가함으로써
웹페이지의 골격을 구성할 수 있다. (즉, 뼈대의 역할을 담당한다.)
html에서는 기본 골격이 존재하고 그 안에 내용을 채워가는 방식으로 진행된다.
*간단하게 기본 골격을 불러오는 방법은 다음과 같다.
지난번에 만든 html 파일을 열었다.
그리고 html이라고 입력해주면 자동완성에 html:5가 나타난다.
html:5를 눌러준다.
-> html 5버전의 포맷을 자동으로 불러와준다.
불러와진 코드를 간단히 살펴보면 다음과 같다.
<!DOCTYPE html> : html 문서라는 것을 나타낸다.
<html lang="en"> : 주로 영어로 문서가 작성될 것을 나타낸다.
<meta charset="UTF"> : 웹사이트에서 한글을 보여줄 때, 깨지지 않도록 해준다.
<meta name="viewport"...> : 반응형 웹 (pc에서는 pc에 맞게, 스마트폰에서는 스마트폰 사이즈에 맞게 비율과 크기를
재구성하는 웹) 을 위한 기능
이 외에도 <mera og: ... > 태그도 head 태그 안에 들어가는 경우가 많다.
og태그 같은 경우, 데이터 추적과 핵심 정보 기재에 주로 사용된다고 한다.
이 부분에 대해서는 지금 정확히 잘 이해가 가지는 않아 이후 코드를 직접 써보면서
이해할 필요가 있을 것 같다.
<body></body>태그에는 주로 웹서비스의 디자인을 담당하는 코드들이 작성된다.
[2. 자주 사용되는 HTML 태그들]
HTML의 다양한 태그들로 웹사이트를 만들어보는 실습을 진행했다.
위와 같은 코드를 작성한 뒤. html 파일을 열어보면 다음과 같이 보여진다.
여기서 유의하며 볼만한 태그는 <div><div/> 태그이다.
<div> 태그는 단순히 글자가 쓰여진 부분만이 아닌, 웹페이지의 가로폭만큼 영역을 차지한다.
또한 컨테이너 태그로써 안에 다양한 다른 태그들을 담을 수 있다는 것도 특징이다.
div 태그는 css와 결합했을때 더욱 유용하게 쓰일 수 있다.
div태그가 어떤 영역을 차지하고 있는지 웹사이트 내에 개발자 도구에서 확인할 수 있다.
개발자 도구를 여는 방법은 다음과 같다.
맥OS: Cmd+Option+I
윈도우: F12
그러고 나면 좌측에 html코드가 나온다.
좀 더 한눈에 보기 위해 설정 탭을 눌러 창을 아래로 옮겨준다.
아래 표시된 선택 버튼을 누른뒤,
위에 웹페이지 속 구조를 살펴보고 싶은 부분 위에 올려두면
div 태그가 가로폭 가득차게 영역을 차지하고 있는 것을 볼 수 있다.
물론 div태그만 가로 영역을 모두 차지하는 것은 아니다.
h1~6태그들도 각각 영역을 차지하고 있다.
하지만 차별화되는 점은 div태그가 css와 함께 사용될때 더욱 두드러진다고 한다.
마지막으로 방금 짠 코드들을 vscode 내에 터미널을 통해 깃허브에 업로드해보았다.
(이미 폴더와 깃허브 Reporsitory를 연결해둔 상태이다. / 1편 참고)
맨 윗줄은 잘못 작성한 명령어이다. git add . -> git commit -m '전달할 메시지' -> git push origin master
을 입력하면 깃허브에 업로드가 된 것을 확인할 수 있다.
(브렌치 설정을 해주지 않아서 처음부터 master로 푸쉬되지 않을 것이라 생각했는데
처음에만 설정해주면 이후로는 문제없이 업로드가 되는 모양이다.)
html을 공부했었지만 역시 막상 쓰려고 하면 기억이 잘 나지 않는다.
이론보다는 만들고 싶은 프로젝트를 진행하며 하나씩 익혀보면 좋을 것 같다.
다음은 CSS로 넘어가 마저 공부해보자!
출처: 클래스101 / [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 프론트엔드 (5) / 부트스트랩 활용하기 (0) 2023.05.05 Web 프론트엔드 (4) / CSS 속성들과 Bootstrap 사용 (2) 2023.05.04 Web 프론트엔드 (2) / 웹 개발 이론 및 배포 과정 (0) 2023.05.02 Web 프론트엔드 (1) / Git Hub 환경 세팅 (0) 2023.05.01 CSS Tutorial (7) inheritance and z-index / CSS 시작하기 (7) 마지막 편 상속과 z-index (0) 2023.01.24