쇼핑몰 제작 도전기/코딩 - HTML, CSS

[코딩] 쇼핑몰 제작에 필요한 코딩은 무엇? - 사전 지식

red-purple 2025. 3. 5. 15:50
오늘 포스팅의 주요 키워드를 먼저 정리해 봅니다.
#앞으로 배울 것들     #웹표준   

 

코...코딩이 버...벌써...OTL...


예전에는 웹기획과 웹디자인이 구분되었지만

최근 트렌드는 그 경계가 옅어지고 있다고 해요.

디자인 실습을 병행하면서

천천히 아주 차.근.차.근.  필.요.한. 수업만 진행해 갈 예정이랍니다.

 

무엇을 배우게 되나요?

 

  • HTML5 ; 웹문서의 구조 담당
  • CSS3 ; 웹문서의 디자인 담당
  • Java script : 웹문서의 동작 담당
3가지나 배운다구요?

 

가장 익숙한 단어는 HTML인데요, HTML은 웹 페이지의 기본 구조를 HTML이 담당하고, CSS로 예쁘게 꾸며주고, 버튼이 움직이거나 변화하는 것 등의 동작은 JavaScript로 구현한다고 합니다. 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있대요. 

 

이 3가지를 이용해서 최신 웹 표준에 맞게 웹사이트를 제작할 수 있어요. 

  • 기본 웹, 앱 제작  및 수정 가능
  • 반응형 웹 제작 가능
    ; 접속한 기기에 따라 사이트 레이아웃을 바꿀 수 있음 -
  • HTML은 API를 이용해 웹앱을 만들 수 있음

 

웹표준이란 건 무엇일까요?

 

웹사이트를 만들 때 지켜야 하는 약속들을 정리한 것이 웹 표준이에요. 웹표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있습니다.  

  • 웹표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있음
    즉!) 웹표준을 지키지 않으면 문서가 보이지 않을 수도 있다는 것!
  • 웹표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간을 절약할 수 있음.
  • 최소 아래 5가지의 브라우저에서 동일하게 보여야 함!

브라우저 종류

 

"HTML5로 웹문서를 만들어!"  = "웹표준을 지켜서 문서를 만들어!"

그럼, 이제 뭘 해야하나요?

 

음... 일단, 내 PC에서 HTML 편집기를 이용하여 코딩하고, 이것들을 인터넷에 올려 제대로 작동하는지 확인하면 된다네요...^^;;;  코딩 작성이 70%, 제대로 작동하는지 확인하는 것이 30% 래요. 

 

벌써부터 정신이 아득해지는 기분인데요, 천천히 차.근.차.근. 잘 따라가 보겠습니다! 아울러 포스팅을 꼼꼼히 해서 복습 잘 해볼게요!

 

긴 글 읽어 주셔서 감사합니다!