css 5

오늘의 공부를 끝내며.. (12/5) and 리액트 입문 강의 1주차를 마치고...

https://react-first-project-indol.vercel.app/ React App react-first-project-indol.vercel.app 내가 1주차를 마치고 만든 프로젝트이다. 그냥 따라서 만든거에 배경화면이랑 css만 조금 수정한게 전부이지만 ㅋㅋ 그래도 나름 꾸며보니까 좀 나아보인다. 참고로 앱으로 보면 버튼이나 화면이 제대로 다 나오지 않고 깨져서 나온다ㅠㅠ 이것을 반응형으로 해서 앱에서도 잘 버튼이나 배경화면이 나올수 있도록 고민해보는것도 좋겠다. 오늘은 하루만에 리액트 입문강의를 모두 듣고 , 개인과제에 도전중이다. 생각보다 css부분에서 좀 많이 걸린다. 역시 css는 내게 아직 취약한 부분이고, js부분은 어느정도 감이 잡힌다. 지금은 css를 적당히 완성하고 ..

오늘의 공부를 끝내며.. (11/24)

오늘은 프로필 화면에 파이어베이스에 저장된 데이터를 불러서 보여주기위해 구현시도를 했다. 거의 하루종일 시도했으나 결국엔 불려오지 않았다. 튜터님께 상담하긴했으나, 이부분은 튜터님이 하나씩 설명해서 구현하면서 가르쳐주시기 보다는, 직접 파이어베이스 설명 자료를 보고 직접 구현하려는게 좋다고 하셨다. 사실 계속 하면서 쉽지가 않았다. 뭔가 중간에 오류가 있는것 같은데, 확실히 잡기가 어려운 부분이었다. 그나마 다행인건 만약 내일 프로젝트 제출날이었으면, 각 개인페이지만 완성된 상태이기에 매우 위험한 상태라는 것이다. 월요일까지 기간이 연장되어 그나마 다행이고, 조금 더 시간이 있는만큼 서버에 있는 데이터를 불러오는 코드 작업하는 부분을 조금 더 고민해보고 생각해서 구현해보려고 해봐야겠다~

오늘의 공부를 끝내며.. (11/22)

어제에 이어서 프로필화면의 css를 구성해봤다. 그리고 프로필 파일 수정을 클릭하면, 자신의 컴퓨터 혹은 폴더에서 사진파일을 선택할 수 있고, 밑의 수정버튼 및 취소버튼이 따로 있다. 그리고 위의 홈버튼은 홈으로, 왼쪽의 검은 화살표 버튼은 뒤로가기이다. 지금은 이렇게 해야겠다라고 생각은 했지만, 사실 어떻게 구현하는 코드를 짤 수 있는지는 막 떠오르지는 않는다. 일단 이전에 했었던 작업이나 강의들 혹은 구글링을 해보면서 CURD중 update, read기능들을 구현할 수 있도록 해야겠다. 사실 위의 구성단계는 튜터님의 프로필 뼈대만 어제 빌리고, 거의 혼자 만들었다. 뭔가 시간은 많이 들인것 같은데 막상 별로 한게 없는것 같은 기분은... ㅎㅎ... 일단 내일은 또 발전된 나를 볼 수 있기에 기대가 된..

웹퍼블리싱 2주차 완료

이번 주차는 네이버 검색창 및 GNB(내비게이션) 창을 직접 보고 코드를 구현하는 작업을 수업으로 들었다. 기본적으로 폼태그를 만드는 것까지는 어렵지는 않았는데, 갑자기 뜬금없이 네이버 검색창과 GNB코드를 조금 살펴보고 그것을 바로 구현해보라고 하여 숙제가 너무 어려웠다. 그 결과 아래와 같이 처참한 결과로 나왔다....ㅜㅜㅜ 최근 검색어를 표시하는 화살표도 사라지고 기껏해야 검색창 왼쪽 공란을 클릭하면, 로그인했었던 최근검색어가 나오는것과 검색기능하는것만 되었다. 솔직히 강의를 진행하면서 몇 번 기본샘플을 같이 만들고 실습하는 시간이 있었으면 좋겠는데, 그냥 강사분이 설명하는것만 듣고 바로 숙제를 진행하려 하니 매우 어려웠다.... 웹개발 강의때가 그립긴 하지만, 이것도 차차 익숙해지면 나아지리라 생..

웹퍼블리싱 1주차 완료

웹퍼블리싱 정복 강의 1주차를 마쳤다. 이전에 웹개발강의 및 여러 강의를 들어서 그런지 내용은 쉽게 알아듣고 재밌게 배울수 있었다. 배운 내용은 html, css, js와 jquery, 애니메이션 및 미디어 속성에 대해서 배웠다. 다만 아예 아무것도 모르고 듣는 입문자에게는 어울리지는 않으며, 어느정도 html, css, js에 대해 아주 기초를 알고 들으면 적당히 재밌게 배울 수 있다고 생각한다. 1주차 숙제는 네이버 검색창의 속성을 그대로 개발자도구를 통해 소스코드를 가져와서 구현하는것이다. 검색창 입력 텍스트 속성 #header .search_area .input_text { width: 444px; height: 24px; padding: 13px 15px; margin: 1px; backgrou..