HTML CSS62 KokoaTalk Clone Coding: chat-room screen 2 chat-room middle screen html css 작성 div.message-row에 프로필 image와 대화 content .massage-row의 상위의 .chat-room이 위와 같이 중간정렬로 설정되어있기 때문에, message-row: 100%; 로 설정해야 디폴트 왼쪽으로 정렬됨 width: 100%를 작성하지 않았을 때 width: 100%를 작성했을 때 image와 이름 css 적용 align-items: flex-end; 를 적용하면 해당 높이 내에서 끝으로 정렬이 됨 → buble은 움직일 높이가 없기 때문에, 시간만 끝으로 이동 bubble의 왼쪽 상단 border-radius를 위와 같이 변경해주면, 왼쪽 상단 모서리가 변경됨 다음 메세지는 위의 메세지를 복사+붙여넣기 해서.. 2021. 5. 28. KokoaTalk Clone Coding: chat-room screen 1 chat-room upper screen html css 작성 setting.html의 형식을 그대로 사용하기 위해 chat-room.html을 생성하고 내용 붙여넣기 chats.html에서 대화내용을 클릭하면 chat-room.html로 이동할 수 있도록 anchor 태그 입력 chat-room.html에서는 아이콘을 클릭하면 chats.html로 돌아갈 수 있도록 anchor 태그 입력 chat-room.html에서만 적용될 배경색을 지정하기 위해서 body에 id 생성 배경색 지정과 alt-header 역시 스크롤을 내려도 status-bar와 같이 고정될 수 있도록 입력 위처럼 스크롤을 내리면 alt-header 위치부터는 내용이 보이지 않도록 하기위해 배경색을 넣어주면, alt-header.cs.. 2021. 5. 28. KokoaTalk Clone Coding: settings screen 2 settings main screen html css 작성 main screen 안에 ul>li 태그로 각 settings__setting-column에 아이콘과 텍스트 입력 새로운 내용 없음 notices에는 new 클래스 이름 추가해서 업데이트 알림 만들어줌 alt-header__column 첫번째 icon을 누르면 more.html로 다시 돌아갈 수 있도록 anchor태그 입력 완성 2021. 5. 27. KokoaTalk Clone Coding: settings screen 1 setting screen alt-screen-header html css settings screen은 more.html에서 setting icon 누르면 이동 setting icon에 anchor 태그 추가해서 setting.html로 이동할 수 있도록 작성 setting.html은 more.html을 복사해서 붙여넣고, status-bar 와 navigation-bar를 제외한 main-screen 부분 삭제 screen-header 부분이 다음 번에 만들 chat 방의 screen-header와 비슷하게 생겨서 함께 사용할 수 있도록 alternative-screen-header.css를 생성 status-bar와 같은 형식으로 alt-header 아래 각 column을 만들고 각 아이콘과 텍스트.. 2021. 5. 27. KokoaTalk Clone Coding: more screen main screen html css 작성 more screen-header와 아이콘 구성이 같은 friends.html을 복사해서 more.html 파일을 생성 screen-header와 아래 정보는 friends.html에서 가져와서 사용 friends.html에서 setting icon에 업데이트 표시 추가를 위해 dot 클래스 추가해서 부모 클래스에 position: relative; 작성 후 위와 같이 위치 정보 추가 전화번호 뒤에 들어가는 느낌표와 비어있던 user-component__column 두번째에 icon 추가 more.css 생성하여 css 작성 icon 모음은 find.html에서 가져와 사용할 예정 find.html과 more.html에서 같은 icon 형식을 사용하기 위해 fi.. 2021. 5. 27. KokoaTalk Clone Coding: find screen 2 find screen (lower) html css 작성 open-chat 클래스에서 open-chat__header과 open-post 두 부분으로 나눠서 작성 upper 부분을 작성했던 것과 같이 직관적으로 알아볼 수 있도록 h6 태그를 사용 회색의 글자들이 많은데 조금씩 차이가 나도록 색을 주려고 하니까 코드가 지저분해지는 느낌 hashtags는 소문자로 작성하고 css를 통해 대문자로 변경할 예정 divider 클래스를 작성하지 않고 양옆의 span 태그를 이용해서 border를 만들어줘도 되지만 css를 연습하기 위해 작성함 justify-content: space-between 와 align-items: center는 아주 자주 쓰이는 조합 text-transform: uppercase 를 통.. 2021. 5. 20. 이전 1 2 3 4 5 6 ··· 11 다음
