안녕하세요, 신입부원 한승훈입니다.
만나서 반갑습니다.
기초 스터디로 여러분을 만나뵙게 되어 영광이고, 현재는 아는 것이 적지만 최선을 다해서 함께 공부하겠습니다.
섹션 0.강의소개 & 개발환경 구성
섹션 0은 강의에 대한 설명, 즉 강의에 대한 설명과 VS Code 를 사용하는 것에 대한 강의였습니다.
이전에도 python에 VS Code를 사용하긴 했지만, 보조 툴을 설치하며 보다 편리하고 가독성이 좋은 환경을 구축하였습니다.
섹션 1. HTML이란? 시작하기 전에!
코드 자동완성 시스템은 Emmet에 대한 학습이 주를 이루었습니다.
.html파일로 저장한 뒤, !+Tab으로 맨 위 <!DOCTYPE html> 부터 마지막 </html>까지 자동 완성이 되었고,
<body>
이렇게 두 body 사이에 본문을 입력할 수 있고,
</body>
Live Server를 통하여 입력한 내용을 chrome에서 실시간으로 확인할 수 있었습니다.
정말 신기해요!
그래서, HTML은 뭔가요?
많은 분들이 HTML의 뜻이 뭔지 궁금해 하시는데요,
오늘 블로그를 통해서 궁금증이 해소되었으면 좋겠습니다.
HTML에 대해 알아보기에 앞서, 마크업에 대해 알아보아요~!
마크업이 무엇일까요?
마크업은 바로~!
문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다.
라고 하네요.
마크업에 대해서 왜 알아봤냐구요?
HTML은 Hyper Text Markup Language의 약자입니다.
Hyper는 강력하다는 의미를 부여하고,
말 그대로 텍스트의 마크업, 즉 데이터의 논리적 구조를 명시하는 언어라고 할 수 있겠습니다.
이 점에서, 프로그래밍 언어와 차이를 둘 수 있겠습니다.
섹션 2,3. HTML 학습하기
이 부분부터는 HTML 태그들에 대한 실습이 이루어졌습니다.상당히 많은 태그들이 존재하고, 정말 모든 공간에 활용이 되어 이것을 모두 암기하기 어려울 거 같은데요!
이것에 대해 고민하던 순간, 강의하시는 분이 이것은 다연스럽게 익숙해질 것이니 지금부터 억지로 암기할 필요는 없다고 하셨습니다.
이렇게 말씀해주신 짐코딩 님에게 감사를 표합니다.
이후 섹션들에서 배운 태그 중, 기억에 남는 것들을 같이 살펴봐요!
1. <h1> </h1> 가장 큰 제목으로 변환시켜주는 태그입니다. headline에서 따왔다고 생각하고 외웠네요.
<h6>까지 태그가 존재하며, 숫자가 커질수록 출력되는 제목 자체는 작아집니다.
2.다음은 본문 태그입니다.
문단 구분 시 <p> 태그를, 줄 바꿈시 <br>태그를 사용합니다.
p는 아마 paragraph에서 온 거 같고 br은 짐작이 잘 가지 않네요.
3.<hr>
수평줄을 생성하는 태그입니다. horizontal에서 가져온 거 같네요.
주제가 변경될 때 사용해줍니다.
4.강조
<strong>,<b>가 있습니다.
출력된 화면을 보는 입장에서는 똑같아 보입니다.
하지만, <b>와 다르게 <strong>에는 실제로 중요한 의미다!라고 강조하는 기능이 포함되어 있습니다.
그게 어디 쓰이는데? 라고 물어보신다면
소리내어 읽기 시스템과 같은 상황에서 강세에 차이를 둔다고 하네요.
5.이텔릭체
<em>, 그리고 <i>가 있습니다.
이것 또한 둘 다 외관은 같지만, 중요성이 있음을 나타낼 떄에는 <em>을 사용해주면 됩니다.
6. 목록 태그
<ul>, <ol>, <li>가 존재합니다.
<ul> unordered list, 즉 순서 없이 리스팅이 됩니다.
<ol>은 ordered list, 즉 넘버링이 됩니다.
7.표 태그
<table>표를 만들 때 사용합니다.
<tr> 행을 추가합니다.
<td> 열을 추가합니다!
<col>닫는 태그를 사용하지 않으며, style적용이 가능합니다.
<colgroup>열을 묶어 스타일을 지정합니다.
기억에 남는 태그들은 이정도인 것 같습니다.
영양가가 없어 제가 쓰고 나서도 많이 부끄러운 블로그인데요, ...
다음에는 더 유익한 내용 가져오겠습니다.
감사합니다.
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 기초 스터디] 박승환 #1주차 - 웹 씨앗을 심었다!(HTML 배우기) (1) | 2023.04.06 |
|---|---|
| [2023 신입부원 기초 스터디] 정찬우 #1주차 - HTML은 즐거워...?? (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 조상혁 #1주차 - HTML알아가기 (0) | 2023.04.06 |
| [2023 신입부원 심화 스터디] 정호용 #1주차 - Part 1. (0) | 2023.04.06 |
| [2023 신입부원 심화 스터디] 황현진 #1주차 - 기초문법 part.1 (0) | 2023.04.06 |
