ul태그
-
카카오톡 클론 코딩 #10 설정창이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 16. 06:21
설정창은 각 창들의 상단의 위치한 톱니바퀴를 누르면 실행되는 창이기 때문에, 그럼 더보기창의 톱니바퀴를 눌렀을 때, 설정창으로 넘어가도록 more.html의 header부분의 톱니바퀴 아이콘에 하이퍼링크를 걸어 주겠습니다. (다른 창들의 톱니바퀴도 똑같이 수정해 주면 됩니다) 이제 설정창을 살펴 보면, 다른 창과 유사하게, 1> 상태표시줄, header, 그리고 2> 두 개의 목록들, 3> navigation bar로 이뤄져 있습니다. 위와 같이 만들어 주기 위해, more.html을 복사해서 settings.html에 붙여 넣은 후, 위쪽부터 차례대로 수정해 주도록 하겠습니다. 먼저 창의 타이틀, 제목을 바꿔주고,(더보기 -> 설정) 그리고 header에 위치한 title, 이름도 (더보기->설정으로)..
-
카카오톡 클론 코딩 #7 Friends Screen이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 13. 01:30
이번 포스팅에서는 friends screen, 친구창을 만들어 보겠습니다. 채팅창을 살펴보면, 상태표시줄, status bar과 네비게이션바, navigation bar는 저번 포스팅에서 만들어 보았고, 이번 포스팅에는 그 사이에 사진, 이름, 상태메시지, 그리고 노래를 넣어 주도록 하겠습니다. 그리고 카카오톡 사용자와 친구의 크기 차이가 있기 때문에, 크기에서 차이를 주면 됩니다. 그럼 카카오톡 유저의 사진, 이름, 그리고 상태메시지를 만들어 보도록 하겠습니다. 그 전에, 프로필 사진들이 둥근 모양의 형태로 전부 같은 스타일로 되어 있기 때문에, 이미지를 위한 전역, global 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..
-
HTML 중첩 태그이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 13. 18:35
HTML 중첩 태그란 태그(들)을 포함하거나, 다른 태그에 포함되어 사용되는 태그를 말합니다. 목록 태그: 어떤 항목(요소)들을 포함하기 위해 목록을 만들 때 사용하는 태그로, 1. ul태그, 2. ol태그가 있고, 목록의 요소들을 표현하는 3. li태그가 있다. 1. ul태그: unordered list(순서가 없는)의 줄임말로, 목록을 만들 때 사용하는 태그. 2. ol태그: ordered list(순서가 있는)의 줄임말로, 목록을 만들 때 사용하는 태그. 3. li태그: list item의 물임말로, 목록의 요소를 만들 때 사용하는 태그로, 또다른 목록을 포함시킬 수 있다. 테이블 태그: table태그는 표를 만들 때 사용하는 태그. *표의 레이아웃, 디자인은 CSS이용 (1) tr태그: table..