전체 글 102

6월 26일 - HTML/CSS 프로젝트 다섯째

오늘은 월요일! 주말동안 각자 작성해온 코드들을 리뷰했다. 📃 오늘의 목표 📃 팀원들과 코드리뷰 error 잡기 footer css 작성하기 register css 작성하기 📃 실제로 한 것 📃 ✔ 코드리뷰 후 유효성검사 ✔ 에러 수정 ✔ footer css 작성 ✔ 회원가입 페이지 ( register ) css 작성 유효성 검사를 하고 알게 된 것 : span 안에 p 태그 안돼요🙅‍♀️🙅‍♂️, a 안에 div 태그 안돼요🙅‍♀️🙅‍♂️ 그리고 프로젝트 넷째날 기록에 적었던 성별선택 구역과 동의 구역에서 사용했던 label + input 목록 여러개를 하나의 또 다른 label 에 연결시키는 것은 불가능 🤦‍♀️🤦‍♂️하다는 것이었다. HTML 삽입 미리보기할 수 없는 소스 성별 남자 여자 선택안함 ..

6월 25일 - HTML/CSS 프로젝트 넷째날

프로젝트 넷째날, 어제의 회고로 깨달은 목표 구체적으로 짜기! 를 반영하여 작성한.. 📃 오늘의 목표 📃 label, input 태그, 속성값 학습 아이패드로 구조 그리기 회원가입 페이지 마크업하기 css footer 구조 배치하기 📃 실제로 한 것 📃 ✔ input 태그 학습 ✔ 구분선 작성법 ✔ form, fieldset, legend 태그 뜻과 기본 속성값 학습 ✔ 구조 그려보기 ✔ 회원가입 페이지 마크업 🎈관련 태그 학습 구조를 그려보기 전에 불필요한 수정을 최대한 막기 위해 관련 요소들을 학습하였다. 사용해본 적 없는 성별 선택, 생년월일 칸의 예시를 찾아보았다. https://h2s0.tistory.com/9 태그 input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을..

정보를 입력하는 <form> 태그와 <fieldset> , <legend> 태그

사용자에게 정보를 입력받을 때 이용되는 form 태그는 fieldset, legend, input, label 과 주로 함께 쓰인다. 📃 form 속성값 📃 🎈action 데이터를 받아 처리할 페이지의 url 지정 🎈name : 폼 이름 🎈target : 열리는 창 입력 🎈method : 전송방식 get post 256~4096 byte까지만 전송 가능 입력 내용의 길이에 제한 X 보안 중요하지 않을 때 보안 중요할 때 form 태그 안에 쓰일 수 있는 태그는 fieldset, legend가 있다. 🎈fieldset 은 관련된 폼끼리 묶을 때 🎈legend 는 fieldset 내에서 사용되며, 그룹화 된 fieldset 태그들의 제목을 정의한다.

HTML 2023.06.26

<input> 태그

input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다. input 태그는 label 태그와 짝꿍으로 사용하는 것이 접근성 측면에서 좋다.👌 📃 input 속성값 📃 🎈 type : 유형 text default 값 textarea 여러 줄의 텍스트 입력 가능한 박스 radio 여러 버튼 중 한 가지만 선택가능 checkbox 여러 버튼 중 여러가지 선택 가능 image 이미지 전송 버튼을 만들어줌. submit 과 같은 제출 버튼 select 여러 개의 목록항목 생성, 선택가능 button submit file reset number date, week, month, time color email range : 슬라이드 컨트롤 search url 🎈 name :..

HTML 2023.06.25

6월 24일 - HTML/CSS 프로젝트 셋째날

