웹 기본 및 프론트엔드 기초 210515

프론트엔드와 백엔드

프론트엔드

브라우저에서 실행되는 부분

 

사용자의 요청을 반영 : 자바스크립트

레이아웃과 디자인 : CSS

웹 컨텐츠를 구조화 : HTML

 

백엔드

서버측 작업(클라이언트의 요청을 처리하는 부분)

프레임워크와 프로그래밍 언어

데이터베이스, 운영체제, 네트워크에 대한 지식 필요

 

 

HTML

HyperText Mark-up Language

웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷

 

html 태그는 여는 태그와 닫는 태그로 되어있고, 

그 안의 요소를 콘텐츠라 함

 

닫는 태그가 없는 경우도 있다. 예) 이미지

이를 빈 요소라 한다.

 

속성은 요소의 성질을 정의하는 명세

~codepen에서 살펴보기~

생략

 

HTML의 역할과 책임은 콘텐츠의 구조를 나타내는 것

웹 브라우저는 HTML 태그를 그대로 보여주지 않고, 태그의 구조와 특성을 파악해 그래픽으로 보여줌(parsing)

 

적절한 태그를 사용하고, 스타일링과 같이 HTML의 역할과 책임을 뛰어넘는 부분은 분리해야 함(CSS등을 사용)

 

 

CSS

Cascading Style Sheets

HTML이 구조를 잡는데 사용된다면, CSS는 웹페이지의 스타일링과 디자인을 하는데 사용된다.

HTML문서의 요소에 선택적으로 스타일을 적용하는 형식으로 쓸 수있다.

 

간단한 코드라면 태그마다 스타일을 적용할 수 있겠으나, 비효율적이다.

스타일 시트를 작성해서 연동하는 것이 좋다.

 

선택자(selector)

태그 선택자, 클래스 선택자, id 선택자

태그 선택자

HTML 요소의 태그를 직접 선택하여 스타일을 설정

 

특정 요소 하나에만 스타일을 선택하고 싶다면

클래스 선택자를 사용

 

id선택자

클래스는 여러 속성이 공유할 수 있지만, id는 하나만 존재할 수 있다.

 

선택자로 속성을 선택하면 {} 안에 설정을 정한다.

정해진 표기법만을 사용해야 한다.

 

CSS는 시각적으로 꾸며주는 역할

 

 

JavaScript

웹페이지를 동적으로 만드는 데에 사용되는 프로그래밍 언어.

 

 

codepen.io

https://developer.mozilla.org/ko/

https://devdocs.io/

https://caniuse.com/