무정하지 않게 살기

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..

미디어 쿼리 media query 미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있습니다. - 미디어 타입 (어떤 타입인가, 음성 출력인가? 영상 출력인가? 미디어가 프린터기기 화면인지 음성기기인지, 어떤 미디어에서 노출이 되고 있는 것인지 등 ) - 조건에 대한 물음(미디어 특성) (=쿼리. 미디어의 크기 등) @medoa 미디어 타입 and 미디어 특성{ /* 해당 기기에서 사용할 CSS 코드 미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문 */ } 예를 들어 스크린 (pc와 모바일을 통틀어서 말하는 것) 인데, 기기 너비가 ..

상속 상속은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미합니다. 상속이 이루어지는 것은 대부분 글자로 이루어진 개별 요소들이고, 상속이 이루어지지 않는 것들은 대부분 블록으로 형성되어 박스가 되거나 영역이 표시되는 것들입니다. li의 요소를 선택하지 않아도 상위 요소의 ul에 적용된 스타일들이 하위의 li 요소들에게 적용 됩니다. 공용 키워드 모든 속성에 사용 가능한 키워드이며, 상속과 관계가 있습니다. inherit 상속이 가능한지 여부와 관계없이 해당 속성의 값을 받아올 수 있다. initial (브라우저에 지정되어 있는)해당 속성의 기본값을 요소에 적용한다. (브라우저의 초기값을 쓴다.) unset 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial..

기존에 선택자의 요소에는 여러 가지가 있다고 배웠습니다. 오늘은 그 기본 선택자 외의 선택자들에 대해서 알아보겠습니다. https://blue-dot.tistory.com/124 웹 CSS 입문 공부 12. 선택자, 선택자 우선순위 선택자란 선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보 입니다. 무엇을 CSS로 꾸며줄 것인지 스타일을 입힐 대상 요소에 대한 것을 지정하는 것이에요. 선택자에는 종류가 여러가 blue-dot.tistory.com 1. 특성 선택자(속성 선택자) 특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택합니다. 속성 존재 여부 값에 따른 요소 선택 - 기호를 추가해서 요소를 선택할 수 있는 방식 [class * = ] 클래스 값에 “it”..

이번엔 전 시간에 확인했던 flexbox의 각 속성들을 알아볼게요. 수업은 아래의 링크를 참고합니다. 공부 자료 출처 : https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9 유노코딩 강의/집필/기타 협업 문의 beansdrawer@naver.com 기업 및 기관 출강 가능합니다. 웹 프론트엔드(HTML, CSS, JavaScript, React)/파이썬/C언어 등. 배움의 과정에서 겪는 불필요한 고통들이 사라지길 바라고, 또 www.youtube.com ● flex-direction ● flex-wrap ● justify-content ●align-items ● align-self ● align-content 1. flex-direction 플..

콘텐츠를 원하는 위치에 삽입하는 것은 여러가지 방법이 있는데, 그 중 float, positon, 레이아웃 flexbox를 통한 방법을 알아보겠습니다. float (플롯) float는 요소가 문서의 일반적인 배치 외로 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하게 합니다. 속성값 의미 none 기본값, 원래 상태 left 자신을 포함하고 있는 박스의 왼편 right 자신을 포함하고 있는 박스의 오른편 문서의 일반적인 흐름(위에서 아래로, 왼쪽에서 오른쪽으로) 에서 마치 둥둥 뜬 것처럼 제외되지만 자신이 필요한 공간만큼은 가져갑니다. clear 속성 clear 속성은 float 요소 이후에 표시되는 요소들이 float의 영향을 받지 않고 (즉, float가 clear 해제된 상태) float ..

디스플레이display 는 우리가 보고 있는 이 화면의 구성 요소들에 대한 설정을 말합니다. 해당 속성값을 변경하는 것을 같이 알아볼게요. display 속성값 속성값 의미 inline 인라인으로 처리한다. block 블록 레벨로 처리한다. inline-block 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다. none 디스플레이(표시)하지 않는다. 인라인과 블록의 차이는 다음과 같습니다. 인라인은 너비와 높이를 임의로 결정할 수 없고, 콘텐츠 크기가 크기를 정합니다. 블록은 생성된 블록의 안에서 너비와 높이를 자유롭게 지정할 수 있습니다. 인라인 블록은 배치 될 때에는 최소한의 자리로 배치가 되지만 원한다면 너비와 높이를 추가정의 할 수 있습니다. border속성 테두리를 만..