카테고리 없음

UI/UX 디자인 & 프론트앤드 배우기

oodada 2023. 11. 17. 12:37

우리가 배울 것들

HTML

웹 페이지의 구조를 정의하는 언어

https://www.w3schools.com/html/default.asp

  • 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다.
  • 태그(tag) 기반으로 되어 있으며, , , 등 다양한 태그를 사용하여 문서의 구조를 만듭니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML 기본 문서</title>
    </head>
    <body>
        <div class="wrap">
            <h1>HTML 기본 문서</h1>
            <p>HTML은 웹 문서를 만드는 언어입니다.</p>
        </div>
    </body>
</html>

CSS 란?

웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어

https://www.w3schools.com/css/default.asp

  • HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다.
  • 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일을 적용합니다.
/* style.css */
.wrap {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #eee;
    border: 1px solid #ddd;
}
h1 {
    font-size: 30px;
    font-weight: bold;
    color: #333;
}
p {
    font-size: 16px;
    color: #333;
}

javascript(js) 란?

웹 페이지에 상호작용을 추가하는 프로그래밍 언어

https://www.w3schools.com/js/default.asp

  • 사용자 이벤트 처리, 데이터 조작, 동적인 콘텐츠 생성 등을 통해 웹 페이지를 동적이고 살아있는 것처럼 만듭니다.
  • HTML과 CSS와 결합하여 사용자 인터페이스(UI) 구성요소를 조작하고, 클라이언트 측 스크립팅에 주로 사용됩니다.
// script.js
var wrap = document.querySelector('.wrap');
var h1 = document.querySelector('h1');
var p = document.querySelector('p');

wrap.style.backgroundColor = '#eee';
wrap.style.border = '1px solid #ddd';
wrap.style.width = '500px';
wrap.style.margin = '0 auto';

React 란?

사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리

https://ko.legacy.reactjs.org/

  • 컴포넌트 기반의 아키텍처를 사용하여 대규모 애플리케이션의 UI를 효율적으로 구축할 수 있도록 도와줍니다.
  • 데이터가 변경될 때마다 적절한 컴포넌트를 효율적으로 업데이트하고 렌더링하는 것을 목표로 합니다.
  • Facebook이 개발했으며, 대규모 애플리케이션의 데이터 관리에 효과적입니다.

웹표준이란?

w3c에서 정한웹 사이트를 만들 때 지켜야 하는 규칙

  • 웹 표준을 지켜 사이트를 제작하면 모든 브라우저(크롬, 사파리, 파이어폭스, 오페라, 엣지)에서 동일한 웹 사이트를 볼 수 있다.
  • 웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간 절약을 할 수 있다.
  • HTML5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것

웹접근성이란?

모든 사람이 웹 사이트를 이용할 수 있게 하는 것

  • 한국웹접근성인증평가원에서 심사 후 인증마크를 받을 수 있다.
  • 시각장애인, 저시력자, 청각장애인 등 모든 사람이 웹 사이트를 이용할 수 있게 하는 것
  • 시각장애인은 스크린리더라는 프로그램을 사용해 웹사이트를 읽어주는 사운드로 웹 사이트를 이용한다.
  • 웹 접근성을 지키면 검색 엔진에서 노출되기 쉽고, 모든 기기에서 웹 사이트를 볼 수 있다.

HTML5와 CSS3를 공부해면 무엇을 할 수 있을까?

웹 사이트를 만들 수 있다.

  • 최신 웹 표준에 맞는 웹 사이트 제작 (반응형 디자인) 가능하다.
  • HTML5의 API를 사용해 ‘웹앱’을 만들 수도 있다.
  • 카페24, 고도몰, 워드프레스, 그누보드 등을 사용해 웹 사이트, 블로그 소스를 이해할 수 있고 사이트를 원하는 모습으로 바꿀 수 있다.

웹브라우저

웹 문서를 해석해서 보여주는 프로그램

  • 크롬(기본 사용), 사파리, 파이어폭스, 오페라, 엣지 등
  • 웹 표준을 지키지 않은 문서는 브라우저에서 정상적으로 보여지지 않는다.

Alt text

- Chrome 브라우저 설치 후 기본 브라우저로 설정

https://www.google.com/intl/ko_kr/chrome/

웹편집기

웹 문서를 만드는 프로그램

  • 대부분의 주요 플랫폼에서 모두 사용할 수 있습니다.
  • 태그와 CSS 속성을 간편하게 입력할 수 있습니다
  • 확장 프로그램을 설치하면 더욱 편리하게 사용할 수 있습니다.

- Visual Studio Code 설치

GitHub

웹 문서를 저장하는 웹 사이트

티스토리 친구하기