Frontend

[HTML, CSS] 로그인 화면 만들기 + 가상요소

썸네일과 같은 간단하게 버튼만 있는 로그인 화면을 만들었습니다. 로그인페이지는 을 쓰거나 다른 버튼을 추가해 다양하게 만들어봤는데 이번엔 가상요소 ::after을 써서 만들어봤습니다. 아이콘 이미지 출처 : flaticon

Grouping Content란? <div> 만 쓰는거 금지..!

✍Grouping Content : 무엇인가를 감쌀 때(그룹화 할 때) 사용하는 태그의 명칭 HTML 구조를 처음에 짤 때는 무조건 그룹핑할때는 ! 라는 생각으로 범벅을 시켜놨었다. 하지만 배울수록 이건 잘못되었다는걸 알았다.. (처음에 만든 코드들 보면,, 한숨만) Sementic Tags를 지킨다고 생각하면 될 것 같다. 쉽게 이야기하자면, 수십 수백 줄이 되는 코드를 보면서 어느 부분이 네비게이터인지 어느 부분이 본문인지 한 눈에 이해할 수 있게 해준 방법이라 생각한다. 🔎 Semantic Tags란? : '의미가 있는 태그'라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들이다. (자세한 내용은 아래 링크에서 확인할 수 있다.) https://www.w3schools.com/..

[HTML] HTML Living Standard란?

HTML5는 처음 개발 공부할때부터 들어왔고 로고로도 굉장히 익숙하다. 그런데 수업 중 HTML Living Standard를 HTML5라고 지칭하는게 옳지 않다고 하셔서 그 이유에 대해 정리해보았다. 🚩 HTML Living Standard란 ? 버전 숫자와는 상관없이 HTML 문법 등을 규정한 표준으로, 버전이라는 개념을 사용하지 않고 유동적으로 계속 업데이트한다는 의미이다. 현재 WHATWG에서 HTML5를 현존하는 LIving Standard로서 인정하고 있기 때문에 HTML5와 혼동하여 사용되기도 한다. WHATWG 에서도 확인할 수 있다. 1.2 Is this HTML5? The HTML Living Standard (sometimes informally called HTML5). The HT..

[HMTL] emmet이란?

✍ emmet : HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인 실습 h1 h1+h2 h1>p h${hello} hello h1>[*2 h1>p*5 h1#one h1.one .one #one (div>table>(tr>(td*2))*3)+(footer>p) lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id nemo adipisci dolores corrupti? Ipsam explicabo commodi blanditiis expedita placeat quis ad quod nihil recusandae. Voluptates blanditiis optio pariatur odio. im..

[VSC] 코드스니펫 html lang ko로 설정하기

VSC를 키고나면 가장 먼저 설정하는 기본구조가 있습니다. ! + tab을 눌러도 바로 되지만 그럴경우엔 기본언어가 en으로 되어있어서 매번 바꾸기 번거롭습니다. 그래서 변경해보려고합니다! 🚩 DOCTYPE html> ko로 설정하기 1. ctrl shift p 로 명령 팔레트를 엽니다. 2. >snippets 입력 후 enter 3. html.json 선택 후 아래 코드를 입력합니다. { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet an..

[VSC] VSC실행마다 사용중인 프로젝트 바로 열기

VSC를 킬 때마다 이전에 사용했던 프로젝트가 뜨는데 한 가지만 할 때는 참 유용하지만 여러 프로젝트를 사용중일 때는 너무 불편했습니다. 그래서 이번엔 VSC실행할 때 마다 원하는 폴더를 지정해서 기본으로 열게 하려고합니다! 1. 기본으로 설정할 폴더 선택 2. PowerShell에 입력하기 - SHIFT + 우클릭 ➡ code . 입력 (띄어쓰고 점까지 입력!) ➡ enter 하면 끝

[VSC] 알아두면 좋을 단축키

모든 단축키 : Ctrl + K + S Settings : Ctrl + , (오른쪽 상단에 Settings.json file open으로 좀 더 다양한 커스터마이징 가능) Sidebar : Ctrl + B Terminal : `Ctrl + Shift + `` (백틱, 틸트, 템플릿리터럴) Command palette : Ctrl + Shift + P, F1 동시 선택 : Ctrl + D (2번 입력, Ctrl + Shift + D와 같은 역할) 동시 수정 : Ctrl + Alt + 방향키(상, 하), Alt + Click, Alt + Shift + Drag, Alt + Shift + i Quick Open : Ctrl + P 문장의 양 끝 : Home / End 코드의 양 끝 : Ctrl + Home /..

[CSS] 색상 컬러 사이트 :: HTML Color Codes, Adobe Color, Two Color Combinations

화면을 꾸미다보면 기본으로 제공하고있는 컬러들이 많습니다. coral, darkgreen등 많지만 내가 원하는 색상을 정하기 위해서는 디테일한 조정이나 색조합을 먼저 보고싶을때 사용하면 좋은 사이트들입니다. 1. HTML Color Codes https://htmlcolorcodes.com HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 원하는 컬러는 잠금 표시를 해 고정해 두며 다른컬러와의 조합을 해볼 수 있습니다. 2. Adobe..

리액트 스터디 시작하기

혼자서 하는것보다 스터디로 하면 좋겠다고 생각하던 때 운 좋게 스터디에 들어가게 되었다. (전부 초면인 분들) 팀장님이 만들어준 스케쥴을 따라가는식인데 그 따라가는 과정부터 전에 못해본 것들을 해보고있다. 스터디하면서 공부 외에 알게 된 것 1. 개인 Repository 올리고 fork하기 2. 공부내용은 ReadMe에 정리하기 3. Github에서 Projects와 Discussions 사용 Projects : 일정 공유하기에 좋다. Discussions : 공부관련으로 질문을 주고받기 유용하다. 앞으로 공부계획 책과 노마드코더의 React 강의로 학원 진도 전에 리액트 해보기!

[CSS] 레이아웃3 :: 여백(content, border, padding, margin)

HTML 요소는 총 네 가지의 영역으로 구성되어 있다. content 영역 : 요소의 내용이 작성되어지는 영역 border 영역 : 요소의 테두리가 지정되는 영역 padding 영역 : content와 테두리 사이 영역 margin 영역 : 다른 요소와의 간격을 나타내는 영역 * width, height는 기본적으로 content 영역의 크기를 지정하는 속성