Enjoy Programming

이제 세번째 페이지인 chat페이지를 만들어 보자. 자 이번 페이지는 잘 생각해보면 간단하다. 이전에 만들었던 friends.html페이지에서 필요없는 부분 빼고 몇 부분만 수정 해주면 된다. 아 그리고 수정하기에 앞서 friends & chat페이지의 네브바에 default로 해놨던 #대신에 각각 링크에 연결될 html주소를 적어주자 그리고서 friends.html을 전부 복사해 chat.html에 붙여넣고 필요없는 부분을 살펴보면~~~ 상단 friends name display부분이 필요없으니 삭제 해주고 메인의 friends-screen에서 두번째 user-component칼럼부터는 아에 필요없다. 삭제 해주자. 이제부터 변경해야 할 부분을 찾아보자 먼저 nav-bar부분! user 아이콘이 변화가..

자 이제 user-component부분인 이 부분을 만드는 시간이다. 크게 보면 비슷한 레이아웃이다. 다른 페이지도 비스꾸리하다. 이미지가 들어가고 이름이나 채널명 같은게 들어가고 다른 페이지 보면 서브로 상태메세지나 설명 같은게 이름 밑에 들어간다. 다 비슷하게 만들어지니 일단 중간 크기로 만들어 보자. 우선 큰 섹션으로 div하나를 만들어주고 그 안에 왼쪽과 오른쪽 두개의 칼럼을 만들어 준다. 그리고 첫 번째 칼럼에 이미지와 텍스트가 들어갈 박스를 생성 해주고 텍스트 박스에는 다시 h태그 두개를 사용해서 텍스트를 집어 넣어준다. 이미지는 일단 폴더하나 만들어서 넣어 줬고, 사이즈 조정해주고 뭐 마진이나 이런거 다듬어 주면 끝난다. 그리고 텍스트의 정렬인데, 일단 칼럼 두개를 인라인으로 바꾸기 위해 부..

자 이번 시간엔 네브바도 끝났으니 2번째 페이지의 헤더를 만들어 보자 간단하다 header 태그를 만들어주고 타이틀 h1태그랑 div 박스 하나 만들어주고 그안에 아이콘 세개 넣을 span태그 세개 만들어준당 머 똑같이 fontawesome에서 아이콘 가지고 오고 ~기본 html을 작성 해준다. 이제 css로 박스들을 인라인 블럭으로 만들어 줄테니 flex를 해주고 역시 space-between으로 간격을 준다. 그리고 정렬이 제대로 안되니 align-items로 cross axis를 센터로 정렬해준다 클론할 간격을 맞추고 타이틀 글자 맞추고 아이콘 간격 마진값을 설정해준다. 간단한 작업이었당. 음 그리고 페이지 마다 자주 사용되는 레이아웃은 components로 설정하고 개별로 사용하는 부분은 scre..

이틀 쉬었으니 열심히 다시 달려보자~~~ 오늘은 노마드코더 강의로 내비게이션 바를 만들고 강의를 주욱 들어보겠다 보통 네브바는 ul로 구성되고 그 안에 많은 리스트들로 구성된다고 한다~ 반드시는 아니지만 보통 그렇다 하니 그렇게 연습해보자 developer.mozilla.org/ko/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines HTML 구획과 개요 사용하기 - 웹 개발자 안내서 | MDN HTML 구획과 개요 사용하기 중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에 developer.mozilla.org friends.html로 index...

다음 강의를 넘어가기 전에 form에 대해서 더 짚고 넘어간다. flask로 페이지 제작해 볼 때 form이 거의 다였었다. form form form.. 근데 그땐 이해가 잘 안갔는데 이번에 확실히 좀 넘어가자 form 은 2가지 속성(attribute)를 가지고 있다 1. action 액션은 어떤 페이지로 폼에서 받은 데이터를 전송할 건지 지정하는 것 2. method method는 어떤 method로 전송하는지 결정하는 것이다. POST와 GET이 있다. POST는 백엔드 서버에 정보를 전송하는 방식 (지금은 백엔드는 하지 않기 때문에 사용 X) GET은 보안에 취약하여 중요한 정보를 가진 data를 보내는데 쓰면 안된다(ex-password,userInfo,...) very important!

not연산자가 나온다. 앞선 포스팅에서 의문점을 여기서 교육적으로 해결 해 주신다. awesome! developer.mozilla.org/ca/docs/Web/CSS/:not :not() - CSS | MDN :not() La pseudo-class CSS :not() representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a pseudo-class de negació. :not(p) { color: blue; } Notes: Els selectors inú developer.mozilla.org 간단하게 n..