기본 선택자 ● * 전체 : 모든 요소를 선택함 ● div 요소 ● . 클래스 ● # 아이디 ● [attr] 특성 그룹 선택자, 결합자 ● , 그룹 선택자 ● 한 칸 공백은 자손결합자 ● > 자식 결합자 ● ~ 일반 형제 결합자 ● + 인접 형제 결합 가상 클래스 선택자 ● 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음 ● :hover, :focus, : active, :checked ● :disabled 약간 색이 빠진 색깔로 나옴 ● &:first-child(), &:last-child(), &:nth-child(), &:only-child() 가상 요소 선택자 ● ::before, ::after, ::placeholder 단축속성 ● margin과 padding의 단축속..

CSS란 ● 종속형 시트 또는 캐스케이딩 스타일 시트 ● 마크업 언저가 실제 표시되는 방법을 기술하는 스타일 언어 ● Style sheet 언어 ● css문법 ○ 선택자{정의} ○ 선택자{속성: 속성값;} ○ p{color: red;} CSS속성들 ● background, border, bos-sizing, display, bottom, font, margin 등등 핵심 CSS 속성과 작성팁 ● 위에서 선언한것이 밑에 선언한것을 덮어쓰기 때문에 순서를 지켜주는것이 좋음 CSS Box Model ● border-box를 선언하지 않으면 기본으로 content-box로 되어있음 position ● absolute는 기준이 바로 위에 있는 부모가 됨 ● relative는 기준이 브라우저가 됨 ● fixed는 ..

transform 속성 ● ui를 브라우저에 그리는 순서를 만드는 방법 ○ dom-tree ○ layout: width, height ○ paint: color ○ camposite: transform 복잡한 애니메이션이 필요할 때 - animation 속성 ● wiggle 사용하기 마우스 움직임 추적하기 ● mousemove로 마우스 추적하기 x : , y : ● 커서의 위치에 따라 div의 위치 바꾸기 x : , y : ● transform으로 커서 따라 움직이기 x : , y : ● 마우스의 움직임에 따라 글씨 쓰기 안녕하세요! 째재입니다. #targetBox { width: auto; display: inline-block; border: 1px solid red; position: relativ..

CSS 애니메이션 첫 걸음 -transition ● transiton: 어떤 속성이 변할 때 얼마만큼의 시간을 사용할지 설정가능 ● ease-in: 천천히 가다가 빠르게 감 ● ease-ont: 빠르게 가다가 천천히 감 ● ease-in-out: 천천히 가다가 빠르게 가다가 천천히 감 HTML에서 Javascript 사용하기 ● 로 영역 만들어주기 ● console.log(); 로 콘솔 창에 출력하기 JavaScript로 선택하는 HTML 태그 ● js는 태초부터 웹 ui를 제어하기 위한 언어였음 ● js로 제어하고 싶은 html 태그를 선택 ● 어떤 이벤트가 발생했을 때 제어할 것인지 선택 ● css 변경 ● . 을 ~으, ~에 로 해석 ● var, let, const 로 변수 만들기 addEventL..

CSS도 계층적으로! SASS ● SASS(SCSS): CSS의 확장언어 ○ CSS보다 조금 더 높은 자유도를 개발자들에게 부여함 ○ 자유도가 높다는건 지켜야할 문법들이 많다는 것이므로 주의해야함 ○ 변수, 반복문, 가정문도 사용할 수 있음 ● 브라우저가 읽을 수 있는 언어: HTML, CSS , JS ○ SASS를 CSS로 컴파일 할 수 있어야함 ○ VSCode에서 live sass compiler 확장자 설치 ○ 파일 > 기본 설정 > 설정> 설정 열기 > "liveSassCompile.settings.generateMap": false 입력해서 map파일 안생기게 하기 SASS에서 다루는 CSS-nesting구조 ● html의 계층적인 구조에 맞게 코딩 SASS에서 다루는 CSS-기초문법 ●한 줄 ..

코로나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..