[HTML] HTML 을 이용해서 코딩을 해보자

개발의 'ㄱ' 자도 모르던 내가 코딩에 관심을 갖게 되었다.

 

작년에 B2B 메시징 서비스를 제공하는 IT 회사의 사업부 팀원으로 입사하면서

회사 안팎으로 소통을 잘 하기 위해서는 최소한의 IT 지식이 있어야 함을 절실히 느꼈다.

나는 몇 달간 정보처리기사 자격증을 준비하고 관련 서적을 읽었다. 

'아는만큼 보인다.' 라는 말을 실감하게 되었는데, 몇 개월 전까지만 해도 이해가 가지 않던 대화들이 귀에 날아와 쏙쏙 박히기 시작했다.

 

공부를 하다 보니 욕심이 생겼다. 직접 코드를 짜서 무언가 구현해 보고 싶은 마음이 생겼다.

자발적으로 생긴 공부 열의가 너무 반가웠지만, 비전공자에게 코딩은 알 수 없는 미지의 영역이자, 끝없이 펼쳐진 바다 같았다.

다행히 나보다 먼저 취직한 컴공과 친구들과 같은 회사를 다니는 개발팀 동기의 도움으로 깨알 꿀팁들을 전수 받았다.

 

'일단 HTML 부터 공부해봐, 유투브에 생활코딩 강의가 좋아. 적성에 맞으면 다른 언어도 해보면 돼.'

 

그래, just do it!

 

오늘부터 HTML, CSS, Java Script 까지 공부를 시작해보려고 한다.

지금이 7월이니 겨울이 되기 전까지 세 개 언어를 이해하고 활용하는 법을 배워 나만의 사이트를 만들어보는게 목표다.

 

 

 

---

[실습 환경 준비]

 

1. desktop 에 web 디렉토리  생성

2. editor 실행 - web 디렉토리 오픈 - 1.html 파일 생성

 

내가 선택한 에디터는 visual studio code 다.

생활코딩 님은 atom 을 사용했지만 나는 같은 회사를 다니는 개발자 동기의 추천을 받아 vscode 를 활용하기로 했다.

 

 

 

---

[HTML 태그]

 

형태 : <태그> 적용할 부분 </태그>

 

(ex) <strong> 브리 </strong> => 브리에 bold 효과

(ex) <strong> 브리의 <u> 티스토리 </u> </strong> => 전체 bold 효과, 티스토리에 밑줄

 

에디터에 평문 작성 후 태그를 입히면, 웹 브라우저 상에서 구조나 효과과 생긴다.

크롬 브라우저 특정 사이트에서 단축키 fn+F12 를 클릭하면 아래와 같이 개발자 도구가 뜬다. (mac 기준)

네이버가 다양한 태그로 구성되어 있음을 알 수 있다.

delete 를 눌러가며 특정 구조를 깨볼 수도 있다.

 

 

태그 종류는 너무 방대하여 외울 수 없다. 다행인 것은 외울 필요도 없는 것! 의미에 맞는 태그를 적절히 서칭하는 것이 중요하다.

 

검색 키워드 : html + (찾으려는 내용) + tag

(ex) html underline tag => <u>

(ex) html paragraph tag => <p>

 

 

대충 구글링해도 찰떡같이 태그를 추천해준다.

 

 

 

---

[실습]

 

요새 취미로 요가를 하고 있어서 관련 웹페이지를 구성했다.

 

 

* img 태그 속성에 alt 값이 있는데, 이는 이미지가 불러와지지 않을때 표시될 대체 텍스트를 의미한다.

 

 

머릿속으로 틀을 잡아놓고 태그를 검색해가며 조립하면 구현이 가능하다.

레이아웃도 가꾸고 하이퍼링크도 걸어보고 싶은데 내일 이어서 해보는거로 !