DW
1.Introduction to Front-end, VS code, git, github, web-development environment setup
Welcome to Front-end! Here are the things to do to start journey as Web-developer Signup on Github Web-Developement Environment setup Github is whe
2.24_12_02 - 6회차 html 뼈대 만들기
복습을 하시는 모든 이들에게 축복이 있기를..!!오늘의 작업은 이때까지 배웠던 모든 태그들을 총동원하여 모양은 좀 떨어지지만 간단한 원리를 사용하여 웹페이지를 만들어 보겠습니다.우선 우리들의 홈이 되는 페이지를 index.html 파일로 하나 만들어줍니다. 그리고 he
3.HTML과 TEXTS, h1~h6, p, b, strong, i, em
모든 작업은 texts.html 파일에서 이루어집니다.h1~h6 태그, p 태그 안에 마음껏 b, strong, em, i, cite태그 사용해보기 차례입니다.텍스트를 이루는 태그는 몇개 안됩니다. 그래서 너무 쉽게 짚고 넘어갈 수 있는데요. 아래의 텍스트 태그들 안에
4.목록만들기, ol, ul, dl, li, dl, dt, dd
이제 lists.html 파일을 작업합니다. ol 의 type 속성을 이용하여 5가지 타입의 ol을 만들어주시면 됩니다. 내용물은 꼭 li 태그 안에 넣으시고 HTML, CSS, JavaScript 이렇게 3가지 li 만들어주세요목록 즉 여러가지 아이템을 집어넣고 싶을
5.table 만들기 table, caption, tbody, thead, tfoot, tr, th, td, rowspan, colspan
교재 96쪽과 97쪽의 표를 만드는 과제입니다. 쉬운 97쪽 부터 만드시고 96쪽은 그 다음에 만드시는 것을 추천드립니다.table 을 만들 때 가장 유념하셔야 하는 "병합"의 성질이 HTML에서는 어떻게 적용되는지를 생각하시면 제일 좋은데요. 96쪽의 예시를 할 때
6.input 태그 + form, fieldset, legend, label 등을 이용해 네이버 로그인 클론코딩 해보기
form, input 태그는 HTML을 공부하며 컴퓨터와 소통하는 첫걸음입니다. 영어번역을 그대로 하면 in 안을로, put 집어넣는다는 뜻으로 컴퓨터에게 데이터를 입력하는 방법입니다. 그러기 위해서는 form 태그와 함께 적절한 input을 사용해봐야하는데요. htm
7.input type, value, required, readonly, disabled, autofocus등 속성 알아보기
input 태그에는 여러 type이 존재하고 이외에도 많은 속성들이 존재하는데요. 그중에서 많이들 사용하는 속성 몇가지만 보고 가겠습니다.이렇게 작성하면 무슨 짓을 해도 input 의 값을 수정할 수 없습니다. 첫번째는 영어를 직역하면 읽기전용입니다. 아래의 속성은 d
8.textarea vs input:type text, input:tel, number, password
textarea 와 input:text 를 비교해보는 시간을 가져볼까 합니다.input:text 는 한줄, textarea는 여러줄입니다. textarea 는 input과 비슷한 속성들을 그대로 사용할 수 있습니다. autofocus, placeholder, id를 줘
9.select와 option, fieldset, legend, form, label, input, textarea, select 사용해서 form 만들어보기
보기 좋은 옵션을 선택할 수 있는 select와 optionselect 태그는 input:checkbox 또는 input:radio를 한곳에 축약해놓은 듯한 느낌을 줍니다. 여러가지 선택을 하고플 땐 select의 속성에 multiple 또는 size를 통해 몇개의 옵
10.Dexflix 헤더 만들어보기
html 의 기본 태그들을 배우고 이젠 웹사이트 베끼기인 CloneCoding 의 첫걸음을 떼보려고 합니다.전체 소스는 제 깃허브에서 보실 수 있습니다.CloneCoding 클론코딩을 왜 하나요?CloneCoding 의 목적은 삽질입니다. 내가 얼마나 깊게 파느냐가 앞
11.#01 Flaticon Header 작업하기
무료 아이콘의 성지인 Flaticon의 헤더 작업을 한 번 해보겠습니다. 깃허브로 작업하신다면 이곳을 잘 살펴봐주세요vs code에서 ctrl J 를 누르셔서 터미널을 열어줍니다. 많은 분들이 윈도우로 작업을 하실텐데 그럴 때는 기본 프로필을 bash 로 선택해주셔야
12.Naver 로그인 창 만들어보기
네이버 홈페이지에서 로그인 버튼이 있는 곳과 클릭시 이동하여 생성되는 로그인 폼을 연결하여 만들어 보도록 하겠습니다. 그동안 배웠던 스타일들 중 포지션값까지 적용해 모달창을 띄우는 것까지 실습합니다.준비작업 - 레이아웃 분리하기순서대로 로그인 박스 안에 p, butto
13.Naver 로그인 모달 만들어보기
네이버 로그인 창에 이어서 계속해서 작업을 하도록 합니다. 로그인 버튼을 클릭하면 아래와 같은 창이 뙇 하고 가운데에 올 수 있도록 작업한 번 해볼게요. > 레이아웃 작업하기 우선 div 태그 안에 form 태그와 ul.quick_btns 를 만듭니다. 그리고 f
14.집에서 React 환경세팅하기 1편 Node js 설치 후 시스템 환경 변수 설정하기
Node js 설치node js 를 설치해줍니다. 중간 박스를 클릭하고 설치를 해주시면 알아서 powershell에서 설치하겠냐고 하면서 2번 아무키나 눌러줍니다. 저는 시원하게 엔터를 갈겨줬더니 설치가 진행됩니다. 시스템 변수 추가윈도우 버튼 옆 찾기 칸에 '시스템'
15.React 환경 세팅하기 2편 vite 사용하여 React 설치해보기
1편에서 node를 설치했다면!node와 npm 의 버전이 잘 나오는 것을 확인할 수 있습니다한글이 들어가면 안되기 때문에 desktop 또는 상위에서 github 라는 폴더를 만들뒤 작업합니다.vite (발음 빗ㅌ)로 .2초만에 세팅해봅니다.진짜 .3초만에 리액트로
16.Vite으로 만든 React 프로젝트 깃허브와 연결하기!
본인의 깃허브에서 프로필 아이콘을 선택해 보기중에 organization을 선택합니다. dw-data101을 선택해주시고 리파지터리의 dw-data101-hw로 들어갑니다.아직 집에 깃허브를 받지 않았다면 아래의 코드를 눌러 주소를 복사해준뒤 바탕화면 또는 한글이 없는