FrontEnd

[FE기초] 이미지&멀티미디어 태그이전 포스팅의 시맨틱 태그, 인라인 블록 요소의 비교에 이어 이미지 & 멀티미디어 태그에 대한 이야기를 해보려 한다.제목 그대로 이미지나 오디오 같은 멀티미디어 요소 그리고 하이퍼링크에 대한 이야기, 경로에 대한 내용을 설명한다. [FE기초]HTML 시맨틱 태그[FE기초]HTML 시맨틱 태그 이전 포스팅에서는 HTML 에서 사용하는 기초 태그에 대해서 알아보았다. HTML 두번째 포스팅에서는 시맨틱 테그와 블록,인라인의 개념에 대해서 한번 알아보자 [FE 기초]HTMLdeveloper-dodo.tistory.com   1. 이미지 태그 라고 표현하며 HTML 문서에 이미지를 넣는다.이미지 태그이런식으로 사용이 가능하다. 태그는 여러개의 속성을 가지고 있다.src : 필..

[FE 핵심] CORS 정책게시판을 만드는 간단한 미니 프로젝트를 하는 중 Vue로 프론트를 구성하고 서버로 글 작성 POST 요청을 했는데 CORS 에러가 발생하였다.CORS에서가 악명 높으며, 정의 그리고 해결법이 프론트의 단골 면접 문제라고 한다. 그러면 CORS의 의미와 에러 해결 방법을 알아보자  1. CORS란❔CORS는 Cross-Origin Resource Sharing의 줄임말로, 교차 출처 리소스 공유라는 뜻이다.여기서 출처가 교차한다라는 뜻을 먼저 해석해보자출처는 오리진의 한글 표현으로 URL에서 도메인 + 프로토콜 + 포트를 포함하는 개념이다.출처를 구성하는 요소를 한번 알아보자 출처를 구성하는 핵심 요소 3가지는 프로토콜, 도메인(호스트Name), 포트 3가지로 이 중 하나라도 다..

[FE기초] CSS - Float & Position이번시간에는 CSS의 Float와 Position 요소에 대해서 알아보겠다.이전 포스팅은 아래 링크를 따라가면 된다. [FE기초] CSS - Box Model & Display[FE기초] CSS - Box Model & Display이전 글에서는 CSS 폰트를 다루었다.이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자2024.04.25 - [FrontEnd] - [FE기초]CSS폰트 [Fdeveloper-dodo.tistory.com  1. Float사전적으로 뜨다 하는 의미를 가지고 있다.HTML 요소에서는 float 은 기존의 흐름에서 벗어나 해당 요소가 둥둥 떠다니는 것처럼 배치된다.인접한..

[FE기초] CSS - Box Model & Display이전 글에서는 CSS 폰트를 다루었다.이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자2024.04.25 - [FrontEnd] - [FE기초]CSS폰트 [FE기초]CSS폰트[FE기초]CSS폰트이전 포스팅에서는 CSS를 다루는 법 그리고 선택자를 사용하는 방법 정도를 알아보았다.이제부터 본격적인 css의 스타일을 적용하는 방법 등의 다양한 사용 방법을 알아보자  (adsbydeveloper-dodo.tistory.com  1. Box Model모든 HTML 요소는 웹에서 일정 공간 영역을 차지하고 있다.이러한 공간을 CSS에서는 Box Model 이라고 정의한다.HTML요소의 박스 모델은 ..

[FE기초]CSS폰트이전 포스팅에서는 CSS를 다루는 법 그리고 선택자를 사용하는 방법 정도를 알아보았다.이제부터 본격적인 css의 스타일을 적용하는 방법 등의 다양한 사용 방법을 알아보자  1. 폰트 스타일글꼴에 관련된 속성을 먼저 알아보자font-family : 글꼴 종류를 지정 (defatul:웹 브라우저 기본 글꼴)font-size : 글자의 크기 지정font-style : 글자를 이텔릭체로 표시할지 지정font-weight : 글자 굵기를 지정font-variant : 소문자를 작은 대문자로 바꾸는 속성웹 폰트사용자의 컴퓨터에 설치된 폰트와 상관없이 온라인의 특정 서버에 위차한 폰트 파일을 다운로드하여 화면에 표시해 주는 웹 전용 폰트 대표적으로 구글 웹 폰트가 있다. Browse Fonts -..

[FE기초]CSS 다루기 css가 무엇인지 어떤 방법으로 사용하는지 대략적으로 이전 포스팅에서 알아보았다.이번 포스팅에서는 CSS를 다루기 위한 방법들을 알아보고 정리해보려 한다. [FE기초] CSS 기초[FE기초] CSS 기초이전포스팅을 마지막으로 HTML에 대한 기초 강의가 마무리되었다.주로 사용하는 HTML 태그들에 대해서 알아보았고 이제 스타일을 담당하는 CSS에 대해서 한번 알아보자백엔드 개developer-dodo.tistory.com  1. selector(선택자)선택자란 CSS에서 말그래도 어떤 것에 스타일을 입힐지 선택하는 것이라고 생각하면 된다. 일반적인 CSS 구조를 한번 보자아래 처럼 선택자를 선택하고 {} 중괄호를 통해 영역을 정하고 그 내부에 스타일에 대한 설정을 작성하는 방식이..

[FE기초] CSS 기초이전포스팅을 마지막으로 HTML에 대한 기초 강의가 마무리되었다.주로 사용하는 HTML 태그들에 대해서 알아보았고 이제 스타일을 담당하는 CSS에 대해서 한번 알아보자백엔드 개발을 하며 직접 css 를 다루는 일은 많지 않지만 추후 FE 개발을 해야할 일이 있을 수도 그리고 협업이나 팀프로젝트에서는 서로의 코드를 확인해야하기도 하기에 css 에대한 개념도 함께 정리해보겠다.  [FE기초] Head 태그[FE기초] Head 태그HTML 포스팅의 마지막 Head 태그이다.이전까지의 페이지의 Body에 해당하는 부분을 만드는 것이었다면 이번 시간에는 탭의 파비콘 등을 통해서 head를 구조화 하는 방법을 알아보developer-dodo.tistory.com  1. CSS 스타일 규칙위 ..

[FE기초] Head 태그HTML 포스팅의 마지막 Head 태그이다.이전까지의 페이지의 Body에 해당하는 부분을 만드는 것이었다면 이번 시간에는 탭의 파비콘 등을 통해서 head를 구조화 하는 방법을 알아보겠다. [FE기초] Form 태그[FE기초] Form 태그예비군 훈련으로 며칠만에 포스팅을 하게되었다.프론트엔드 기초 강의 HTML 시리즈의 마지막이 다와간다.회원가입 또는 로그인 화면에서 아주 많이 사용된느 Form 태그에 대해developer-dodo.tistory.com 1. Head 태그head 태그는 문서 정보(메타데이터)를 담고 있는 태그브라우저 화면에 직접적으로 보이지 않는다.하지만 숨은 데이터를 정의하는 태그들이 들어가 있으며 아래 태그들이 대표적 예시이다.◼ title브라우저의 제목 ..