[HTML 배우기] 엘리스 코딩 무료 강의 HTML 코스 기초 기록 (기본 태그)

SQL 강의를 들으면서 알게된 온라인 교육 사이트 엘리스.

이번에는 HTML과 CSS에 관심이 생겨서 강의를 찾아보았는데 마침 HTML 강의에 무료라고 표시되어 있어서 당장 눌러보았다ㅋㅋㅋ 근데 눌러보니까 강사가 강의를 해주는 식은 아니고, 지문을 주고 차근차근 HTML 언어를 넣어가면서 실습해볼 수 있도록 구성된 식의 수업이었다. 처음엔 조금 실망...할 뻔 했으나 그냥 단계적으로 따라서 입력해가면서 하기만 해도 충분히 HTML에 대해 어느 정도 감이 잡히는 것 같아서 점점 재미있게 따라하게 되었다. 결과적으로 만족!

위 캡쳐본을 보면 중앙의 하얀 화면에 내가 태그를 넣은대로 바로 출력되는 것을 확인할 수 있다. 유튜브에서 비전공자가 코딩공부를 시작할 때 HTML부터 하면 좋다고 하는 이유 중의 하나가 '결과를 바로 확인할 수 있어 재밌다'라는 점이었는데 완전 동의한다. 그리고 일단 아직까지는 쉽다! 이게 가장 큰 이유. 어렸을 때 컴퓨터시간에 배웠던 것들이라 어렴풋이 기억도 난다. (세상에 내가 <strong>을 기억하다니)

HTML 기본

- HTML : 웹 개발 언어(Hypertext Markup Language). 웹페이지의 뼈대를 구성함(디자인은 CSS가). 2022년 현재 기준 표준은 HTML5. 우리가 보는 웹페이지는 HTML, CSS, Javascript를 적절히 활용하여 만들어진다.

- 웹사이트는 백엔드(서버 사이드)와 프론트엔드(클라이언트 사이드)의 상호작용으로 구성되며, HTML은 프론트엔드에 속한다.

- 태그 : <>로 표현되는 태그들을 사용한다. 보통은 열는 태그 <>와 닫는 태그 </>를 쌍으로 사용한다(예외 있음). 태그는 대소문자를 구분하지 않고 공백/엔터키 등은 반영되지 않는다.

- 속성 : 여는 태그에 사용하는 값으로 ""안에 구성한다. ex) <a href="http://www.aa.com>"> TEXT </a>

강의를 통해 학습한 태그들

HTML의 가장 윗단에 관용적으로 사용하는 문구 <!DOCTYPE HTML>

문서의 머리글(제목) &본문을 나타내는 태그 <head> </head> & <body> </body>

밑줄 <u> </u>

강조(볼드) <strong> </strong>

글자 크기 변경 <h1> </h1> , <h2> </h2> ..... -> 숫자가 작을수록 글자 크기가 크다

줄바꿈 <br> -> 한번 쓰면 한 줄, 두번 쓰면 두 줄.. 씩 바뀐다. 닫는 태그(</br>)는 쓰지 않는다.

단락 나눔 <p> </p> -> <br>과 달리 닫는 태그를 사용한다.

단, <p>는 정해진 여백만큼만 벌어지기 때문에 줄간격을 좀 더 디테일하게 지정하려면 CSS를 사용해야 한다(추후 학습). CSS의 예시만 알아두고 넘어가기 ex) <p style="margin-top:40px;">

이미지 첨부 <img src> .-> 사이즈가 너무 클 경우 이런 식으로 조절할 수 있다. ex) <img src="coding.jpg" width="100%">

목차 스타일로 표시하기 <li> </li>

리스트로 표시 <ul> </ul> -> 번호가 매겨지지 않는다.

리스트로 표시2 <ol> </ol> -> 번호가 매겨진다.

링크 걸기 <a href="주소"> </a>

링크를 새창에서 열리도록 걸기 <a href="주소" target="_blank"> </a>

무료강의 페이지는 아래 링크👇

엘리스 아카데미 | 엘리스: 코딩, 엘리스에서 시작하세요!

실습중심 온라인 코딩교육, 엘리스! 개인 및 기업 디지털 트랜스포메이션(DT) 교육, 대학 데이터 사이언스 교육은 엘리스로 시작하세요.

academy.elice.io

저작자표시 비영리 변경금지 (새창열림)

'[커리어] 에디터의 자기계발 > [도전] 비전공자 코딩 학습기록' 카테고리의 다른 글

[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #2. 선택자 (0)	2022.03.29
[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #1. CSS 기초(문법/주석/연결방식) (0)	2022.03.28
[코딩 공부] 엘리스 SQL강의 수강일지 2강 4장 - 윈도우 함수, 순위 함수 (0)	2022.03.13
[코딩 공부] 엘리스 SQL강의 수강일지 2강 3장 - 서브쿼리 심화 (0)	2022.03.09
[코딩 공부] 엘리스 SQL강의 수강일지 2강 2장 - JOIN 심화 (0)	2022.03.06