상태표시줄
-
카카오톡 클론 코딩 #15 네비게이션 바 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 21. 01:32
이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다. 앞선 포스트에서 했던 방식대로, 제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다. 그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다. 상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거) position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에, position: fixed를 쓸 때는 꼭 width를 ..
-
카카오톡 클론 코딩 #13 상태표시줄이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 19. 01:45
이번 포스팅에서는 상태표시줄을 만들어 보겠습니다. 그 전에, style.css에서 몇 가지 값을 default 하겠습니다. body에서 배경색은 흰색으로, padding값은 10px(상하), 20px(좌우)로 설정해 줍니다.(page ruler redux이용) 그리고 글자색은 #1D1D1D로 설정해 줍니다(pick color from page 이용) css파일과 html파일을 함께 볼 수 있도록, style.css는 창 위에, index.html을 창 아래쪽에 두도록 하겠습니다. 이제 status-bar.css라는 새파일을 만들어서, styles.css에 import 합니다. 아래와 같이 배경색을 넣어 보면, 상태표시줄 부분이 선택 되었다는 확인할 수 있습니다. 이번에는 dispaly: flex를 이용해..
-
카카오톡 클론 코딩 #3 status bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 9. 06:55
이번 포스팅부터는 처음에 열리는 페이지인 index.HTML, 채팅 목록 창의 전체 구조를 만들어 보도록 하겠습니다. 이번 포스팅에는 (1) status bar, 스테이터스 바 를 만들고, (2) header, 상단, (3) navigation bar, 네비게이션 바, 하단을 만들고, (4) 그리고 채팅창을 순서대로 만들어 보겠습니다. 여러 번 반복해서 쓰일 상단, status bar와 하단부분, navigation bar는 컴포넌트 단위로 시작하거나, 반복되는 페이지로 시작하도록 하겠습니다. 이제 Emmet의 html5 단축명령, html: 을 입력 후, 탭키를 눌려주거나, html:5를 선택하여 엔터키를 눌려주면, html5 코드를 확인할 수 있습니다. title, 제목은 chat | Kakao Cl..