나만의 홈페이지 만들기 및 유용한 웹사이트를 소개해 보고자 한다.
개성있어 보이는 위 강사는 Rich Armstrong(리치 암스트롱)이고 TapTapKaboom(탭탭카붐)의 설립자라고 한다.
TapTapKaboom
I'm Rich Armstrong. And I Want You To Have Fun Creating. Because my eyes light up when I create. And I want to pass that on. I want creating to be easy and fun. I want you to love it as much as I do. And I believe you can.
taptapkaboom.com
수업 방식은 꽤 간단하지만, 핵심적인 부분을 굉장히 빠르게 치고 가는 느낌이 들었다. 설명하는 방식도 자칫 지루할 수 있는 설명에 기반한 수업에 조금씩 기괴한 선생님만의 억양이나 흥이라고 해야할까? 그런 것들을 간혹 집어넣으면서 말해서 이게 뭐지? 싶다가도 계속 수업에 집중할 수 있었던 것 같다.
우선 필요한 프로그램을 다운받아야 한다.
1. Sublime Text
서브라임 텍스트는 HTML과 CSS를 손쉽게 작성할 수 있는 편집기이다.
사용하고 싶은 태그나 요소를 작성하면 하단에 관련된 다른 태그들이 떠서 바로바로 클로징태그 및 ; 부분까지 쉽게 작성해준다. 오프닝 태그는 써도 클로징 태그는 잊어버릴 수 있지만 오프닝 태그를 작성하자마자 자동적으로 나머지 부분을 상기시켜주는 역할을 한달까?
나같은 경우는 아직 많은 태그 종류나 기능들을 모르지만 이 프로그램으로 다양한 태그들을 시도하면서 실제로 웹 페이지에 어떻게 나타나는지 연습해 보기에 편할 듯 하다.
Sublime Text - A sophisticated text editor for code, markup and prose
Goto Anything Use Goto Anything to open files with only a few keystrokes, and instantly jump to symbols, lines or words. Triggered with Ctrl+P⌘+P, it is possible to: Type part of a file name to open it. Type @ to jump to symbols, # to search within the fil
www.sublimetext.com
2. GitHub Desktop
GitHub Desktop
Simple collaboration from your desktop
desktop.github.com
깃허브는 오픈 소스 코드 저장소로 추가한 코드에 대한 메모를 작성해서 튜토리얼을 계속 쌓아가고 업데이트 하면서 자신이 작성한 코드들을 점검할 수 있다.
나같은 경우 수업에서 참고만 하고 아직 제대로 활용해 보진 않았지만, 내 웹사이트를 만들 때 부터는 활용해 보고자 한다.
수업 목록은
필요한 프로그램 다운로드 후에 HTML과 CSS를 직접 서브라임 텍스트를 통해서 작성해보고
자신이 좋아하는 캐릭터에 관해 웹 페이지를 만들어 보는 작업을 했다.
수업 중 내용 몇가지를 남겨보면
HTML
- HTML box theory라고 부르는 것 처럼 박스를 단위로 박스 안에 박스가 들어가거나 텍스트, 내용 없는 텍스트 등을 삽입한다. 즉 HTML은 박스의 모양으로 이뤄진다.
- HTML elements(요소)는
오프닝 태그 + 내용 + 클로징 태그의 조합으로 이뤄진 것이다.
- HTML attributes(속성)는
요소에 대한 더 많은 정보를 제공하며, 이름 + 등호표시(=) + 가치값(value)로 이뤄진다.
- .html 확장자로 파일작성 후에 크롬을 통해 자신의 결과물을 확인하는데
크롬에서 '도구'-'더보기'-'개발자 도구'를 누르면
요렇게 뜨는데, 각 부분을 바로 수정하면서 화면에 어떻게 적용되는지 확인한 후에
서브라임 텍스트에 변경된 사항을 적용할 수 있다. 또한 아직 margin, border, padding, content의 범위에 대한 감이 없는 경우에 해당 텍스트 부분을 선택하면 어디까지가 각 범위에 해당하는지 알 수 있기 때문에 감을 잡기에도 편리할 듯 하다.
CSS
- 스타일을 작성하는 것은 인라인(inline)방식과 헤드에 따로 스타일 부분을 작성하는 방식(rules-it)이 있다.
- 각 라인마다 스타일을 적용하는 것은 손이 많이 가기 때문에
헤드부분에서 스타일을 지정해서 HTML 문서에 링크시킨다.
- 인라인으로 이미 설정되어 있으면 헤드에서 새로운 스타일을 적용해도 적용되지 않는다. 스타일은 세부적인 부분에 지정된 것을 따르기 때문이다.
- <!-- -->는 ctrl + /를 누르면 간편하게 작성된다.
- ©는 <footprint>부분에서 저작권 표시하기에 편리하다.
- 탭 아이콘 설정하는 것은 <link rel="icon" href="...">를 활용할 수 있다.
- 코드를 넣고 싶지만 모르는 경우에는 스택오버플로우 라는 사이트를 활용해보자!
Stack Overflow - Where Developers Learn, Share, & Build Careers
Stack Overflow | The World’s Largest Online Community for Developers
stackoverflow.com
- 폰트 등에 대한 다양한 정보를 얻고 싶다면
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- 헥스 코드 등 색상코드를 알고 싶다면
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
블로그에 이렇게 기록을 남기는 것이 또 다른 기록으로 남기에 굉장히 내 학습에 유용하다고 생각한다.
하지만 동시에 주의해야 할 것은 결국 중요한 것은 직접 작성해 보는 것!!!
주객전도되지 않도록 주의하자.
'디지털 노마드를 꿈꾸며 > 실전연습' 카테고리의 다른 글
| 서브라임 텍스트로 만든 첫 웹페이지3 (수월-) (0) | 2020.04.07 |
|---|---|
| 서브라임 텍스트로 만든 첫 웹페이지2 (지끈-) (0) | 2020.04.06 |
| 서브라임 텍스트로 만든 첫 웹페이지1 (뿌듯-) (0) | 2020.04.05 |
| SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게2 (0) | 2020.03.25 |
| SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게 (0) | 2020.03.25 |
댓글