태그
-
카카오톡 클론 코딩 #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 클래스로 만들어서 사용할 수 있습니다. 즉, 글로벌 스타일을 위한 파일을 만들어서, 웹사이트의 모든 곳, 어떠한 위치에도 영..
-
tag, 태그에 이름 설정(ID, Class)이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 20. 03:45
HTML문서에는 같은 태그가 여러번 쓰이기 때문에, 여러번 쓰인 동일한 태그가 각각 어디에 어떻게 쓰였는지, 헷갈리고 혼란스러워 질 수 있습니다. 예를 들어, div태그가 여러번 쓰이게 되면 헷갈릴 수 있기 때문에, 여러번 쓰인 div태그가 각각 무엇을 뜻하는지를 지칭한다면, 각 태그들을 헷갈리지 않고, 구분할 수 있습니다. 그럼 다시, section태그와 header태그, 그리고 header안에 h1태그를 만들어서, 예를 들어 보도록 하겠습니다. 또, 하단에 div태그를 만들고, div태그안에 header태그를 만들겠습니다. 이렇게 두 번 쓰인 header태그는 동일한 header라는 명칭을 갖고 있기 때문에, 구분이 되지 않습니다. 따라서, 두 header태그를 각각 이름을 정해줌으로써 구분할 수 있..
-
의미있는 태그 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..
-
HTML문서 작성 #2이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 18. 05:05
이번시간에는 meta 태그, 엑스트라, 추가 정보를 작성할 수 있는 태그에 대해 배우도록 하겠습니다. 먼저, meta 태그에 character encoding을 뜻하는 charset을 attibute자리에 쓴 후, 우리는 여기서 값을 utf-8를 써 줍니다. UTF-8은 문서를 encoding 해 주고, 다시 말하면, UTF-8방식의 encoding으로 해당 문서를 작성한다는 뜻입니다. 만약 러시아어나 프랑스어로 문서를 작성했을 경우에는, encoding은 다른 방식으로 세팅해 주어야 합니다. (UTF-8은 거의 모든 언어가 출력 가능합니다.) 정리하면, UTF-8 코드는 브라우저에게 우리가 작성하는 문서가 어떠한 언어, character로 작성되었는지를 알려줍니다. 따라서 잘못 셋팅하게 된다면, 웹 문..
-
HTML 문서 작성이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 17. 02:15
이번시간에는 HTML 문서를 만들어 보도록 하겠습니다. 지난 시간에 작성해 본 것은, 틀에도 맞지도 않고, 제대로 된 HTML 문서의 형태가 아니였습니다. 그래서 이번시간에는 Visual Studio Code, VSC에서 제대로 된 HTML 문서를 작성해 보도록 하겠습니다. 제일 먼저, 태그를 작성하여, 문서 시작을 명령해야 됩니다. 위 태그는 구글 크롬에게 지금 만드는 이 문서가 HTML 문서임을 알려줍니다. 그런 다음, 태그로 문서를 열고 닫을 수 있습니다. 위 태그 사이에 있는 내용들이 무엇이든 간에 모두 HTML 문서라는 것을 지칭합니다. 그럼 여기서 잠깐! 은 왜 닫지 않는지에 대해 궁금할 수 있습니다. 태그는 self-contained 태그라고 해서, 태그 자체로 정보를 제공하기 때문에, 혼자..