[생활코딩] 1. HTML과 코딩 & 기본 태그

 

 

생활코딩이라는 무료 강의를
기반으로 요약 정리하며,
개인적인 복습을 위한 포스팅이다.

포스팅을 작성하기에 앞서서 작성 이유를 적어봤다.
우선 나는 기억력이 엄청나게 좋은 편은 아니다.
그래서 강의를 1번만 들으면 모든 것을 기억하지
못하기 때문에 예전부터 기록하는 습관을 들였다.

​ ​

 

이번에 무료로 수강하는 생활코딩 강의 역시
위와 같이 메모장을 활용해서 강의 노트를 만들었다.
강의를 듣자마자 내가 이해할 수 있을 만큼만 
일목요연하게 정리해놓은 것이고,
이것을 보기 좋게 한 번 더 정리하면서
모든 정보를 나의 것으로 만들기 위한 목적이다.
​

​ https://www.opentutorials.org

 ​
오픈튜토리얼스에는 많은 무료 강의가 있다.
프로그래밍 관련 강의 외에도
개발자영어, 가드닝, 영상편집 등 다양하게 있다.
그 중 나는 생활코딩이라는 코스를 수강하고 있다.

 

​
생활코딩은 '무엇을 모르는지 모르는'
개발 입문자들에게 가이드를 제시하는 강의이다.
정해진 튜토리얼대로만 따라가면,
어느정도 기초를 다지고 응용까지 할 수 있는
아주 유용하고 이해하기 쉬운 강의이다.
​
비전공자인 나에게는 정말 혁신적인 강의이고,
강사님 목소리도 너무 좋아서 ㅎㅎ
어느 순간 엄청난 양의 강의를 보고 있는 
나를 발견하게 된다 :)

 

[ HTML과 코딩 ]

 

 

HTML이란 Hyper Text Markup Language 이다.
즉, 하이퍼 텍스트라는 언어라는 뜻이다.

 

 

(좌측:결과)                                                 (우측:원인)    

​
좌측은 일반인들이 보는 화면이고,
우측은 개발자들이 사용하는 화면이다.

 

우측처럼 사람이 하는 일은 원인​이고
Code / Source / 컴퓨터언어 라고 하며,
좌측처럼 기계가 하는 일은 결과이고
애플리케이션 / 응용프로그램 이라고 한다.

​ 즉, Coding (코딩) 이란

원인에 해당하는 code를 통해서

결과인 애플리케이션 등을 만드는 것이다.

​
그리고 코드는 자바, 파이썬 등 다양하고
코드마다 역할이 다른데,
우리가 하루에 100번도 넘게 만나는
웹페이지를 만드는 코드는 HTML이다.
따라서 HTML은 쉽지만 가장 중요하다.

​

 

[ Editor program 설치 ]

 

코딩을 하기 위해서는 에디터 프로그램이 필요하다.
무작정 메모장에 코드를 쓸 수는 없으니깐?
생활코딩에서는 Atom이라는 에디터를 추천했다.

​

https://atom.io/

​
이 에디터를 사용하면 좀 더 쉽게 코딩할 수 있고,
내가 작성한 코드들을 보기 좋게 확인할 수 있다.

아 그리고 세팅은 한 번씩 훑어보는게 좋다.
참고로, 에디터를 자동 줄바꿈으로 하려면
setting-editor-soft wrap 을 체크하면 된다.

​
https://m.post.naver.com/viewer/postView.nhn?volumeNo=14319473&memberNo=10728965&vType=VERTICAL
​

그리고 아톰 에디터는 특이하게도
각종 패키지를 설치해서 커스터마이징 할 수 있다.
위 포스팅에 자세하게 나와있으니 참고해서 하면 된다.
나도 여기 추천 패키지는 다 설치한 상태이다.

​ 하지만 지금 글을 작성하는 2019년 8월 기준으로는

VS code를 주로 사용하고 있다.

Solidity도 이 에디터로 작성 가능하고

보기 편하길래 갈아탔다 ㅎㅎ

물론 아톰도 솔리디티를 지원하지만...

어쨌든~ 그렇다는거

 

 

 

[ 자주 사용하는 기본 HTML 태그 ]

 

태그(tag)란 HTML문서를 구성하는 명령어의 집합이다.
기본적으로는 여는/닫는 태그로 구성되지만
단독으로 사용하는 태그도 있다.
그리고 태그는 element 라고도 한다.

 

현재 150개 이상의 HTML 태그가 존재한다.
하지만 그 많은 태그를 굳이 모두 외울 필요는 없다.
왜냐하면 요즘은 정보의 홍수 시대 아니겠는가?
필요할 때마다 검색해서 찾아쓰면 된다.
그러나 자주 쓰이는 태그는 외워놓고 바로 사용하자.
따라서 통계적으로 빈도수가 높은 태그 위주로 외우자.

​

https://www.advancedwebranking.com/html/

​

위 사진은 자주 사용하는 HTML 태그들이다.
이것만 외워도 입문 개발자들에겐 충분하지 않을까?
​

 

지금 우리가 배우고 있는 것들을 쉽다고 무시하지 마세요.
1990년부터 지금까지 복잡해진 거대한 웹은 지금까지 배운 것들의 토양 위에 서 있습니다.
지금까지 배운 것이 없다면 뒤에서 배우는 것들은 존재하지 않습니다.

 

 

강사님께서 말씀해주신 명언.. 띵언..!!
기초가 쉽다고 무시하면 안된다.
가장 가장 중요한 밑바탕이 되기 때문이다.

 

 

[ 줄바꿈 태그 <br> 과 <p> ]

 

 

<br> : 단순한 줄바꿈 태그이다.
line breaker의 약자이다.

 

<p></p> : 단락을 나눠주는 태그이다.
단순한 줄바꿈이 아닌 단락이라는 정보를 표현​한다.
paragraph의 약자이다.

​  <p>태그는  단락의 경계를 분명히 하면서 
CSS를 활용하여 <p>  태그의 디자인을  

자유롭게 변경할 수 있기 때문에
 <br> 태그 보다 <p> 태그가 더 좋은 선택이다.

​

[단락 사이 여백을 원하는대로 만드는 CSS]

 

<p style="margin-top:45px;"> 

▶ p 태그 위쪽에 45px 만큼의 여백이 생긴다.

​

 

 

[ HTML의 중요성 ]

 

1. 비즈니스적인 측면

정보의 세계에서 검색엔진에 검색 결과가
노출된다는 것은 사업적으로 매우 중요하다.
HTML의 요소를 잘 활용한 코드는 검색엔진에서
더욱 쉽게 노출되고 비즈니스적으로 이득이 된다.
따라서, HTML을 의미에 맞게 잘 사용해야 한다.

​ 2. 접근성의 측면

웹은 오픈소스인만큼 모두에게 열린 공간이다.
하지만 HTML 언어를 쓰지 않고 모든 정보를
이미지 파일로 표현하려한다면 웹의 철학에 어긋난다.
웹의 핵심적인 철학은 접근성이다.
누구나 차별없이 정보에 접근할 수 있다는 철학을
접근성(Accessibility)라고 하며,
이미지 파일이 아닌 HTML 언어를 활용하여
정보의 소외가 일어나지 않도록 해야한다.