이거 공부 했더니 어때?/HTML & CSS & JS
-
카카오톡 클론 코딩 #18 친구목록_행이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 24. 01:34
프로필사진, 닉네임, 상태메시지, 우측열의 형태로 구성되어 있는 친구목록_행은 친구창, 채팅창, 더보기창에서 모두 쓰이고 있습니다. 따라서 창마다 CSS를 만들 필요 없이, 친구목록_행에 필요한 CSS를 하나만 만들어 줄 수 있습니다. 이번 포스트에서는 친구목록_행을 구성한 다음, 복사-붙여넣어 주는 방식으로 수정해 보도록 하겠습니다. 그럼 friends.html의 친구목록_행인 friends_friend friend friend--lg를 복사하여, index.html의 친구목록_행 시작부분에 붙여 넣은 다음, 내용과 class명을 맞게 고쳐줍니다. 그리고 친구목록_행에 적용시킬 friend.css를 만들고 @import를 시켜 줍니다. 배경색을 주면, frined.css에 적용되는 수많은 친구목록_행을..
-
카카오톡 클론 코딩 #17 알림 물풍선이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 23. 01:01
이번 포스트에서는 네비게이션 바에 뜨는 알림 물풍선을 만들어 보겠습니다. 여기서 알림물풍선들은 각 아이콘(사용자, 물풍선 등)에 한정된 것이므로, position property를 잘 활용해 줘야 됩니다. 먼저 index.html에서 알림물풍선을 만들고, 엄마element인 물풍선은 position을 relative로, chile_element인 알림물풍선은 position을 absolute로 해 줍니다. 그럼 이제 알림물풍선이 우측 상단에 위치할 수 있도록 자리를 잡아 주고, 글자크기를 조정한 다음, 글자색은 흰색으로, 배경색은 #FE6420로 입력해 줍니다. 이번에는 알림물풍선의 크기를 조정한 다음, 글자를 상하 좌우 정가운데에 위치 시켜 줍니다. 마지막으로 border-radius의 값을 heigh..
-
카카오톡 클론 코딩 #16 box-sizing: border-box이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 22. 01:51
이번 포스트에서는 너비가 300px, 높이가 100px인 box를 가지고, box에 padding 값을 줄 때 생길 수 있는 문제를 해결해 주는 box-sizing: border-box;를 살펴 보겠습니다. 기본적으로 box에 padding-left: 20px;를 줄 때, 즉, box-sizing: border-box;를 입력하지 않았다면, box 내부에 padding 값만큼, 빈공간을 만들어 주기 위해, box의 크기를 20px만큼 더 키우고 내부에 padding, 빈공간을 만듭니다. (padding은 초록색으로 표시) 만약 box의 너비를 100%로 맞춰 놓고(브라우저 창에 맞추기), box에 padding값을 추가하면, box의 크기는 커지기 때문에, 우측 content는 padding값만큼 잘려서..
-
카카오톡 클론 코딩 #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를 ..
-
카카오톡 클론 코딩 #14 header CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 20. 01:33
이번 포스팅에서는 header 부분을 수정해 보겠습니다. 1> 정렬과(세로정렬->가로 정렬), 간격을 조정하고, 2> 왼쪽에 적힌 (어떤 창인지 알려주는)제목의 글자 스타일을 수정하고, (글자크기를 키우고, 굵기는 진하게) 3> 우측에 있는 아이콘들의 크기와 간격을 주는 순서로 고쳐 보겠습니다. 그럼 제일 먼저, 새 파일 header.css를 만들고, style.css에 header를 @import 합니다. 위와 같이 해 주고 header에 배경색을 주면, header부분이 잘 선택되었다는 것을 브라우저에서 확인할 수 있습니다. 1> dispaly: flex; 를 입력하여, 가로정렬을 세로정렬로 고쳐 주고, (div태그는 display: block이 default값, span태그는 display: inc..
-
카카오톡 클론 코딩 #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를 이용해..
-
카카오톡 클론 코딩 #12 resetCSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 18. 01:46
이번 포스팅부터는 CSS를 작성해 보겠습니다. 그 전에, CSS를 작업하기 위해서, resetCSS라고 불리는 것을 불러(import) 오도록 하겠습니다. 큰 파일인 resetCSS는 모든 스타일 값을 0으로 바꿔줍니다. 앞서 작성했던 수많은 HTML 태그들은 이미 스타일을 가지고 있습니다. ex. magin(마진), padding(패딩) 등 index.html, 채팅창의 검사(N)을 살펴보면, 헤더부분의 h1태그는 글자 크기와, margin, 마진이 따로 설정되어 있고, 네비게이션바에서 ul태그에서도 padding, margin의 값이 설정되어 있습니다. 위와 같이 스타일의 이미 설정되어 있는 값들을 사용하지 않고, reset하고 싶을 때(default값을 0으로 설정할 수 있지만..) resetCSS..