반응형

HTML · CSS/HTML · CSS 코드 예제 만들기 6

클론 코딩 1. HTML / CSS 로 카카오톡 화면 구현하기 (1) 디자인 구상하기

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

Html / CSS 로 유튜브 홈 화면 구현하기 (3) 컨텐츠 창 만들기

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

Html / CSS 로 유튜브 홈 화면 구현하기 (2) 메뉴 만들기

다음으로 유튜브 홈 화면의 메뉴 부분을 만들어볼게요. 메뉴는 왼쪽에 햄버거 아이콘 아래의 부분입니다. 여기에서도 스타일 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 / CSS 로 유튜브 홈 화면 구현하기 (1) 헤더 만들기

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

웹 HTML 예제 만들기 2. 로그인 폼 만들기

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

웹 HTML 예제 만들기 1. 이미지로 하이퍼링크 만들기

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

반응형