사실 코딩에 관심이 전혀 없던 것은 아니었다.
아내가 개발자로 커리어를 전환하면서 '나도 해볼까'라는 생각을 계속 가지고 있었지만 잠깐잠깐 보이는 컴퓨터의 로직 자체가... 나의 문과 머리로는 전혀 납득이 되지 않았기 때문에...
별 생각이 없이 '이 길은 내 길이 아닌가벼' 하면서 그냥 넘어갔다.
하지만 아내와 같이 Python을 잠시 공부할 기회가 있어서 코드를 만지고 있노라면 생각보다 재미있기도 하고 상식적으로 배워 놓으면 좋을 것 같은 생각이 들긴 하였다.
그리고... 아내가 본격적으로 나에게 제안을 하였다.
'자네 코딩 배워볼 생각 없는가?'
그래서 또 별생각 없이 '그래'라고 대답을 주었다.
어차피 나에게는 커리어 전환이 목적이 아니기에 학원을 다니기에는 너무 나 자신이 이 코딩에 목숨을 걸 정도로 들어갈 생각이 없어서... 돈도 돈이고 ㅋㅋ
그래서 아내에게 나에게 과제를 달라고 하였다. 어차피 나의 학습 특성상 어떤 과제나 혹은 해야 하는 과업이 있다고 하면 정신없이 달려들고 확장시키는 재주(?) 아닌 재주(?)가 있었기 때문에. 이렇게 일주일 치 과제를 받으면 어떻게 해보기라도 하겠지 라는 생각이 들었다.
아내는 그렇게 일주일 치 과제를 던져 주었다.
1. 웹사이트를 만들기 위해 html, css, javascript가 서로 어떤 역할을 하는지 찾아보세요.
2. html을 이용해 색깔이 들어간 제목, 본문, 이미지가 들어간 페이지를 만들어 보세요.
3. 네이버 실시간 검색어 중 하나를 원하는 단어로 바꿔보세요.
우선 아무것도 모르는 문과생 머리로써 이 과제를 분석해 보았다.
1. 웹사이트를 만들기 위해 html, css, javascript가 서로 어떤 역할을 하는지 찾아보세요.
사실 이렇게 이 첫 번째 문제를 받았을 때 머릿속을 스친 생각은... 기본이다. ㅋㅋㅋ
정말 기본이야... ㅋㅋ
그리고
'음.... 역시 들어본 적은 있으나 이것들은... 뭐가 다르지?'라는 생각이 들었다. ㅋㅋ
html은 무슨 하이퍼텍스트 어쩌고 하는 것 같고, css는.... 잘 모르겠고, javascript는 코딩의 언어 중 하나로서 한국에서 가장 많이 사용이 된다고 정도로 알고 있었다.
쳇... 이렇게 글로 써놓고 보니... 아무것도 모르네 ㅋㅋㅋ
그래서 구글신에게 물어보았다.
어떻게 찾아야 할지 몰라 처음에는 크게 What is difference between html and 하니까 바로 Css가 옆으로 붙기에 이렇게 찾아봤다.
What is difference between html and css?
그래서 찾은 포스팅
www.codingdojo.com/blog/html-vs-css-inforgraphic
The Must Read HTML vs CSS Infographic | Coding Dojo Blog
A must read infographic on the key differences between HTML vs CSS that covers html vs css basics, backgrounds, uses, website applications, etc
www.codingdojo.com
(1) HTML
우선 간단한 설명은 HTML은 Hyer Text Makrup Langauge (L이 language였다니 ㅋㅋ)로서 웹페이지의 실질적인 내용을 구성하는 것으로 사용된다고 한다. 확실히 text라는 것이 들어있기에 이렇게 블로그에 글을 적는 이 글자 자체도 HTML이라는 것이다.
HTML은 개발자들이 tag라는 것을 사용하여서 문단, 헤더 (header), 사진 같은 것을 구별해놓을 수 있도록 한 것으로써 결국은 어떤 글을 쓰는 것을 도와주는 것이라고 할 수 있다고 한다.
사실 이 HTML은 이 티스토리 블로그를 쓰면서도 자주 보는 내용이라고 할 수 있다.
구글 광고나 혹은 카카오에서 하는 애드 핏 광고를 붙이기 위해서는 블로그 글을 쓰는 곳에서 기본 모드가 아닌 html모드로 바꾸어서 붙이는 경우가 비일비재하니까.
이렇게 놓고 보면 글자의 앞에 들어간 것들이 대부분 html이라는 것인가?
그런데 여기에서는 HTML의 예로 나온 head나 혹은 body가 없는데??? ㅋㅋ
아... 이건... 이 글만 가지고 말하는 거였지 ㅋㅋㅋ😜
그럼 F12를 눌러서 확인을 해봐야겠구먼 ㅋㅋ
아하 ㅋㅋ
여기 보면 DOCTYPE html이라고 나오는구먼 ㅋㅋ
<html lang = "ko"> -이건 html에서 사용하는 언어가 한국어라는 뜻이겠고
<head> - 여길 열어보니 제목, 카테고리, 등이 있구먼 그리고 </head>로 마무리를 짓는 거야.
<body id="editor-root" class="tistory"> - 여기에 글을 쓰는 거구만 ㅋㅋ
</html> - html의 끝
이렇게 된다. 흠...
그러니까 결국 HTML은 구조적으로 <head>, <body> 등을 나누게 해 주고 웹사이트의 구조를 짜는 것을 가능하게 해주는 것이다.
이 tag를 통해서 가능하게 한다는 말이 <tag> content </tag> 이런 식으로 만들어 준다는 이야기였다. 이 content안에는 사진, 글자, 표, 비디오 클립 등이 가능하다는 것이지.
(2) CSS
그렇담 CSS는 무엇인가?
CSS는 Cascade Styling Sheet으로서 웹페이지의 디자인과 스타일을 정하는 것이라고 한다. 그러니까 어떤 레이아웃이나 혹은 색깔 아니면 시각적인 효과를 주는 것이라고 할 수 있다.
여기서 CSS는 HTML을 돕기 위해서 된 것으로 HTML 파일 안에서는 CSS를 사용할 수 있으나 CSS style sheet안에서는 HTML을 사용할 수 없다고 한다.
결국... HTML이 더 중요한 것으로 전체적인 구조나 내용을 담당한다면 나머지 디자인과 어떤 시각적 효과만을 CSS가 담당하는 것이라고 할 수 있는 것이다.
그리고 위에서 HTML의 경우는 <tag> content </tag>같이 표시가 됐다면 이 CSS는 부가적으로 html의 디자인을 해주기 때문에 이 {property : value;} 이렇게 표시한다고 한다.
이 property라는 것 안에는 색깔, 글자 사이즈 등이 정해지는 것이고 이 value가 그것의 구체적인 값이라는 것이다. 색깔이면 blue, red, yellow같이 색상 값, 그리고 글자 사이즈면 12px, 15px 등과 같이 말이다.
HTML이 본판이고 CSS는 화장 같은 느낌이랄까?? ㅋㅋ
흠... 전혀 기능이 다르구먼 ㅋㅋ
그런데... 문제는 이 F12를 눌러서 봐도.... {property : value;} 이 녀석은 보이지 않는 점이다.
도대체 어찌 된 일이지??
사실 그건 style을 보면 알 수 있다.
이 옆쪽 페이지에 보면 스타일스라는 곳에서 확인을 할 수가 있다.
보면 body { ~~~}라고 나와있는 것을 볼 수 있는데 여기서 스타일을 확인을 할 수 있는 것이다.
www.w3schools.com/html/html_css.asp
HTML Styles CSS
HTML Styles - CSS CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS = Styles and Colors Manipulate Text Colors, Boxes What is CSS? Cascading Style Sheets (CSS) is used to form
www.w3schools.com
이 사이트에서 보면 HTML안에서 어떻게 Style을 써야 하는지를 볼 수가 있다.
직접적인 exercise를 해볼 수 있는데. 꽤나 유용한 것 같다.
질문
그럼... 여기서 갑자기 질문 2개 떠오른다.
1) '글자를 담당하는 것은 HTML이고 색깔을 담당하는 것은 CSS면... 글자의 색을 결정하는 것은 둘 다를 포함한 것인가??'
2) '그럼 사진은 html인데, 사진의 사이즈는 html일까 CSS일까??'
질문의 답을 해보자면 1)의 경우에는 글자를 담당하는 것은 HTML이지만 글자의 색깔을 결정한다고 글자의 구조나 혹은 웹페이지의 구조를 완전히 바꾸는 것이 아니기 때문에 CSS의 담당이라고 할 수 있다. 즉, <style> {property:value}라고 해서 꾸며줄 수 있는 것이다.
2)의 질문의 경우에는 사진 자체를 삽입하는 것은 html의 구조가 변경이 될 수 있다. 왜냐하면 사진 자체가 웹에 들어가는 순간 html의 구조를 바꿀 수 있기 때문이다. 그래서 사진 사이즈의 변경은 html이라고 할 수 있을 것이다. 하지만 사진의 색, 틀 등을 바꾼다면 그것은 또 CSS의 영역이라고 할 수 있는 것이다.
(3) Javascript
그렇담... Javascript는 무엇인가?
blog.hubspot.com/marketing/web-design-html-css-javascript
Web Design 101: How HTML, CSS, and JavaScript Work
Learn the basics of HTML, CSS, and JavaScript, and how they fit together on the web.
blog.hubspot.com
여기에 실린 글을 보면 HTML과 CSS는 프로그래밍 언어가 아니라고 한다. (충격과 공포!!!!!😮😮)
아니 이게.... 무슨 말이요? ㅋㅋㅋ
결국 예전에는 HTML과 CSS로 사용을 했지만 어떤 동적인 행동을 할 수 있게 하는 것은 HTML과 CSS로는 불가능하다는 것이다. 그래서 이런 HTML과 CSS에 동적인 행동을 부여하는 게 바로 JavaScript라는 것이라고 한다. 그래서 명령어를 통해서 기존에 있는 HTML을 변경시켜 어떤 동작을 취하게 해주는 것이라고 할 수 있다. 그리고 여기저기서 많이 들어본 "HelloWorld" 예시가 여기서 나온다.
왜 많이 사용되는 용어로 interactive websites (반응형 사이트)라는 말이 있는데 이것을 구현하게 해주는 것이 JavaScript라는 것이다. 가장 간단한 것으로 클릭을 하는 것도 JavaScript로 해야 하고 팝업창, 사진 슬라이드, 자동고침 등은 모두 JavaScrpit로 구현을 한다고 한다.
결국 함수식을 이용해 이미 있는 HTML을 가지고 그것을 어떤 동작이 될 수 있게 하는 것이라는 것인데. 가장 많이 나오는 예로써 getElementById()라는 것이 있다.
www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
Tryit Editor v3.6
What Can JavaScript Do? JavaScript can change HTML content. Click Me!
www.w3schools.com
<! DOCTYPE html> (다큐먼트 타입이 html이라는 표시)
<html> (여기가 html의 시작)
<body> (바디의 시작)
<h2> What Can JavaScript Do? </h2> (여기는 head 2로서 결과 페이지에 머리말로 What can JavaScript Do?라고 뜸)
<p id="demo"> JavaScript can change HTML content. </p> (Paragraph로서 id가 demo라는 것으로 정의를 내려주고 그 demo의 content는 JavaScript can change HTML content.라고 해준다. 그리고 Paragraph 엔드)
<button type="button"
onclick='document.getElementById("demo"). innerHTML = "Hello JavaScript!"'> Click Me! </button>
(여기가 JavaScript가 들어가는 곳이다.
button이 있는데 button type이 "button"이라는 것으로 정의
그리고 동작을 정의해주는 onclick을 했을 시 =
'document.getElementById("demo") -> document라는 것은 맨 위에 <! DOCTYPE html>에서. Id라는 element를 가지고 와라 그런데 그 Id는 ("데모")다 라는 뜻으로 해석을 하면 된다.
. innerHTML -> demo라는 것 안에서 만 일어나는 일이다.
= "Hello JavaScript!" -> 이렇게 바뀌어서 떠야 한다.
'> 마무리짓고
Clike Me! </button> -> Click me! 는 버튼 안에 문구를 말하고 button 엔드를 시킨다.
</body> (바디의 마지막)
</html> (html의 마지막)
이렇게 되면 결국
이렇게 구현이 된다.
그리고 Clike me! 를 누르면 demo의 내용인 JavaScript can change HTML content. 가 Hello JavaScript!라고 뜬다.
그러니까 이런 JavaScript의 function들을 이용해서 웹사이트를 만들 수 있게 하는 프로그래밍 언어가 바로 JavaScript라는 것이다.
그럼... 실제로는 어떻게 쓰는 것인가?
이건... 다음 질문인 2. html을 이용해 색깔이 들어간 제목, 본문, 이미지가 들어간 페이지를 만들어 보세요. 에서 해보도록 하자.
원래 토요일까지 해야하는디.....
벌써 금요일 다 할 수 있을까? ㅋㅋ
'코딩 공부' 카테고리의 다른 글
| 아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (3) (0) | 2021.01.04 |
|---|---|
| 아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (2) (0) | 2021.01.02 |
| 아내에게 코딩 배우기 2번째: 농땡이의 결과는 스파르타코딩 무료체험 (1) (0) | 2021.01.01 |
| 아내에게 코딩 배우기 1주차 과제 (2) NAVER 검색어 조작하기.... 아니야.... 니 눈에만 보이는 거야. (0) | 2020.11.23 |
댓글