프로젝트 셋째날 ! 주말동안 우리 탐정2조 의 미션은 각자 맡은 부분 마크업 끝내기 ! + css 최대한 완성하기💥💦 팀원들에게 최대한 도움이 되고자 나의 목표는 주말동안 마크업, css 끝내는 것으로 잡았다. 그리하여 작성한 오늘의 목표는 이러하다. 📃 오늘의 목표 📃 footer 마크업 완성하기 회원가입 페이지 마크업 완성하기 웹카페 푸터 살펴보기 회원가입 페이지에 쓸 form - label, input 개념정리 📃 실제로 한 것 📃 ✔ footer 마크업 완성 ✔ 웹카페 푸터 살펴보기 ✔ footer 구조 분석 ✔ 회원가입 페이지 구조 분석 및 페이지 내 form, label, input 태그 살펴보기 ✔ theme.css 작성 비록 footer 작성이 생각보다 너무 오래걸려 회원가입 페이지는 시작..

6월 23일, HTML/CSS 프로젝트 둘째날

📃 오늘 한 것 📃 🎈Git 공동 작업 공간 생성 및 branch 에 대한 이해 https://github.com/h2s0/detective_22 GitHub - h2s0/detective_22: 멋쟁이 사자처럼 프론트엔드 스쿨 6기 프로젝트 2조 - 탐정 2조 작업 공간입 멋쟁이 사자처럼 프론트엔드 스쿨 6기 프로젝트 2조 - 탐정 2조 작업 공간입니다. Contribute to h2s0/detective_22 development by creating an account on GitHub. github.com 총 3개의 브랜치 생성 : main, dev, 개인 branch 개인 branch ➡ dev 후 pull request 를 보내면 확인 후 confirm / reject 하여 dev 폴더에 취합..

6월 22일, 첫 프로젝트 시작 - HTML/CSS

오늘부로 HTML, CSS, 짧지만 강력했던 이틀의 SCSS, 하루의 tailwind 체험까지 학습이 끝난 동시에 HTML, CSS 프로젝트가 시작되었다. 팀원들은 나 포함 총 5명이고, 다들 프로젝트는 처음이라고 하셨다. 내가 끝장나는 실력을 가져서 팀원들을 이끌어 줄 수도 없고, 깃을 만들어서 관리해야한다는 것이 부담되었지만 어쨌든 프로젝트의 조장이 된다는 좋은 경험에서 배울 것도 많다고 생각되어 조장을 맡게 되었다. 오늘은 약 1시간 30분동안 자기소개 시안 고르기 조장 정하기 파트 배분 에 대해 이야기 나누어보았다. 시안은 고정형 웹, 반응형 웹, 모바일 시안 2개로 총 4개였는데, 고정형 웹으로 선택하였다. 나는 고정형 웹을 해보고 싶었는데, 학습하면서 고정형 웹을 안해보고 바로 반응형 실습을 ..

git 으로 협업하는 방법

Fork 를 쓴 다는것은 협업을 하고 있다는 것 수정한 코드를 반영해달라고 pull request : pr 을 보낼 수 있음 저장소인 주인인 쌤이 코드가 괜찮다고 생각되면 반영할 수 있음 merge 저장소 주인 : 프로젝트 리더 포크 해 간 사람 : 팀원 처음에 협업할 때는 main 브랜치에 merge 하지 않는 것이 좋음 develop 이라는 브랜치를 만들어 협업하는 것이 좋음 git branch develop developt 이라는 브랜치를 만듬 ( 팀원들이 보내는거 리더가 쓰는거 병합할 곳 ) git branch 브랜치 조회 git switch develop develop 브랜치로 이동 리더 : git push origin develop 디벨롭 브랜치 보냄 팀원 git remote update 리모..

Git 2023.06.22

노드 설치, Fork 하기

노드 설치하기 npm i # package.json을 읽어들여서 그 안에 있는 패키지 자동설치해줌 ls # node_modules 생성됨 node -v # 패키지 버전 확인(v18.16.0) git status git add , git commit -m "노드 패키지 설치" git remote update git branch -r # 브랜치 확인 가지고 오고 싶은 저장소에 들어가 fork 누르기 내 저장소에 들어가 주소 복사하기 저장소 포크, 클론하기 cd like-lion 클론하고 싶은 저장소로 이동 git clone 주소 복사 ls 로 확인 cd webcafe_Sass 새로 클론한 저장소로 이동 git remote add ssam https://github.com/seulbinim/webcafe-Sa..

Git 2023.06.20