<앞으로의 생활코딩 및 공부 방향성>
오늘은 생활코딩 HTML의 두번째 시간이다. 이제 겨우 두번째 시간이지만 살짝 문제아닌 문제가 생겨버렷다.
웹 개발분야로 가기 위해서 전과를 했고 학부 공부에 치여 정작 웹에 대한 공부를 못하고 있었지만 이번에 스터디 참여를 통하여 여유있는 웹 개발 공부를 하고자 했지만 나의 현재 신분은 대학교 삼학년(사망년이라고 흔히 불러진다..)이고 졸업작품이란것을 해야한다. 진짜 뭐 배운거 없음...큰일 남...
아무튼 이번에 어찌저찌 캡스톤디자인 조별과제에서 나온 주제가 주식예측 서비스 웹 어플리케이션이었다. 나 또한 주식이란 분야에 생각이 있었고 뜻이 맞는 팀원들이 있어서 공통의 주제로 팀이 짜여졌다. 후에 어색한 분위기일줄 알았지만 생각보다? 괜찮은 분위기에서 회의를 하였고 마침 팀원중에 데이터 분석쪽에 관심있는 팀원이 있어서 각각의 분담에 있어서 나의 경우에는 웹 프론드와 백엔드를 함께 공부하여서 만들기로 결정을 했다. 그렇게 때문에 마냥 생활코딩에서 알려주는 공부만 가지고 안일할게 있을수 없다는 생각에 조금씩 웹스터디에서의 내용보다 앞서 나가서 진도를 빼기로 스스로 마음먹었다. 물론 웹 스터디에 피해가 안가는선에서 말이다.. 아무튼 오늘도 뭔가 서론이 주저리 주저리 끄적여 보았고 이제 진도를 나가기로 하자.
먼저 오늘은 생활코딩의 chapter기준 "HTML이 중요한 이유~ 원시웹" 까지 진도를 나가 보겠다.
- html이 중요한 이유: 장기적으로 보았을때 비즈니스의 측면에서 굉장히 중요하다.(우리의 눈에 보이는 디자인이 전부가 아닌것!)
- 오늘 배운 태그들의 목록(수업 영상을 기준으로 순서대로 설명하지는 않습니다, 양해부탁드립니다.)
1. html? 내가 느낀 바는 html은 웹사이트의 뼈대와 같은 느낌을 많이 받았다. 뭔가 웹사이트를 예쁘게 꾸민다? 기능을 추가한다? 이런 느낌보다는 이런 틀로 만들거니깐 그외 추가할 부분이 있으면 다른것을 공부해서 추가시키면된다는 느낌을 받았다.
기본적인 웹사이트의 틀을 보면 아래의 코드의 틀을 가지고 잇을것이다. 거의 우리가 사용하는 모든 코드들 사이에.
⇊ ⇊ ⇊
<!doctype html> --> HTML 문서에서 <html> 태그를 정의하기 전에 가장 먼저 선언되어야함 (tcpschool.com/html-tags/doctype)
<html> --> HTML 문서의 루트 요소(root element)를 정의할 때 사용 (tcpschool.com/html-tags/html)
<head> --> 메타데이터(metadata)의 집합을 정의할 때 사용(tcpschool.com/html-tags/head)
<meta charset="utf-8"> --> 문자의 인코딩 형식을 의미합니다/사용범위가 넓어서 링크참고(tcpschool.com/html-tags/meta)
<title></title> --> 해당 문서의 제목(title)을 정의할 때 사용(tcpschool.com/html-tags/title)
</head>
<body> --> HTML 문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역을 정의할 때 사용(tcpschool.com/html-tags/body)
</body>
</html>
==> 이렇게가 기본적인 웹사이트의 구조이고 여기서 추가적인 'tag' 사용을 통하여 필요한 기능들을 추가해보자.
- 추가적인 tag들(tag의 종류는 너무많아서 전부 설명하지는 않음)
1. <h1> - <h6>
: HTML 문서에서 제목(heading)을 정의할 때 사용 (숫자가 작아질수록 글자의 크기가 작아짐)
2. <a>
: 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용
--> <a href="cafe.naver.com/busandevelopers">부산 개발자들의 모임</a> (이런식으로 사용함)
3. <ol>, <ul>
- <ol> 태그는 순서가 있는 HTML 리스트(list)를 정의할 때 사용
- <ul> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용
<ol> 또는 <ul> tag를 쓸때는 그 안에 <li>라는 태그를 함께 사용해줘야함.
4. <img>
- <img> 태그는 HTML 문서에서 이미지(image)를 정의할 때 사용합니다
--> <img src="/examples/images/img_monalisa.png" alt=""> (이런식으로 사용함)
4 기타등등...
- 이외에 <strong>, <p> , <br> 등등의 수 많은 태그들은 아래의 링크를 참조하기를 바람!( 설명 귀찮은거 아님!)
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'community > 생활코딩(HTML,CSS,JS)' 카테고리의 다른 글
| 생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.6 (0) | 2020.12.04 |
|---|---|
| 생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.5 (0) | 2020.11.23 |
| 생활코딩을 통한 CSS(with BGM. 부산 개발자들의 모임)_ch.4 (0) | 2020.11.07 |
| 생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.3 (0) | 2020.09.29 |
| 생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.1 (2) | 2020.09.19 |