Enjoy Programming

자 이번엔 아래 내가 작성한 메세지를 만들어주자 일단 외부 메세지를 복붙하자 복붙하고 아래로 간격을 주자 필요없는 이미지 태그와 작성자 태그는 삭제를 해주고 메세지 박스가 왼쪽에 있는걸 오른쪽으로 당겨와야 한다~ 이때 message-row의 modifier를 만들어주자 클래스명 하나를 더 생성후 이미 message-row는 flex상태이므로 modifier의 justify-content를 flex-end로 오른쪽으로 정렬 시킨다. 그리고 modifier의 mesaage__bubble의 배경색을 전역으로 설정한 --yellow색상으로 바꿔주고 border-top-right-radius:0; border-top-left-radius: 15px 로 설정해서 오늘쪽 상단을 뾰족하게 만들어준다. 이제 메세지 인포..

자 저번 시간에 이어 chat창을 만들어 보자. 우선 상단에 status-bar와 header를 포지션 고정 시키고 위치값 조정하고 레이어 순서를 z-index를 통해 정렬 해주었다. 이제 메인 태그로 돌아와 main-chat을 손보자 메인태그는 고정된 스테이터스바와 헤더와 다른 레이어이므로 고정된 애들과 같이쓰면 겹치게 되어 안보이니 마진탑으로 위치를 조정해주고 태그들을 만들어 나간다. 마진탑 120정도 주고 타임스탬프의 글씨는 흰색 배경색은 회색 비스꾸리한걸로 조정한다 박스에 패딩을 15정도 주고 글씨크기 보더의 둥글기 조절해주고 박스가 가운데 오도록 하기 위해 flex해주고 flex-direction을 column으로 바꿔주자 그런 다음 align-items:center로 중앙 정렬 해주면 끝! f..

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

자 6번째 페이지인 셋팅 페이지를 만들어보자 역시 앞선 more.html에서 복붙하고서 필요없는 메인태그 안에 요소 다 지워준다. 그리고 헤더 부분은 수정이 필요하다 일단 헤더부분은 채팅방과 비슷하므로 이전에 쓰던 screen-header 컴포넌트를 쓰지 않고 새로 alt-screen-header.css를 만들어서 공유 하겠다. 우선 헤더는 크게 칼럼이 세개로 나뉜다. header.alt-header>div.alt-header__column*3으로 세 칼럼을 만들어 주고 첫번째와 세번째는 아이콘을 배열하고 가운데 칼럼은 h1태그에 타이틀명을 적어준다. 역시 블록요소인 div이므로 flex시켜주고 컨텐츠 center 얼라인아이템스 center를 해주자 그리고 역시 전역에 설정된 padding값을 너어주자~..

이번엔 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를 만들어..