기초공사 (html,css,javascript)

// 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'는 마..

//

// 아카데미 / css / day04 / 1_css배경.html 테스트로 해볼것. #circle { width: 48px; /* px단위는 4px 단위로 올려주는게 빠르다. */ height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 4px; background-color: aquamarine; /* ---내가 테스트--- */ padding: 20px; /*=>이걸주면 border까지 총 92px가 된다 하지만 box-sizing:border-box를 체크하면 padding과 border까지 합한 48px가 된다.*/ border: 2px solid red..

// https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com

// https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9D%B4%EC%A6%88-%EB%B9%84%EC%9C%A8-%EB%A7%9E%EC%B6%94%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-object-fit-background-size-position 🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position) 프론트를 작업할때, 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위 ..

1. .aside-banner { width: 100%; padding: 30% 0; margin-top: 15px; border: 1px solid grey; background-image: url("../img/aside-img.jpg"); background-repeat: no-repeat; background-size: contain; } 여기에서 난 높이를 px로 주기싫다 반응형시 골치아프기 떄문이다. height를 또 따로주기 싫다 .그럼 padding을 이용하자!! 동적으로 변하니 말이다. 그럼 여기에서 padding: 30% 0; 의 의미는 몰까? 부모너비의 30%를 padding으로 쓰겠다는 것이다. 예를 들면, 부모너비가 1000 px일때 1000 * 0.3이므로 300px가 나온다. ..

1. .aside-banner { width: 100%; padding: 30% 0; margin-top: 15px; border: 1px solid grey; background-image: url("../img/aside-img.jpg"); background-repeat: no-repeat; background-size: contain; } 여기에서 난 높이를 px로 주기싫다 반응형시 골치아프기 떄문이다. height를 또 따로주기 싫다 .그럼 padding을 이용하자!! 동적으로 변하니 말이다. 그럼 여기에서 padding: 30% 0; 의 의미는 몰까? 부모너비의 30%를 padding으로 쓰겠다는 것이다. 예를 들면, 부모너비가 1000 px일때 1000 * 0.3이므로 300px가 나온다. ..

// https://developing-move.tistory.com/30?category=884479 [HTML] Contents 구분(1) - header, footer, h1 ~ h6 ▶ 소개나 탐색을 돕는 그룹 일반적으로 사이트 가장 상단 부분에 bar가 있으면 header라고 지칭. 로고, 메뉴, 검색 바, 로그인/로그아웃, 회원가입 버튼 등으로 구성. 내에는 다른 나 가 자손으로 developing-move.tistory.com 사이트 https://velog.io/@oct14/HTML-section%EA%B3%BC-article%EC%9D%98-%EC%B0%A8%EC%9D%B4

아침메뉴 점심메뉴 저녁메뉴 아침메뉴w300 점심메뉴 저녁메뉴 위의코드에서 우선순위를 알아볼때 .header-menu-item { background-color: pink; } .header-menu-item.w-300 { background-color: yellowgreen; } .w-300 { width: 300px; background-color: blue; } 에서 제일 끝에 있는 .w-300 : blue 가 높아야 하는데. .header-menu-item.w-300 : yellowgreen 이 더 높다.

// 참고사이트 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com //