무정하지 않게 살기

HTML 과 CSS로 카카오톡 메신저 화면과 유사한 ●●톡 메신저 화면을 구성하는 것을 진행해보고자 합니다. 자바 스크립트를 사용하지 않고, 그저 화면 디자인과 구성만 하는 것이니 간단하게 따라할 수 있어요. 우선 이번에 만들 화면의 샘플 홈페이지는 다음과 같습니다. (1) 로그인 접속 화면 (2) 친구 목록 화면 (3) 채팅 목록 화면 (4) 채팅창 화면 전체적인 윤곽 잡기 우선 세부적인 디자인을 하기 전 전체적인 윤곽을 잡아줍니다. 생성해야 할 폴더 생성해야 할 html 페이지 components - 공통(재사용) css pages - 각 페이지의 css index, 채팅창, 친구목록, 채팅목록 각 html에 대한 css 파일을 생성해줍니다. html의 명과 동일한 이름의 css 파일로 만들어주세요...

이번에는 상단의 헤드와 메뉴 네비게이션 창에 이어서 컨텐츠 창을 만들어볼게요. 컨텐츠창은 영상의 썸네일이 추가되고 조회수와 시간이 표시되는 곳입니다. 마찬가지로 reset.css 를 추가해줄 것이고, 썸네일창인 thumbs.css도 만들어서 스타일 시트를 작성해줄게요. 우선 본문 영역의 코드를 보겠습니다. html의 영역이 길지만 같은 영역을 여덟번 반복한 것이에요. 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상 제목 게시자 조회수 100회 · 1시간 전 영상..

다음으로 유튜브 홈 화면의 메뉴 부분을 만들어볼게요. 메뉴는 왼쪽에 햄버거 아이콘 아래의 부분입니다. 여기에서도 스타일 rss 시트를 따로 만들어줄 거예요. (1편 참고!) .nav{ position: fixed; top: 0; left: 0; z-index: 10; } .nav__wrapper{ min-width: 100px; min-height: 100vh; background-color: #f8f8f8; padding: 80px 0 0 0; list-style: none; } .nav__wrapper li{ display: flex; padding: 10px 16px 10px; } .nav__wrapper li:hover{ background-color: #eaeaea; } .nav__icon{ b..

유튜브 화면의 구성을 구현해보는 예제를 작성해봅니다. 유튜브 화면 구성 모델링 유뷰트 홈 화면을 구현하기에 앞서 간단하게 홈의 세 부분을 나누어볼 수 있어요. 이렇게 세 개의 html 을 작성해서 하나의 html 으로 만드는 작업을 합니다. 메 뉴 창 헤더 콘텐츠 바디 시작하기에 앞서웹 브라우저에서 기본적으로 주는 스타일이 있습니다. 우리는 반응형 웹 사이트로 브라우저의 기본 스타일을 적용하는 것을 배제해서 직접 설정해주도록 할 것이기 때문에 설정되어 있는 것을 초기화 clear 해주어야 합니다. 작성 reset.css reset.css는 브라우저의 기본 스타일을 삭제하기 위해 사용하는 css 입니다. 에릭 마이어의 reset css를 사용하면, 기존 사용하던 브라우저의 스타일을 삭제할 수 있습니다. h..

입력을 할 수 있는 input 태그와 제출 submit을 할 수 있는 form 을 배웠으니 이번에는 로그인 창을 직접 만들어볼게요. https://blue-dot.tistory.com/119 웹 HTML 입문 공부 9. form 데이터 전송, fieldset form은 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그입니다. 여기에서 서버란, 정보를 제공하는 호스트(host)를 말합니다. 가령, 우리가 티스토리 홈페이지를 열고자 할 때 blue-dot.tistory.com 회원 가입 로그인 정보 아이디 비밀번호 비밀번호 확인 개인 정보 이름 메일 주소 상기 코드의 실행화면은 다음과 같습니다.

하이퍼링크를 표시하는 방법에 대해서 배워보았으니 각 이미지를 클릭하면 해당 하이퍼링크를 표시하는 태그를 작성해보겠습니다. https://blue-dot.tistory.com/115 웹 HTML 입문 공부 6. 하이퍼링크 표시 링크 anchor 링크는 anchor (앵커, 축, 정박지, 닻 과 같은 의미를 가집니다.) 의 약자인 a 태그를 사용합니다. 하이퍼링크를 표시하는 태그는 다음과 같습니다. a 태그 요소는 href 속성을 통해 다른 페 blue-dot.tistory.com 그림의 출처는 픽사베이의 저작권 프리 이미지를 사용했습니다. https://pixabay.com/ko/ 놀라운 무료 이미지 - Pixabay 놀라운 무료 이미지 우리의 관대한 커뮤니티를 통해 공유되는 0.1 백만개의 이미지와 비디..