안녕하세요~ 오늘은 HTML 기본 작성법과 기본 tag에 대해서 설명드릴 꺼에요~
글이 길어지면 지루할테니 중간중간에 지루하지 않게 실습관련 사진도 같이 첨부할께요!!
일단은 개발툴을 실행해 주세요~~
다들 이런 화면이 뜨셨나요?? 잘 뜨셨다면 전 시간에 했던 설명을 잘 따라오신 분들이시겠네요 : )
좀 다른 부분이 있다면 밑에 Todo라는 부분과 오른쪽에 번개모양과 네모박스만 있는 것일 텐데요.
이것은 글 마지막에 추가적으로 설명해 드리도록하겠습니다! (그냥 추가기능일 뿐이거든요... ㅎㅎ)
첫 게시글에 설명했듯이 개발자는 따로 저장할 폴더를 만들어 주는게 좋다고 했죠??
그 곳에 파일을 저장하기 위해선 그 파일 경로로 이동할 필요가 있겠죠??
상단에 파일을 눌러서 폴더열기를 하신 후 지정 경로로 설정을 해주세요!!
경로 지정을그 다음은 html 파일을 만들어야 겠죠?
자 여기 까지 잘 따라 오셨나요??
이제 부터 시작입니다... : ) test.html 이라는 파일 생성된게 보이시나요???
자 이제 기본적으로 html 의 첫 문장(?) 기본틀(?) 을 설명해 드릴 텐데요.
기본적으로는 html, head, body 부분으로 나누어져 있으며 이것을 틀로 설명하면
<!DOCTYPE html><html><head><title></title><beta charset="UTF-8"></head><body></body></html>
이렇게 됩니다. 자 이제 brackets에 붙여넣기를 해 주세요. 그리고! 보기좋게 정리를 해주시면 됩니다!
자 이제 이론적인 지루한 타임으로 들어가겠습니다... 집중해 주세요!!
head 와 body 안에 들어갈 수 있는 tag 들을 설명해 드릴텐데요.
head 안에는 meta tag, style tag, script tag, link tag, title tag 등이 들어갈 수 있겠습니다.
body 안에는 기본적인 tag ( a tag, b tag, br tag, div tag 등) 즉 화면에 보여지는 tag 들을 말합니다.
또 body안에 들어갈 수 있는 tag는 Script 등이 있습니다.
기본적인 tag에 대해서 더 말하면 글이 길어질 듯 하니 링크를 걸어드릴 테니 tag의 종류들이 어떤 것이 있는지
어떤 기능을 가지고 있는지 확인해 보도록 하세요!!
오늘은 여기까지 하도록 할께요.
다음 시간부터는 실습위주로 진해해 보도록 할께요!!
피드백이나 궁금하신 점은 댓글로 남겨주세요!! : )
기본적인 tag 종류 Link :
-> tag 종류
아 추가적으로 궁금하실꺼 같아서 추가로 첨부해서 올려 드릴께요!!
빨간색 네모 박스를 클릭해 주세요~
이런 화면이 뜨셨나요?? 자 여기서 테마에서 원하시는 걸 다운 받으시면 됩니다.
하지만 추천이 없으면 서운하겠죠??
그렇기 때문에 유용한 기능 몇가지 추천해 드리고자 합니다.
Beautify : 자동 줄 정렬(?)
-> https://github.com/brackets-beautify/brackets-beautify
Brackets File Icons : 파일 옆에 아이콘 표시
-> https://github.com/drewbkoch/Brackets-File-Icons
Paste and Indent : 붙여넣기 시 깔끔하게(?) 해줌
-> https://github.com/ahuth/brackets-paste-and-indent
다운 받으시고 Brackets 위에 사진 보시면 여기에 .zip 파일을 드래그하거나... 라고 써있는 부분에
그냥 끌어다 놓으시면 됩니다!!
수고하셨습니다. : )
'HTML5 > HTML Start' 카테고리의 다른 글
| 5. 기본적인 페이지 만들기 (section) (0) | 2017.03.31 |
|---|---|
| 4. 기본적인 페이지 만들기 (header) (0) | 2017.03.31 |
| 3. CSS 적용 및 CSS 파일 활용법 (0) | 2017.03.31 |
| 2. tag 사용 실습 및 응용 (0) | 2017.03.30 |
| HTML을 시작하면서.. (0) | 2017.03.30 |
