코로나19 대응 방안에 대한 최신 정보를 확인하세요 숙소 체험 온라인체험 호스트 되기 위치 어디로 여행가세요? 체크인 날짜 입력 체크아웃 날짜 입력 인원 게스트 추가 10만 명에 달하는 우크라이나 피란민에게 임시 숙소를 제공해주세요 자세히 알아보기 호기심을 자극하는 숙소로 떠나보세요 유연한 검색 설레는 다음 여행을 위한 아이디어 서울 1km 거리 대구 239km 거리 대전 141km 거리 수원시 32km 거리 .wrap { background-color: white; width: 80%; max-width: 1920px; margin: 0 auto; overflow: hidden; } @media screen and (max-width: 767px) { .wrap { width: 90%; } } .bla..

CSS Diner 소개 - 기본적은 CSS 선택자 복습 ● : 가상클래스 ● :: 가상요소 ● 태그이름 ● .을 이용해서 클래스 선택가능 ● #을 통해서 id 선택가능 추가적인 CSS 선택자 ● *로 모든걸 선택할 수 있음 ● 선택자 + " " + 선택자 로 선택가능 ● 선택자 + "+" + 선택자: 다음 클래스에 적용가능 ● 선택자 + ">" + 선택자: 직계자손만 선택해서 적용가능 ● 선택자 + "~" + 선택자: 앞 선택자 다음에 뒤 선택자 나오면 적용 ● [] : 속성 선택자 CSS 가상 클래스 ● : 로 선택함 ● :hover 는 마우스를 올리면 적용 ● :link 는 사용자가 클릭하기 이전의 링크에 적용 ● :visited 는 클릭을 한번이라도 한 링크에 적용 ● p:net(.class) 는 ..

사용자 몰래 값을 전달하는 input 태그의 hidden 속성 ● 동일한 폼이 여러개 있거나 그 폼을 제출하면서 서버가 알아야할게 있다면 hidden속성 사용함 이모티콘 같은 문자는 svg태그 ● vector data: 그래픽이 어떤 부분에서 어떤 모양으로 휘어지는지, 어떤 색으로 채워지는지 정보를 가지고 있기 때문에 확대해도 깨지지 않음 ● bitmap data: 확대를 할 때 이미지가 깨짐 ● svg는 vector data i태그의 재활용-fontawesome, bootstrap ● cdn가지고 와서 link 태그 안에 넣기 ● fontawesome, bootstrap에서 원하는 아이콘 찾아서 i태그로 복사 붙여넣기 ● html을 복사해서 body안에 넣어도 되지만 안에 내용이 무엇을 의미하는지 모르..

웹어플리케이션이란 ● 정적인 콘텐츠를 보여주기만 하는게 아니라 우리의 웹페이지에서 사용자와 소통을 할 수 있는 곳 .top-left span { cursor: pointer; } .top-left span:nth-of-type(1):hover { color: red; } #fill-heart { display: none; fill: red; } ● 커서와 클릭을 통해 하트가 반응하게 만들 수 있음 정보를 제출할 땐 form태그 ID : PW : ● form 태그로 로그인 입력창 만들기 ● 로그인 클릭 시 result.html로 가게 만들기 form 태그의 action과 method 속성 ● form 태그엔 action과 method를 필수로 가지고 있어야함 ○ action은 사용자가 input태그를 통해..

기본 구조 잡기 body { background-color: #c6c6c6; margin: 0px; } .wrap { background-color: white; width: 375px; height: 100vh; margin: 0 auto; display: flex; align-items: center; } .instargram { width: 100%; height: 550px; border: 1px solid black; display: grid; grid-template-columns: 1fr; grid-template-rows: 50px 375px 1fr; grid-template-areas: "header" "img" "footer"; border-top: 1px solid lightgray;..

div태그로 공간 나누기 ● 일단 div태그로 나누자 ○ 유지보수가 쉬워짐 ○ 협업이 쉬워짐 ○ class와 id이름은 직관적으로 넣자(명사+명사 형태로) inherit ● 자식태그는 부모태그의 스타일 속성을 따라감 px,em,rem ● 일반적으로 16px = 1em = 1rem ● 부모태그에게 font-size 속성이 있으면, 그 속성을 1em으로 계산함 ● rem은 16px로 설정되어있음 ● font-size같은 경우는 rem으로 해줘야함 ○ 크롬브라우저에서 글꼴크기를 변경하면 px은 작동되지않음(크기가 변하지 않음) ● 일반적으로 px이 가장 많이 사용됨 레이아웃 만들기- display_inline .container { width: 100px; height: 600px; border: 1px so..