기초공사 (html,css,javascript)

// 네이버 구조분석 중 .mobile-ul li:first-of-type p:before { content: ""; display: inline-block; width: 22px; height: 22px; /* background-image: url("../img/logos.png"); background-size: 444px 434px; background-position: -391px -73px; background-repeat: no-repeat; */ background: url("../img/logos.png") no-repeat -391px -73px / 444px 434px; vertical-align: top; border: 1px soli yellowgreen; } 저렇게 한번에 쓸수 ..

// 감싸고 있는 부모인 .widget-box-cotainer 는 height:0으로 된다. 자식요소 높이가 138px가 지정되어있는데도, 자식요소는 float:left로 되어있다. 그래서 부모에 ::after를 줘서 clear:both를 줘야한다. 코드, 위젯 보드 캘린더 2.29 목 로그인하기 메모 로그인하기 papago 번역하기 영어사전 css /* 위젯 */ .widget { padding: 15px 15px 100% 15px; margin-top: 15px; background-color: #f4f6fa; border: 1px solid salmon; text-align: left; } .widget > p { font-weight: 700; } .widget-box-cotainer { posi..

// https://velog.io/@cakecoder/CSS-%EC%8A%A4%ED%83%95%EB%94%9C-%EB%AC%B8%EC%84%9C%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%B0%EA%B2%BD-%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-%EA%B4%80%EB%A0%A8-%EC%86%8D%EC%84%B1%EB%93%A4 CSS 스타일 문서에서 사용하는 배경과 그라데이션 관련 속성들 background-size 값은 background-position 값과 함께 사용될 때만 단축형 구문에 포함될 수 있다. 즉, 두 값을 모두 명시하거나 background-position 값만 사용하면..

// https://www.youtube.com/watch?v=nxi1EXmPHRs&t=141s // 예제 -사진 https://github.com/dream-ellie/css-grid GitHub - dream-ellie/css-grid Contribute to dream-ellie/css-grid development by creating an account on GitHub. github.com

// 임의로 만들어봤다. 화면이 줄어듬에 따라 aside 두개는 안줄어들고 가운데만 변하게 하기 --> aside는 flex-basis를 주고, 안줄어 들게하는 flex-shrink=0을 주면된다. Flex-aside는 안줄어들고 가운데만 변하게하기 html css javascript Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quos vel culpa, adipisci dolores itaque voluptatibus voluptatem repellendus quaerat obcaecati illo ullam possimus officia tempora? Illo illum delectus sunt perferendis. AD 홈페이..

// static과 relative비교. 코드

// 1. 여기에서 드는 의문 그럼 왜 950사이즈를 //

// 1. right-box만 오른쪽으로 내리고 싶었으나, left-box와 같이 내려온다. 그래서 right-box에 빈 div를 만들어서 margin-top이나, height을 주었으나 역시나 left-box와 같이 내려왔따. 그럼 해결방법은??? --> left-box와 right-box를 서로 height를 주니 right-box에 margin-top을 주니 right-box만 내려간다.. 왜 height를 주니 내려갈까?

// 1. 메모에 초록색이 가득 안되진다. 해결--> // 1.

// Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nihil! 나는 none이다. Nisi nostrum harum delectus sed placeat alias sunt quo quia debitis iste, deleniti repellendus! Error? // 이 css에서 .none:hover { display: block; background-color: aquamarine; 에서 궁금증 자체요소:hover와 display:none에대해 ... 검색 : hover와 display:none관계 일반적으로 생각하면 그렇게 될 것 같지만, CSS의 작동 원리에 따라 실제로는 그렇게 작동되지 않는다. 'hover'는 마..