ABOUT: 코딩

코딩 구조

• HTML : 뼈대라고 할 수 있으며, 코딩을 시작하기 앞서서 큰들/구조를 잡는 역할을 한다.
• CSS : 디자인을 하는 공간. 색상/크기/형태 외에도 간단한 이벤트도 실행 가능하다.
• JS(Java Script) : 이벤트, 팝업창, 스크롤 이벤트, slick, fullpage 등등 온갖 신기한 기능을 실행시켜 준다.

 

나는 코딩을 배우는 입장에서 코딩의 과정이 마치 레고 블록 조립을 하는 과정과 비슷하다고 느꼈다.

무슨 말이냐면, 레고 블록 조립은 중간에 블록 하나가 빠지거나, 잘못 쌓기만 해도 무너지기 쉽고 처음부터 다시 새로 조립해야 될 때가 많은데 코딩도 정말 이 과정과 유사하다고 느꼈다.  

그래서 무엇보다도 기본 뼈대와 구조를 결정하는 HTML을 탄탄하고 깔끔하게 잘 구성해둬야 된다고 생각한다.

 

HTML

기본 뼈대를 잡는 작업, 텍스트 이외에도 사진, 동영상, 링크 삽입 등 근본이 되는 작업이다.

1. HTML은 HyperText Markup Language의 약자
2. 구성 : 문자, 사진, 영상, 링크 등등
3. <> , </> (꺽쇠) 사용해서 여러 가지 기능을 가진 태그 사용 
4. <!-- 내용입력 --!> 을 사용해서 주석을 달수 있다. (페이지가 상당히 깊어지고, 여러 사람이 같이 일하게 되면 주석 다는 것이 꼭 필요하다.)

지금 학원 수업에서 내가 만들고 있는 작업 중 하나이다.

---

 

CSS

HTML에서 만든 구조(텍스트, 사진, 영상 등등)를 디자인하고 레이아웃을 잡아주는 작업.  

1.  CSS는 Cascading Style Sheets의 약자
2. 스타일 종류 : 내부 스타일, 외부 스타일(주로 사용), 인라인 스타일(거의 사용되지 않음)
3.  /* 내용입력 */  을 사용해서 주석을 달수 있다.

외부 스타일을 이용해서 위의 html을 디자인 해주고 있는 작업 모습이다.

---

 

Java Script (JS)

각종 이벤트, 효과, 팝업창, 슬라이드 효과 등등 모든 크게 이루어지는 신기한 효과는 여기서 작업한다. 여러사람들이 개발해둔 각종 기능들이 있으며, 계속해서 업그레이드, 개발되고 있다.

1. 스타일 종류 : 내부 스타일, 외부 스타일(주로 사용)
2.  /* 여러 줄의 긴 내용 입력 */  또는 / 한 줄짜리의 짧은 내용입력 / 을 사용해서 주석을 달수 있다.

 

위의 작업은 슬라이드의 효과를 주는 작업을 하고 있다.

 

---

웹코딩 학원 수업 들은지 이제 2달?정도 밖에 되지 않았는데, 생각보다 흥미롭다. 물론 각종 함수들과 수식을 계산 해야되고 할때는 진짜 어렵고 머리 아프지만 그 결과가 매우 직관적으로 나온다는 점에서 다른 무엇보다도 훨씬 더 큰 성취감을 느꼈다. (준비물도 정말 간단하다 오직 컴퓨터만 있으면 된다.)

또한, 요새 초등학교에서부터 이런 코딩 수업을 듣는 다고 하는데, 시대의 흐름에 뒤쳐지지 않기 위해서 배우고 익히기에는 발전가능성이 무궁무진하다고 느꼈다.