오랜만에 다시 돌아온 코드잇 학습일기~!
2월에 학습일기 챌린지에 참여해서 50,000 네이버 포인트를 받았다. 챌린지가 끝날 줄 알고 있었는데 3월에도 동일한 조건으로 학습일기 챌린지를 진행한다는 사실을 얼마 전에 알았다. 으아, 진작 알았으면 또 참여 하는건데 아쉽...ㅠㅠ
그래서 4월에도 챌린지를 하지 않을까 하는 기대와 그것을 준비하는 워밍업으로 3월 마지막주에 학습일기를 하나 써보기로 했다. 오늘 공부한 내용은 프론트엔드 과정 중 하나인 HTML 핵심 개념 토픽이다. 기초적인 내용이라 부담없이 복습하는 기분으로 듣고, 또 모르는 내용이 나오면 블로그에도 정리해두려고 한다.
HTML 의미
HTML은 Hypertext Markup Language의 약자이다. 첫번째 단어인 하이퍼텍스트(Hypertext)는 '서로 링크로 연결된 문서'라는 의미이다. 두번째 단어인 마크업(Markup)은 '표시하다'라는 뜻이며, 랭귀지(Language)는 '프로그래밍 언어'라는 뜻이다. 이를 해석하여 HTML의 의미를 생각해보면 아래와 같다.
- 서로 링크로 연결된 문서를 만들 때 사용함
- 내용 뿐만 아니라 추가적인 정보도 표시함
HTML 기본 문법과 구조
HTML에는 꺽쇠괄호라고도 하고, 홑화살괄호라고도 하는 '<'과 '>'로 감싸진 태그(tag)라고 불리는 것이 있다.
꺽쇠괄호 안에 있는 것을 태그 이름이라고 하며, 태그 중에서도 앞에 있는 것을 시작 태그, 뒤에 있는 것을 종료 태그라고 한다. 종료 태그 앞에는 슬래시(/)가 붙는다. 시작 태그와 종료 태그 사이에 내용이 들어가며, 시작 태그에는 속성이 함께 표시되기도 한다. 속성을 나타내는 문법은 속성 이름="속성 값"으로 표시한다.
<a href="naver.com"> 네이버 사이트 </a>
위의 코드에서 a는 태그 이름, href는 속성 이름, "naver.com"은 속성 값을 나타낸다. 참과 거짓을 값으로 하는 속성의 경우 속성 이름만 사용하는 방법도 있다. 속성 값이 참이면 속성 이름을 쓰고, 속성 값이 거짓이면 아예 아무것도 쓰지 않는다.
HTML 파일의 구조와 코멘트
HTML 파일의 구조는 아래와 같다. 코드를 작성할 때에는 보통 시작 태그와 종료 태그 위치를 맞추어 두칸씩 들여쓰기를 한다. 이러한 들여쓰기 방식은 코드를 읽기 편하게 만드는 역할을 하며, 우리가 보는 화면에 영향을 주지는 않는다.
<!DOCTYPE html> <!-- 이 문서가 html로 작성되었음 -->
<html> <!-- html 문서 전체를 감싸는 태그 -->
<head>
페이지에 대한 정보가 들어감
</head>
<body>
화면에 보이는 내용이 들어감
</body>
</html>
위의 코드 예시에서 <!-- 내용 --> 이라고 되어 있는 부분은 코멘트 부분이다. 웹사이트에 아무런 영향을 주지 않는다. 코멘트는 아래와 같은 상황에서 주로 사용한다.
- 메모를 남길 때 사용
- 코드를 잠깐 숨기고 싶을 때 사용
코멘트는 자주 사용하는 기능이므로 단축키도 함께 알아두면 좋다. 에디터 VS Code(=Visual Studio Code)에서 코멘트 사용 단축키는 해당 줄에 커서를 가져다 놓고 command + / 를 누르면 된다. (윈도우의 경우에는 Ctrl + /) 여러 줄을 선택하고 단축키를 누르면, 선택한 부분이 한꺼번에 코멘트 처리되고, 같은 키를 다시 누르면 코멘트가 해제된다.
오랜만에 퀴즈도 풀었다. 풀때마다 느끼는 거지만 코드잇 커리큘럼 중간에 나오는 퀴즈는 복습에 정말 유용하다.
코드잇 오늘 공부 인증을 마지막으로 학습일기 끝! 혼자서 들으면 하루에 5개 수업까지는 안 듣게 되는데, 챌린지 학습일기를 쓰기 위해서는 하루에 적어도 5개 이상의 강의를 수강해야 하기 때문에 확실히 더 공부가 되는 것 같다. 다음 달에도 챌린지를 했으면 좋겠다.
'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글
| 코드잇 학습일기 Day11. 텍스트 문서를 작성하는 데 필요한 태그들 (0) | 2023.04.05 |
|---|---|
| 코드잇 학습일기 Day10. 링크 상대 주소, url 프래그먼트, 새 탭 열기, URI 스킴 (0) | 2023.04.04 |
| 내용에 꺽쇠 기호(<>) 텍스트 넣는 방법 (0) | 2023.03.09 |
| 부모 속성을 상속하는 CSS 태그 모음 (0) | 2021.08.17 |
| CSS 우선 적용 순서 (0) | 2021.08.17 |
댓글