멋쟁이 사자처럼 <Front_end>과정 2일차

 

 

---

 

수업내용

 

 

---

 

 

 

• github 계정 및 기본 사용법
• HTML , CSS , 기초
• Q&A
• 마크업 실습

 

 

 

 

 

 github은 멋사에 참여하기 전 생활코딩님의 유튜브를 보면서 독학을 할 때 알게 되었고 그때 잠깐 아주 잠깐 해보다가 전혀 감도 안잡히고 이게 중요한 건가 싶어서 계정을 만들고 이해 없이 한두 번 따라 하고 내려놓았다.근데 오늘 수업이 있기전 개발자로 일하는 친동생에 가 github에 대해서 기본적인 개념과 왜 사용하고 왜 잘해야 되는지를 배우고 오늘 수업을 들으니 한결 이해가 잘되고 어려워도 계속해봐야겠다는 생각이 들었다. 동생은 Git 에 대한 이해와 공부 그리고 github을 따로 각각 알아야 한다고 했지만 일단은 github 먼저 하기로 하였고 이전에 독학때보다는 괜찮다 라는 생각을 했다.

 

 

(https://nolboo.kim/blog/2013/10/06/github-for-beginner/)

▷완전 초보를 위한 깃허브

 

 

https://github.com/chry8822

 

 

 

 오늘 수업을 강의해주신 분은 주식회사 위니브 대표 | 제주코딩베이스캠프 운영진으로 계시는 이호준 대표님이 해주셨고 앞으로도 계속 수업을 이끌어주시는 분이다. 말씀 하나하나 친절하고 상세하게 그리고 수업을 따라가지 못하는 학생들을 배려하며 진행해주셨고 내 기준으로 뭔가 많은 내용들이 있었지만 차근차근 이해할 수 있었다. 기본적으로 해오셨던 일들과 좋은일들을 많이 하시는 분이라 수업 준비에 있어서도 배려가 느껴지는 부분들이 많았는데 수업 자료와 거기에 필요한 모든 부가적인 자료들을 철저하게 준비해주셨다.

 

 

 

http://www.paullab.co.kr/about.html

 

 

 

오늘은 CSS 가 아닌 HTML의 기초에 대해서 배웠는데 HTML의 기본 구조와 자주 사용되는 태그(tag)들 그리고 각자 태그들이 지니고 있는 의미에 맞게 사용할 수 있도록 기본에 충실한 수업을 하였다. 중간중간 도움이 될 수 있는 사이트들도 알려주셨는데 링크들은 아래 따로 정리하고 자주 사용되는 태그를 emmet을 이용해서 좀 더 수월하고 빠르게 코딩을 할 수 방법을 배웠다. 물론 태그도 많고 emmet의 방법도 많아서 한 번에 외우고 다 기억나지는 않지만 해보고 안 해보고는 큰 차이가 있는 거 같다. 전반적으로 어려웠던 수업은 아니었던 거 같다. 당연히 처음부터 끝까지 혼자서 다하라면 못하겠지만 계속해서 익숙해지고 배우고 공부하다 보면 언젠가는 편하게 할 수 있지 않을까 생각한다.

 

 

	내용이 많아 몇게만 적어보면
    
    h1
    <h1></h1>
	
    h1{hell world}
    <h1>hell world</h1>
	
    h1+p
    <h1></h1>
    <p></p>
	
    h1{hello}*3 
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
	
    h1#one
    <h1 id="one"></h1>
	
    h1.1
    <h1 class="one"></h1>
    
    
   익숙해지면 작업속도가 많이 단축될거 같다.

 

 

emmet cheat sheet

 

 

 마지막 수업으로는 제주베이스캠프의 about 페이지의 일부분을 스스로 마크업 하는 시간을 가져보았는데 이해를 잘못해서 처음에 div 로만 하다가 나중에 그게 아니라 아는 수준에서 알맞은 태그를 사용해서 보기 좋은 구조를 가진 코딩을 해보는 거였다. 그래서 급하게 수정하고 어느 정도 마치기는 했지만 오히려 이런 실수가 오늘은 순간 집중력을 높여 준거 같아서 마지막까지 힘 있게 수업할 수 있었던 거 같다. 

 

 

 

 

코드

https://github.com/chry8822/like_lion_daily/blob/main/like_lion_daily/day2/2%EC%9D%BC%EC%B0%A8/test/008.html

GitHub - chry8822/like_lion_daily

 

 

실행화면

https://chry8822.github.io/like_lion_daily/like_lion_daily/day2/2%EC%9D%BC%EC%B0%A8/test/008.html

https://chry8822.github.io/like_lion_daily/like_lion_daily/day2/2%EC%9D%BC%EC%B0%A8/test/008.html