개발자14 @midea를 이용해 반응형 웹 구현하기 일이 거대할까봐 걱정했는데 애초에 css 짤때 크기가 화면에 따라 키웠다 줄었다 할 수 있도록 신경써서 짜서 생각보다 쉬웠다. 그저 @midea만 사용해주면 손쉽게 되었다. Mission 9 | 반응형 구현 HTML, CSS repl.it 문제에서 Responsive Web(반응형 웹) 에 대해 학습하였습니다. 화면의 크기가 어느 지점(break point) 이하로 줄어들 시 우측 아이디 추천 섹션이 사라지도록 구현해주세요. 화면이 줄어들면 우측섹션이 사라져야해서 1200px에서 더 줄어들면 display속성을 none으로 설정해주었다. min과 max가 있어서 직접 적용해보면서 필요한 것을 적용하는 것이 좋을듯 하다. @media screen and (max-width: 1200px) { .main-r.. 2023. 6. 13. opacity로 프로필사진 클릭시 메뉴박스 보이게 구현하기 프로필 박스를 누르면 메뉴박스가 나오게 하는건 금방했지만 메뉴 박스 바깥 영역 클릭 시에는 닫히는 것을 구현하는데 시간이 좀 걸렸다. 실제 인스타 페이지처럼 프로필 사진 클릭 시 메뉴 박스가 생성될 수 있도록 구현해주세요. 메뉴 박스 바깥 영역 클릭 시에는 다시 닫히도록 구현해주세요. 먼저 DOM으로 필요한 값들을 불러왔다. const man = document.getElementById("man"); 버튼을 누르면 나올 메뉴박스를 html에서 미리 만들어두고 css속성 중 opacity를 0으로 설정해두었다. 사실 display:none을 쓰고 싶었지만 display:flex로 요소들을 배치해둬서 opacity로 설정했다. 이것 또한 첫 설정값은 0이지만 조건에 0으로 설정해두면 첫 클릭이 먹히지 않아.. 2023. 6. 13. ID, PW 입력 시 로그인 버튼 활성화 기능 구현하기 멘토님께서 미션 5도 함께 해보는것이 좋다고 하셔서 한번에 진행했다. Mission 5 | ID, PW validation 현재 id, pw 입력 시 무조건 로그인 버튼이 활성화 외어 있도록 구현이 되어 있습니다. 실제 로그인 하는 경우를 생각하며 validation(유효성 검사) 기능을 추가해주세요. ex) id >>> '@' 포함 / pw >>> 5글자 이상 일단 id의 value 값과 pw의 값을 확인한 후 두개 다 조건을 만족했을 때 버튼이 활성화되고 addEventListener의 click과 keyup event를 써서 로그인 버튼을 누르면 main 페이지로 넘어가게 만들고 싶었다. 먼저 DOM으로 필요한 값들을 불러냈다. const idForm = document.getElementById(.. 2023. 6. 13. 터미널 세팅 후 자꾸 초기값으로 돌아가는거 고치기 어제 iterm을 다시 깔고 세팅을 했는데 껐다 키면 color 등 설정이 다시 초기값으로 돌아가 있는 것을 발견했다. session 에서 edit session 으로 들어가서 설정을 했는데 아무리 저장해도 다시 키면 거무튀튀한 화면이 나오는 것이다ㅜㅜㅜ 설정을 잘못 들어가서 생긴 일이지만 그래도 삽질을 하다 발견한 내용을 블로그에 적어보기로 했다! iterm2 키고 우측 상단 profiles open profiles 클릭 원하는 profile name 클릭 edit profiles 클릭 설정 창이 뜬다! 여기서 설정을 하면 원하는 profile name의 세팅값으로 설정되어 껐다 켜도 설정이 저장되어있다. 칙칙한 iterm에 색 넣어주기 완성!! 2023. 6. 12. 초보자의 터미널 명령어로 git을 github에 올리기 2편 저번 편에서 local에 있는 git을 github에 올리는 명령어를 알아보았다. 오늘은 github에 있는 코드를 내려받고 local의 코드와 합치고 재업로드 하는 것을 알아보려고 한다. 먼저 추가적으로 알게된 명령어를 정리해보았다. git clone 기존 github의 repository에 있는 코드를 내 로컬로 가져오는 명령어 파일 전체를 가지고 오기때문에 처음에 아무것도 없을 때 사용 git clone 레파지토리주소 이때 repository 주소에는 origin 등 별칭을 적으면 안됨 git branch 현재 내가 있는 branch name을 알 수 있음 git branch 브랜치이름 main/ master의 코드에 영향이 안가도록 독립된 개발 공간을 만들어주는 명령어 브랜치 이름은 내 임의로 정.. 2023. 6. 8. javascript에서 파일의 위치와 async, defer에 대해 알아보기 html과 css로 레이아웃을 꾸민 후 input tag의 id 칸과 pw 칸에 조건이 맞으면 활성화가 되어 로그인 버튼이 파란색으로 바뀌는게 첫 과제였다. 구글링을 해가며 코드는 맞게 짠 것 같은데 실행이 되지 않아 제일 첫 줄 부터 디버깅을 시작했다. ID값을 가져오는 부분부터 console.log를 찍어봤는데 첫번째 줄 부터 null이 나와서 당황스러웠다. 왜때문일까 고민하며 혹시 틀린 부분이 있나 싶어서 철자 하나하나 점 하나하나 다시 살펴봤지만 문제가 없다 생각했고 결국 SOS를 쳤다. 그 결과 javascript 태그의 위치의 문제였다. html 파일을 위에서부터 아래로 순서대로 실행을 하는데 javascript 태그도 그의 영향을 받기 때문이었다. css 파일은 head 태그에 넣어 맨 위에.. 2023. 6. 6. 이전 1 2 3 다음
