'Frontend' 카테고리의 글 목록

태그클라우드 이동

frontend 짝수 Git xcode 프로그래머스 피그마 배열 알고리즘 옵셔널 1편 2편 study If uikit 이론편 UILabel CSTS 컬렉션 앱개발 GitHub TiL 실습편 swift 베이직반 변수 프로토콜 프론트엔드 티스토리챌린지 오블완 반복문

2023년 1월 1일

08:00 AM

Buffering ...

최근 글 👑

Frontend

We Can Become

[프론트엔드] Codepen.io 소개

댓글수 · 2024.02.20

https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 프론트엔드 실습을 도와줄 수 있는 몇몇 대표적인 사이트 중 Codepen.io 라는 사이트를 소개 해드릴께요! 먼저 사이트를 접속 하게 되면 스타트 코딩을 누르시면 이러한 사이트로 오게 되는 걸 볼 수 있어요! 이 사이트의 특징으로는 vs 코드로 작성하는 html을 따로 정의할 필요는 없습니다. 이미 정의가 다 되어 있다는 뜻이 되는 것이..

[프론트엔드] 개발 기본기 다지기

댓글수 · 2024.02.20

프론트 엔드의 기본기 기본을 확실하고 정확하게 알고 가면 이후 코딩할 때 반드시 도움이 됩니다. 우리가 수학을 하려면 기본이 되야 하듯이 코드도 마찬가지입니다. Doctype(DTD) 문서의 HTML 버전을 지정 DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도. HTML 문서의 전체 범위를 이야기해합니다. HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할을 하죠 HTML안에 Head 부문 문서의 정보를 나타내는 범위 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은, 웹페이지의 보이지 않는 ..

[프론트엔드] Visual Studio Code

댓글수 · 2024.02.20

자~ 먼저 저희가 프론트엔드를 공부하기 위해서는 필요한 도구가 있겠죠~ 바로 프론트개발프로그램입니다~ 과거에는 많은 프론트 개발 프로그램이 있었지만 요즘엔 대부분이 프론트 개발 프로그램으로 Visual Studio Code 줄여서 VS code 라고 하죠? 이 VS Code를 많이들 사용 하더라구요~ 저 또한 강의를 들었을 때도 VS code 위주로 배워왔습니다. 사실 VS Code 만큼 코딩하기도 편하고 코드도 가독성 좋게 해주는 프로그램은 저는 아직 없는걸요!? ㅎㅎ 자~ 이제 잡담은 그만하고 본론으로 돌아와볼까요!? 핵심 톡톡 시간! 먼저 vs code 다운 사이트를 알려드릴께요~ 다운로드 사이트 (https://code.visualstudio.com/) 먼저 vs 코드를 다운받고 ..

[프론트엔드] 오픈 소스 라이선스

댓글수 · 2024.02.20

오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근 하여 열람 할 수 있도록 공개하는 것을 의미 합니다. OpenSource.org https://opensource.org/ Open Source Initiative The steward of the Open Source Definition, setting the foundation for the Open Source Software ecosystem. opensource.org 아래 보여드리는 이미지들과 내용을 잘 살펴 봐주세요~ 위와 같은 오픈 소스 라이선스들이 대표적인 라이선스들이며, 언제든지 새로운 오픈소스들이 나오게 된다면 공유하거나 사용해보시길 강추 드립니다~ 오픈 소스라고 해서 막 인용하고 그러면 안됩니다...

[프론트엔드] 웹 프론트 개발자가 자주 사용하는 특수 문자 용어

댓글수 · 2024.02.20

웹 프론트 개발자로써 자주 사용하는 특수 문자 용어들 정리 ` (백틱, 그레이브) : 자바스크립트 사용시 자주 사용됩니다. ~ (틸드) ! (엑스클러메이션, 느낌표) @ (앳 싸인, 골뱅이) # (샵, 넘버 싸인, 우물정) $ (달러 사인) % (퍼센트) ^ (캐럿) : ~~의 이상과 관련된 내용을 작성하는 경우에 사용을 할 수 있습니다. (마치 화살표가 위쪽을 가르키는 것과 유사) & (엠퍼센드) * (에스터리스크, 별표) - (하이픈 기호, 대시 기호) _ (언더스코어, 로대시, 밑줄) = (이퀄싸인, 동등) “ (쿼테이션, 큰 따옴표) ‘ (아포스트로피, 작은 따옴표) : (콜론) ; (세미콜론) , (콤마, 쉼표) . (피리어드, 닷, 점, 마침표) ? (퀘스천마크, 물음표) / (슬래시) | (..

[프론트엔드] 개발자가 보는 이미지

댓글수 · 2024.02.20

프론트 개발자는 다양한 시선으로 봐야한다고 지난번 게시물에 이야기 했던 부분이 있습니다. 이번 시간엔 웹 프론트 개발자가 사용하는 이미지에 대해서 알아보고자 합니다. 사진과 같이 비트맵과 벡터 이미지를 잘 보시면 크게 차이가 있다는 것을 알 수 있습니다. 비트맵은 픽셀이 모여 만들어진 정보의 집합이며, 벡터는 점, 선, 면의 위치, 색상 등 수학적인 정보의 형태로 이루어졌다는 것을 알 수 있죠. 보통 웹 기술에는 벡터이미지가 가장 많이 쓰인다고 해요~ 비트맵은 정교하고 다양한 색상을 자연스럽게 표현하고, 확대/축소를 하게 되면 계단 현상, 품질저하가 일어납니다! 반면 벡터이미지는 확대/축소에서는 자유롭고 용량변화도 없습니다. 단, 정교한 이미지(인물, 풍경 사진 같은)를 표현하기는 어렵죠! ..

[프론트엔드] 동작원리와 웹 표준

댓글수 · 2024.02.20

간단하게 웹 동작을 보면 1~4번까지 진행 됨을 알 수 있습니다. 웹 표준(Web Standard)이란 ‘웹에서 사용되는 표준 기술이나 규칙’을 의미하며, W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술 입니다. 크로스 브라우징이라는 개념은 조금 다르게 구동되는 여러 브라우저에서 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 방법을 이야기 합니다. 프론트개발자로써 브라우저를 보는 방법 브라우저 윈도우 브라우저 탭 주소창 뷰포트 먼저 윈도우, 탭, 주소창은 우리가 자주 접하는 부분이긴 하나 마지막 뷰포트의 경우는 다릅니다 뷰포트라는 것은 하나의 웹페이지가 출력되는 영역 (렌더링 영역)을 의미 합니다. 이 처럼 프론트 개발자는 다양한 시선으로 개발의 핵심 ..

[프론트엔드] 프론트의 정의와 구성 단계요약

댓글수 · 2024.02.20

프론트엔드 개발의 정의는 HTML, CSS, JS를 사용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용을 할 수 있도록 하는 것! 저는 먼저 프론트 개발을 하기 위해서는 기획자, 디자이너, 개발자 이렇게 3 구문을 정확하게 알고 가야합니다. HTML(기획자)은 “Hyper Text Markup Language”의 약어이며, 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 전반적인 구조를 담당하며, 참조를 통하여 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 이야기 하며, 일반적으로 링크(텍스트)를 의미하는 것을 말합니다. CSS(디자이너)는 “Cascading Style Sheets”의 약어이며, 실제 화면에 표시되는 방..

티스토리툴바