HTML이란?
웹사이트의 모습을 기술하기 위한 마크업 언어입니다.
프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함합니다. 보면 아시겠지만 애초에 이름인 HTML의 ML이 마크업 언어라는 뜻입니다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서입니다.
HTML을 공부할 때 필요한 준비물
바로 비쥬얼 스튜디오(visual studio code)입니다. 비쥬얼 스튜디오는 마이크로소프트에서 개발한 텍스트 에디터로, 2015년 4월 29일에 소개되고 2016년 4월 15일에 1.0.0 정식판이 발표되었습니다. Electron 프레임워크를 기반으로 만들었습니다. Visual Studio Team Services(현 Azure DevOps)에 있던 웹 에디터를 발전시켜 Electron 프레임워크를 통해 로컬에서 쓸 수 있게 만든 것에서 출발했습니다. MS의 개발 툴 중 최초로 크로스 플랫폼을 지원하는 에디터이며 윈도우, macOS, 리눅스를 모두 지원합니다.
비쥬얼 스튜디오를 사용하는방법
아래 주소에서 프로그램을 다운로드해서 설치해주세요.
https://code.visualstudio.com/
바탕화면에 web이라는 이름의 폴더를 만들고
이 폴더를 Visual Studio Code로 열어주세요.
그럼 일단 코딩할 준비가 끝난 겁니다.
잘 되는지 확인해 볼까요?
먼저 내용을 입력하고
자기가 만든파일을 웹브라우저로 열어봅시다.
웹브라우저에서 아래와 같은 단축키를 눌러보세요.
- 윈도우 : Ctrl + O(알파벳)
- 맥 : Cmd + O(알파벳)
그럼 이렇게 파일선택 화면이 나올겁니다.
여기서 자기가 만들어둔 파일을 선택하면 자기가 아까 작성한 내용이 웹브라우저를 통해서 창이 뜰겁니다.
내가 이번에 배운 것
제가 이번에 배운 것은 <strong> 태그와 <u> 태그입니다. 이 두 태그의 공통점은 자신이 작성한 글 내용에 일부불을 이 태그들로 감싸면 글이 강조된다는 것입니다. 예를들어 이렇게요.
이렇게 비쥬얼 스튜디오에 Hello World라고 쓰고 이 파일을 실행해 본다면 이렇게 잘 쓰여질 겁니다. 하지만 여기서 이 글을 강조하고 싶다면 특히 이 글의 두께를 두껍게 하고 싶다면, <strong> 태그로 글을 감싸보세요. 그러면 어떤 일이 일어나냐면
이렇게 글씨체가 두꺼워집니다. 강조가 되죠? 하지만 글씨체를 두껍게 하는거 말고 다른 방법으로 강조하고 싶은 사람들도 있을겁니다. 예를 들어 밑줄을 친다던가요. 그럼 밑줄은 어떻게 그을 수 있을까요? 바로 <u> 태그로 글을 감싸는 것입니다. 그럼 바로 <u>태그를 사용해 보겠습니다.
짜잔 이렇게 글에 밑줄이 그어졌죠? 하지만 여기서 더 강조를 하고싶다. 그렇다면 태그에 특성을 이용하면 됩니다. 이 <strong> 태그와 <u> 태그는 중첩이 됩니다. 이게 무슨 말이냐면 두 태그를 동시에 쓸 수 있다는 겁니다. 사진으로 봅시다.
이렇게 두개의 태그로 글을 한번에 감싸면 두 태그의 능력을 모두 사용할 수 있습니다. 와우 글씨가 진해짐과 동시에 밑줄까지 쳐졌습니다.
결론
저는 앞으로 제가 배운 내용들을 더 많이 글로 작성하려고 합니다. 오늘은 HTML의 <strong> 태그와 <u> 태그를 알아보았는데요. 앞으로도 더 열심히 공부하여 글을 올리도록 하겠습니다. 제가 공부하는 내용들을 보고 다른 분들도 도움이 되면 좋겠네요. 피드백할 내용이나 잘못된 내용들은 댓글로 알려주시면 감사하겠습니다. 그럼 마치겠습니다. 감사합니다.
'개발공부 > HTML_CSS' 카테고리의 다른 글
| HTML 목록 <li>와 태그의 중첩 (0) | 2023.11.26 |
|---|---|
| HTML <a> 태그 (1) | 2023.11.20 |
| HTML의 기초 공부 (2) | 2023.10.31 |