div
-
카카오톡 클론 코딩 #7 Friends Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 13. 01:30
이번 포스팅에서는 friends screen, 친구창을 만들어 보겠습니다. 채팅창을 살펴보면, 상태표시줄, status bar과 네비게이션바, navigation bar는 저번 포스팅에서 만들어 보았고, 이번 포스팅에는 그 사이에 사진, 이름, 상태메시지, 그리고 노래를 넣어 주도록 하겠습니다. 그리고 카카오톡 사용자와 친구의 크기 차이가 있기 때문에, 크기에서 차이를 주면 됩니다. 그럼 카카오톡 유저의 사진, 이름, 그리고 상태메시지를 만들어 보도록 하겠습니다. 그 전에, 프로필 사진들이 둥근 모양의 형태로 전부 같은 스타일로 되어 있기 때문에, 이미지를 위한 전역, global 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..
-
카카오톡 클론 코딩 #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..
-
의미있는 태그 vs. 의미없는 태그이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 19. 04:50
이번시간에는 두 가지 종류의 태그, (1) semantic, 의미있는 태그와 (2) non-semantic, 의미없는 태그에 대해서 알아보도록 하겠습니다. 먼저, 의미있는 태그들의 예를 몇 가지 살펴보겠습니다. 예를 들어, h1 태그는 헤더 1이라는 의미로, 의미 있는 태그입니다. 그럼, 이번에는 section태그를 보면, 섹션, 구획을 의미한다는 것을 알 수 있습니다. section태그말고도, article, 항목태그를 사용할 수도 있고, header, 헤더태그도 이용할 수 있습니다. 반면, div태그는 non-semantic tag, 아무런 의미가 없는 태그입니다. 굳이 뜻을 찾자면, division, 나눈다는 정도의 의미를 갖는다고 할 수 있습니다. 즉, div태그는 header, 헤더, foote..