Enjoy Programming

자 헷갈리지 말자 chats.html 이 있고 chat.html이 있다. chats는 채팅방들이 있는 페이지이고 이번에 만들 페이지는 채팅방에 입장 후 채팅방 페이지이다. 아 여기서 머리좀 아팠다... position: fixed떄문에... 우선 역시 setting.html을 복사 붙여 넣기 해주자. 그리고 필요없는 네브바 지우고 메인 안도 다 삭제 해주자. 일단 헤더부분에 아이콘 하나만 추가하자 마지막 칼럼에 추가해주고 간격 조정 해주자. 그 후 채팅창은 계속 글이 업데이트 되니 뷰포트를 크게 설정 해준다 그러기 위해 body에 id값을 줬다. 다른 곳이랑 혼용되면 안되니까~ 이제 머리가 아팠던... position : fixed차례이다... 앞서 먼저 만들었던 status-bar.css에 다른 페이지..

이번엔 more 페이지를 작성 해보자 역시 find.html의 코드를 모두 복사해서 붙여넣자 그리고 필요없는 코드를 지우자~ 메인 태그안에 모든 요소 삭제! 하고서 헤더에 뮤직 아이콘 추가~~~ 이제 메인 태그를 꾸며 보자~ 어디서 봤다~ friends페이지에 user-component부분이다. user-component부분을 복사해서 붙여넣기 하자~ 다른 점이 있다면 이름 아래 서브타이틀이 달려있고 두번째 칼럼에 메세지 아이콘이 있다 두번째 칼럼에 아이콘은 역시 쉽다 그냥 fontawesome에서 적당한거 하나 갖다 붙여넣기 끝! ㄱ리고 서브타이틀에 전화번호를 넣고 아이콘을 넣자~ 서브타이틀 마진탑과 폰트사이즈 조절해주고 투명도 조절~ 빨간 느낌표 아이콘은 옆으로 패딩값 조절해주고 컬러는 색상 조절 해..

자 이제 마지막 부분인 open-chat 박스를 만들어 준다 그 안에 크게 open-chat__header와 open-post박스를 생성 해줌. open-chat header안에는 타이틀과 오르쪽 텍스트를 넣어줄 태그 두개를 만들어 주고 chevron아이콘도 삽입 해주자~ 역시 flex해주고 space-between으로 간격을 조절 해준다. 나머지 폰트 크기나 투명도 마진등등을 조절 해줌 이어서 open-post부분을 작성 해주자. open-post부분은 크게 두개의 칼럼으로 구성 되어 있다. 칼럼 두개를 만들어주고 첫번째 칼럼에 h5, h6태그 두개에 타이틀과 해쉬태그 부분을 작성 해준다 그리고 멤버스 태그 한개를 만들고 그 안에 이미지 한개와 텍스트 들어갈 태그 두개와 그 사이 divider를 만들어..

이제 세번째 페이지인 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..