[패스트캠퍼스 네카라쿠배 2기 도전] 입문자에게 추천하는 HTML, CSS 첫걸음

패캠 네카라쿠배 도전: HTML CSS

[패스트캠퍼스 네카라쿠배 2기 도전] 입문자에게 추천하는 HTML, CSS 첫걸음

닉네임이 멋이 중헌디 2021. 5. 14. 17:10

heropy.blog/2019/04/24/html-css-starter/

입문자에게 추천하는 HTML, CSS 첫걸음

개요 HTML, CSS 그리고 JavaScript 웹 표준 크로스 브라우징 웹 접근성 정보 통신 보조기기 웹 접근성 품질인증 마크 웹 개발을 위한 에디터 Su ...

heropy.blog

개요

웹을 구성하는 html, css, js는 단순한 기술을 배우는 것으로 그치지 않고

웹, 모바일, IT 전반의 전체를 이해하는데 도움이 된다

실무적으로 product(ex. web site)를 구조적인 관점에서 볼 수 있는 능력을 키울 수 있다

1. HTML, CSS 그리고 JS

: 웹에서 돌아가는 3가지

html - hyper text markup language (마크업 언어)

/ 제목, 문단, 표, 이미지, 동영상 등 정의하고 구조와 의미 부여 정적 언어

튼튼한 구조를 만드는 것

css - 예쁘게 만들기 위해 필요한 언어

js - 콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할. 상황에 맞게 다르게 만들어 줄 수 있다

2. 웹 표준

: 웹에서 사용되는 표준 기술이나 규칙, W3C의 권고 안에서 나온 기술들

이 표준 기술들을 기준으로 웹 브라우저(크롬, IE) 등이 만들어지는데 만드는 업체들이 표준 기술을 해석하는 차이,

새로운 기술 삽입하면서 각각 다른 형태의 브라우저가 생기게 된다

- 그러므로 내가 만든 웹사이트가 브라우저마다 형태가 다를 수 있다

ex. ActiveX, Flash 같은 기술은 표준이 아니다

-표준화 제정 단계의 권고안에 해당하는 기술이 표준이다

3. 크로스 브라우징

: 크롬, 엣지, 파이어폭스 등

다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 동작)을 줄 수 있도록 제작하는 기술, 방법

IE는 문제가 많아서 거기서도 동작하게 하는 것을 크로스 브라우징이라고 부르기도 한다

4. 웹 접근성

누구나 사용할 수 있도록 웹을 만든다

ex. 고령자, 신체적, 환경적 제한이 있는 사용자 포함해 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법

ex. 청각 장애인을 위해 영상에 자막, 마우스/키보드 하나만 사용하는 경우에 맞게 기능 제공,

- 정보 통신 보조기기

: 한손 사용자용 키보드, 큰 키 키보드(손 떨림, 상지 기능에 장애가 있는 경우), smartNav(상지, 하지 사용 어려운 분들이 머리 움직임을 통해 컨트롤할 수 있는 특수 마우스)

-웹 접근성 품질인증 마크

: 장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 우수 사이트에 대한 품질 인증하고 마크 부여하는 제도

- 과학기술정보통신부가 지정한 웹 접근성 품질인증 기관을 통해 심사, 인증 받을 수 있다

=> 현실적으로 개인이나 중소 기업 사이트에서 획득하기는 쉽지 않음

5. 웹 개발을 위한 에디터

-웹 개발은 툴에 대한 종속성이 거의 없다

-크로스 플랫폼

1)sublime text

상대적으로 가볍고 성능 저하가 일어나지 않음

2)atom

깃헙에서 만든 텍스트 에디터

해외에서 인기가 많고 확장 기능도 충분

mac에서 더 자주 사용

3)bracket

어도비에서 만든 텍스트 에디터

live preview 기능이 기본으로 제공

오픈소스

무료

느리다고 느낄 수 있음

4)VS Code

MS에서 만든 텍스트 에디터

가볍게 시작할 수 있고 확장 기능이 상당히 많다