만기레벨업일지

CSS CSS가 도입된 이유 1. HTML이 정보에 전념하게 하기 위해서 HTML의 디자인에 대한 기능을 분리한 것 2. CSS를 통해서 웹 페이지를 디자인 하는 것이 HTML을 통해서 디자인 하는 것 보다 훨씬 효율적이다. 적용방법 1. style 태그 사용하기 CSS도 하나의 프로그래밍 언어이기 때문에 웹 브라우저가 HTML 파일을 읽을 때 태그를 통해서 해당 부분을 CSS문법으로 읽을 수 있다. 2.HTML 태그의 style속성으로 사용하기 style 속성 : 값으로 반드시 css의 효과가 들어온다. 3. link 태그 사용하여 css 파일 불러오기 웹 브라우저가 최초 한번 css 파일을 다운받으면 저장해두고 이후에 더 빨리 로드할 수 있는 캐싱효과를 볼 수 있다. 또한 여러 html 파일에서 동일..

팀 프로젝트 - 인스타그램 클론 코딩 3일차 - 현재까지 진행 결과 - 완료된 기능 레이아웃 완성 마우스 호버 기능 게시된 글 모달 창 기능 - 마우스 호버 기능 .css 파일 .hover_text { visibility: hidden; position: absolute; top: 40%; left: 35%; } .mypage_post:hover { filter: brightness(50%); opacity: 0.7; } .mypage_post:hover .hover_text { visibility: visible; } .hover_text 는 게시글에 마우스를 올리기만 했을때 나타날 이모티콘 text div 이다. 마우스 커서가 없을때는 보이지 않아야하므로 visibility: hidden 을 사용하여..

인스타 UI 클론 코딩 프로젝트 - 기획 - 구현한 기능 # 사이트 헤더 왼쪽 상단의 로고 검색어를 입력할 수 있는 검색창 오른쪽 상단의 아이콘들 # 사이트 본문 1. 우측에 친구 추천 리스트 - 프로필사진, 아이디, 내용, 팔로우 버튼 배치 - 위치 고정하여 스크롤 움직여도 위치 유지 2. 좌측에 게시물들 - 상단에 네임카드 ( 프로필사진, 아이디 ) 배치 - 옵션 : 더보기 버튼 배치하여 클릭하면 모달 동작 - 본문 사진은 캐러샐을 사용하여 여러장 배치 가능 - 좋아요/댓글 이모티콘 배치 - 본문 내용 배치 : 본문 줄이기 기능은 구현하였으나 더보기 버튼 클릭시 전체 본문이 나타나지 않음.. - 댓글 기능 : 댓글을 쓰기와 기록 기능 3. 사이트 footer - 우측 하단에 정보를 볼 수 있는 foo..

서버와 클라이언트 - 동작 개념 : 클라이언트가 서버 API(창구)에 요청 서버는 만들어진 파일을 보내준다. 클라이언트는 받아서 그려준다. - 서버 → 클라이언트 : HTML(뼈대), CSS(꾸미기), 자바스크립트(동작), 데이터(json) html 과 css - html 페이지를 구성하는 '뼈대' 라고 보면 된다. head 와 body로 구성되어 있으며, head에는 페이지의 속성, body에는 페이지의 내용이 들어간다. 태그들마다 다양한 기능을 갖고 있지만, 외우려고 애쓰지 말고 필요한 것들은 구글링해서 가져다 쓰자. - css html의 내용을 꾸밀때 사용한다. head 안에 로 들어가며 지칭할 이름이 필요하다. html 과 css 사용해보기 : 간단한 로그인 페이지 왼쪽 결과를 보고 먼저 어떤 기..