링크
-
카카오톡 클론 코딩 #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..
-
카카오톡 클론 코딩 #5 Navigation Bar이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 11. 01:55
이번시간에는 하단에 위치한 (3) navigation bar, 네비게이션 바를 만들어 보도록 하겠습니다. 먼저, navigation을 줄인 nav라는 클래스명을 가진 nav태그를 입력해 주겠습니다. 5개의 버튼은 리스트로, link태그를 이용하기 위해서는, ul을 먼저 만들어 주어야 합니다. li.nav__list-item*5>a.nav__list-link 입력 후, li태그 안에 a태그를 이용하면, nav__list-item이라는 클래스명을 가진 li태그와, 그 안에 nav__list-link라는 클래스명을 가진 a태그를 만들 수 있습니다. 하이퍼링크에 ./friends.html을 입력하여, 친구창으로 이동할 수 있도록 해 주겠습니다. 차례대로 채팅창, 검색창, 게임창, (game.html을 추가해 주..
-
HTML 태크 구조이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 16. 04:50
이번시간에는 HTML 태그에 대해 공부해 보도록 하겠습니다. 저번시간에 말했듯이, HTML은 태그 덩어리이기 때문에, 태그를 먼저 알아야 합니다 HTML 파일을 직접 만들어보면서, 태그를 배워보도록 하겠습니다. 디폴트 값으로 index파일을 제일 먼저 찾도록 웹 서버들은 설계되어 있기 때문에, Visual Studio Code를 열어 index라는 이름으로 파일을 만들어 보겠습니다. KAKAO-CLONE 옆에 있는 아이콘, New File을 클릭하여, index.html이라는 이름으로 파일을 만들어 주면 됩니다. 태그의 구조를 살펴보면 내용 이런식으로 생겼습니다. 예를 들자면, Human, 인간 으로 또는 Dog, 멍멍이로 쓰인다고 이해할 수 있습니다. 이게 웬 새로운 태그냐 하시는 분들도 있으실지 모르..