목록2024/03 (23)
기초공사 (html,css,javascript)
// 여기에는 site 만들면서 궁금한것들을 적을 생각이다. 노션을 배울까도 했지만 시간이 없어서... 궁금1. 화면을 줄였을떄 저기 표시된 부분이 안줄었으면 하려면?? flex: 0 0 60% flex-shrink를 0으로 했는데도 화면의 크기를 줄어드니 줄어든다;;;;나는 분명 flex-shrink를 0으로 했는데.. 왜 줄어들지?... --> flex-shrink 속성이 0으로 설정되어 있음에도 불구하고, 아이템이 줄어드는 현상이 발생하는 이유는 flex-basis 속성 때문일 수 있습니다. flex-basis: 60%는 아이템의 기본 크기가 컨테이너의 전체 크기의 60%를 차지하도록 설정합니다. 이 경우, 화면 크기가 줄어들면 컨테이너의 크기도 함께 줄어들게 되고, 그에 따라 아이템의 절대적 크기..
// //1. String concatenation console.log("my" + "cat"); // my cat console.log("1" + 2); //12 console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals:1+2=3 //2. Numeric operators console.log(1 + 1); //add console.log(1 - 1); //substract console.log(1 / 1); //divide console.log(1 * 1); //multiply console.log(5 % 2); //remainer console.log(2 ** 3); //2의 3승.. //3. Increment and decremen..
// // https://chohyeonjunn.tistory.com/74 소스코드 수정 후 git 저장소에 반영하기 소스코드 수정 후 git 저장소에 반영하기 일반적으로 소스코드를 수정하는 것은 두 가지 사례로 나뉘게 됩니다. 해당 프로젝트에 소속된 사람이 아닌 경우 만약 우리가 특정한 커뮤니티(Community) chohyeonjunn.tistory.com
// 네이버 구조분석 중 .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://www.elegantthemes.com/ The Most Popular WordPress Themes In The World Promote Split Testing, Lead Generation, and Social Media Integration Harness the power of the Elegant Themes plugin suite, including Bloom and Monarch, the best tools for gathering leads and building your social following online. Use Divi's built-in split www.elegantthemes.com 이 사이트와 똑같이 만들어보고싶다. flex도 섞여있고, 바탕까는것도 ..
// 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 홈페이..