프런트엔드 개발이란 무엇인가?
html, css, javascript 각종 framework를 이용해 인터페이스(gui)를 구현하고 그것으로 사용자와
상호 작용 할 수 있는 페이지를 개발하는 것
비즈니스 로직(business logic)이란? (백앤드에서 수행한다)
웹 사이트가 동작하는데 필요한 핵심 데이터 처리를 수행하는 알고리즘
HTML(Hyper Text Markup Language)
:markup 언어로 웹사이트에 구조를 만든다
css (Cascading Style Sheets)
: 색상 크기 폰트 레이아웃 등을 제어하여 시각적으로 페이지를 꾸민다 (정적이다)
JavaScript:
html과 css로 만든 정적인 페이지에 동적인 기능을 추가하여 생동감을 부여한다
통신 프로토콜이란?
컴퓨터나 원거리 통신장비가 메시지를 주고받는 규칙의 체계를 의미한다
http와 https가 대표적이다
웹 표준이란?
웹 페이지를 만들때 사용되는 기술이나 규칙의 기준을 말한다
크로스 브라우징이란?
어떠한 페이지를 코딩하여 만들었을 때 해당 페이지를 open 하는 브라우저마다 다르게 동작할 수 있는데
이러한 현상을 고려하여 어떤 브라우저에서든 동일한 기능을 할 수 있도록
웹페이지를 제작해야한다는것을 의미한다
뷰포트란?
하나의 웹 페이지가 출력되는 전체 영역을 의미한다
렌더링이란?
브라우저에서 웹사이트를 출력하는 행위
웹에서 사용되는 이미지
비트맵:픽셀단위가 모여 만들어진 이미지
장점:정교하고 다양한 색상을 자연스럽게 표현한다
단점:확대/축소 시 이미지가 깨질 수 있다.
비트맵 형식의 이미지
.jpg(jpeg):
장점:
1표현색상이 뛰어나다(24비트, 1600만 개의 색상 지원)
2 가장 널리 쓰인다
3 이미지 품질과 용량 관리가 쉽다
단점:
1손실압축을 사용하기 때문에 여러 번 압축 시 이미지가 깨진다
. png:
장점:
1투명도 지원
2 w3 c 권장 포맷 즉 웹 표준에 적합한 이미지이다
3 비손실 압축을 사용하여 jpg보다 이미지가 깨질 확률이 다소 적음
단점
1 용량이 다소 커질 수 있다.
gif:
장점
1 여러 장의 이미지를 한 개의 파일에 담아 이미지를 애니메이션 처리할 수 있다.
단점
1 색상지원이 다소 부족하다 (8비트, 256개의 색상지원)
WEBP:
장점
1Gif와 같은 애니메이션을 지원한다
2 투명도를 지원한다
3 이미지가 깨질 확률이 낮다
4 표현 색상이 뛰어나다
단점:
1 지원되는 브라우저가 다소 적다
벡터: 수학적정보 형태로 이루어진 이미지
장점:확대/축소 시 이미지가 깨지지 않는다
단점:정교한 이미지를 표현하기 어려움
head태그 : 문서의 정보를 나타내는 영역이다
웹 페이지의 보이지 않는 정보를 작성한다
body태그 : 문서의 구조를 나타내는 영역이다.
웹 페이지의 보여지는 구조를 작성한다.
css연결방식 4가지
1 외부 파일 불러오기 : 링크 태그를 이용해 경로를 명시한다 만약 reset.css로 브라우저 스타일을 초기화하고자 한다면 reset.css를 메인 css파일보다 위에 명시한다.
ex)
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./main.css">
2html 내장방식: head태그 또는 body태그 안에 style태그를 작성하여 css를 html 파일에 내장하는 방식이다
ex)
<body>
<style>
p{
color: red;
}
</style>
<p>hello</p>
</body>
3인라인 방식: 태그에 직접 style을 선언하여 css를 사용하는 방식이다
ex)
<p style="color: blue;">hello</p>
4 @import : css에서 css를 불러올 때 사용하는 방식이다 직렬방식이기 때문에 불러오는데 속도가 느리다
@import url("./reset.css");
.element{
color: red;
}
상대 경로란? : 경로가 변할 수 있는 로컬(내 컴퓨터)에 파일이나 폴더 이미지 등등을 나타낸다
./ : 현제폴더안에 파일이나 폴더를 탐색한다
../ : 상위폴더에서 파일이나 폴더를 탐색한다
절대 경로란?: 경로가 변하지 않는 리모트(내 컴퓨터가 아닌 곳)에 파일 폴더 이미지 등등을 나타낸다 대표적으로 주소가 있는 이미지 파일 등이 있다
http(https)
meta태그 : html에 대한 정보를 나타낸다 이때 name과 content를 사용하는데 name은 해당 meta태그가 어떤 속성인지 명시하고 content는 name에 값을 명시한다.
ex)
<meta name="author" content="mr.kim">
부모와 자식의 관계
부모와 자식은 기준에 따라서 달라진다 특정태그를 기준으로 감싸고 있다면 부모 요소이고 감싸 져 있으면 자식 요소이다
부모 요소 기준 자식 요소의 자식 요소를 후손 요소라고 부른다
자식 요소 기준 부모 요소의 부모 요소를 조상 요소라고 부른다
ex)
<div class="grandparent"> <!--parent라는 요소를 감싸고 있기때문에 parent의 부모요소이고 자식요소인 parent의 자식인 child에게는 부모의 부모이기 때문에 child의 조상요소이다-->
<div class="parent"> <!--grandparent라는 요소에 감싸져있기때문에 grandparent의 자식요소이고 동시에 child라는 요소를 감싸고 있기에 child에 부모요소이다 -->
<div class="child"></div> <!-- parent라는 요소에 감싸져있기때문에 parent의 자식요소이자 parent를 감싸고있는 grandparent에게 자식의 자식으로써 후손요소가 된다-->
</div>
</div>
빈태그란 무엇인가?
닫히는 태그가 존재하지 않는 태그를 말한다
ex <img src = " " alt=" " > , <input type = " ">
위와 같이 닫히는 태그가 없는 태그를 빈 태그라 칭한다
인라인 요소:글자를 만들기 위한 요소
특징:
css로 너비와 높이값을 설정 할 수없다.
요소가 수평으로 쌓인다
margin과 padding의 위 아래 값을 설정할 수없다
블록 요소 : 레이아웃을 만들기 위한 요소
css로 너비와 높이값을 설정 할 수 있다.
요소가 수직으로 쌓인다
margin,padding 의 모든 방향에 값을 사용할 수 있다.
'front-end 국비과정 학습일지' 카테고리의 다른 글
| front-end 국비과정 일차 8학습일지 CSS에서 사용되는 핵심속성1 (0) | 2022.04.07 |
|---|---|
| front-end 국비과정 7일차 학습일지 html(자주 사용되는 태그) css(선택자와 가상 클래스,요소 선택자) (0) | 2022.04.06 |
| front-end 국비과정 5일차 학습일지 git & github (0) | 2022.04.02 |
| front-end 국비과정 4일차 학습일지 git & github (0) | 2022.04.01 |
| front-end 국비과정 3일차 학습일지 git & github (0) | 2022.03.30 |
