2017. 12. 26. 11:10ㆍPROGRAMMING/Web
처음으로 블로그 글을 쓰는데,
공부할때 작성하는 노트처럼 편하게 작성해보려고 합니다 ㅎㅎ
나 혼자하는 공부도 좋지만, 누군가 보고 피드백을 해주었으면 하는 소소한 바램으로!!
이제 시작합니다~~~~~~
>>우선 마구잡이로 적고 나중에 이쁘게 바꾸겠슴다<<
이번 공부는 "생활코딩"에서 주최한 '코딩야학 3기'이라는 컨텐츠를 알게되어서 수업을 듣는 내용을 공유하고자 합니다! 공부를 하면서 작성하는 내용이다보니 수업 내용을 가져오는 경우가 매우... 많을 것 같습니다ㅎㅎ (저작권 문제가 될 수도 있으려나요? 문제시 전부 수정하겠습니다! 이 내용은 개인적인 메모니깐요~)
앞으로 공부하게 될 Web 이라는 것의 개념을 먼저 잡아야겠죠?
Web = Public Domain ( 저작권이 없음 )
왜냐하면, 웹을 만든 팀버너스리가 웹을 어떠한 저작권도 존재하지 않는 완전한 자유를 의미하는 퍼블릭 도메인을 선언했기 때문입니다.
웹을 알았으니, 웹페이지 속에 글자를 기록하는 HTML에 대해 공부해 보도록 하겠습니다!
HTML 코딩 시작!!
- 준비물 -
에디터(Editor) : 코드 편집기
우리는 Atom이라는 에디터를 사용해보도록 하자
처음으로 웹 코딩을 해보는건데, 평소에 파이선 조금 매트랩 조금 씩만 해봤었던 나로서는 처음으로 에디터라는 프로그램을 써보는데 신나겠구만
다른 에디터를 찾아보기 위해서는
'HTML Editor' 또는 'best HTML Editor 2017' 로 검색을 하면 다른 에디터 들도 찾을 수 있다고합니다! 여러분들의 취향에 맞는 에디터를 찾아 활용해 보셔도 좋을것 같습니다 ㅎㅎ
Atom 실습
https://atom.io/ 이 주소에서 Atom을 다운받아 주시믄 됩니다!
각자 컴퓨터 환경에 맞는 프로그램으로 설치해주세요!
1. 바탕화면에 web이라는 폴더 만들기
2. file > open folder > 아까만든 폴더 선택
3.
atom 자동 줄바꿈 방법
file > setting > Editor > soft Wrap 체크!
- 한글이 깨지면 어떻게 해야 하나요?
<meta charset="utf-8">를 추가해보세요. 여러분이 파일을 저장하면 UTF-8로 저장이 됩니다. 그럼 웹브라우저에게 UTF-8로 페이지를 열라고 해줘야 합니다. 그걸 브라우저에게 알려주는 코드가 <meta charset="utf-8"> 입니다.
자주 쓰는 tag 모음
https://www.advancedwebranking.com/html/
그 외에도 다른 자료들이 많이 있다.
<u></u> : 밑줄
<!-- --> : 주석
<strong></strong> : 볼드
<h1></h1> : h1~6 6으로 갈수록 작고, 얇아짐
<br> : 줄 바꿈
<p></p> 단락 태그 : 줄바꿈을 쓰기보다는 p태그를 쓰는 것이 좀 더 정보로서 가치있는 코드가 되기때문에 더 좋다.
<p style = "margin-top:45px">
style 부분은 속성 : 이건 css 문법
형식적으로 사용하기보다는 내가 적고자 하는 의미에 맞는 태그를 쓰는것이 중요하다!
https://www.w3.org/
이 사이트는 태그 규칙을 정리해 놓은 사이트 이다.
위 사이트에서 빈곳에 마우스 오른쪽을 클릭하고 '페이지 소스보기' 클릭!
> 위 사이트의 태그 참고
web 의 접근성을 위해서 <p><strong>title</strong></p> 이런식으로 복잡하게 적기보다는 <h3>title</h3>로 해야지 accessibility가 높아지면서, 검색에서도 상위에 뜨게된다. 이런 점들을 고려해서 web을 작성해야 한다.
편집기라는걸 태어나서 처음써보는데 이쁘게 생겼네 굿굿
'PROGRAMMING > Web' 카테고리의 다른 글
| [코딩야학 2일차] HTML 속성 Attribute (0) | 2017.12.26 |
|---|