뇌 채우기 공간

2021.04.21 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 중간부분 visual section만들기 / section의 공통 css정의 [깃허브 예제] 중간부분 visual section만들기 / section의 공통 css정의 이렇게 중간 영역을 만들 것이다. summary는 계속 반복되니까 공통css로 올려준다. 뒤에서 계속 이런식으로 반복된다. 그리고 max-width와 margin도 공통부분이므로 공통부분에 작성해준다. max-width: 980p sso-feeling.tistory.com 배경 이미지를 조금 어둡게 만들기 .section--visual::before{ content: ""; position: absolute; top: 0; left: 0; width: 10..

이렇게 중간 영역을 만들 것이다. summary는 계속 반복되니까 공통css로 올려준다. 뒤에서 계속 이런식으로 반복된다. 그리고 max-width와 margin도 공통부분이므로 공통부분에 작성해준다. max-width: 980px; margin: 0 auto; /* section & inner */ .section{ position: relative; } .section .inner{ max-width: 980px; margin: 0 auto; box-sizing: border-box; position: relative; /* position : absolute가 이 자식요소에서 사용 했을 시에 여기서 걸리게 하려고 */ } position에 대해서 잘 모르겠다면 2021.04.17 - [WEB/htm..

예제와 지금까지 만든 것과 차이가 있다. 순서가 차이가 있다. order로 해주겠다. header .btn-group{ /* order의 순서가 높을수록 뒤로 밀려난다. */ order: 2; } #search-form{ /* id는 고유하기 때문에 앞의 선택자 명시할 필요없음 */ order:1; } .sub-menu{ } submit 버튼 없애기 #search + [type="submit"]{ /* search의 다음 형제인 type이 submit인 요소 */ display: none; } 전체코드보기 더보기 GitHub Personal Open source Business Explore Sign in Sign up Pricing Blog Support /* COMMON */ .body__contai..

이제 오른쪽 메뉴를 만들어보자 그런데 서브메뉴/ 검색/ 버튼 순서대로 이다. 이 순서로 만들어야하나? 그렇지 않다. 개발자 도구로 들어가본다 이렇게 나오는데 햄버거 버튼 안에 메뉴가 들어가있다. 이렇게 메뉴/ 버튼/ 검색 메뉴가 된다. 이렇게 기본적으로 위에서부터 아래로 쌓이는 개념을 먼저 작업해주어야한다 a태그 밑줄 없애기 a{ text-decoration: none; } Sign in Sign up Pricing Blog Support 어떻게 요소들을 좌 우로 나누어야하나? 지금 이렇게 세로로 되어있는데 저 sign in 버튼 부터 pricing까지가 오른쪽 상단으로 가야한다 그것은 float을 사용하면 된다. 2021.04.17 - [WEB/html,CSS] - [html][css] float 속성..

header .logo a{ background: url("../img/logo.svg"); width: 32px; height: 32px; display: block; text-indent: -9999px; } 이렇게 로고의 a태그에 작성한 GitHub라는 글자가 겹쳐져서 보인다. 하지만 이것을 지우는게 좋은가? 지우지 않는 것이 좋다. 그럼 어떻게 없애냐! text-indent로 화면 저 밖으로 밀어낸다 -9999 는 어떤 명시적인 것이므로 다른 것을 쓰지 않고 9999를 쓰도록 한다. 전체 코드↓ 더보기 GitHub Personal Open source Business Explore /* COMMON */ body__container{ font-size: 16px; font-family: 'Robo..

GitHub Personal Open source Business Explore 먼저 header부분에 왼쪽에 있는 표시된 부분부터 만들어보자 header태그로 만들어 주고 그 안에 inner이라는 div태그를 만든다음 그 안에 menu-group이라는 div태그로 감싼다음!! 로고와 main-menu가 있다. 모두들 누를 수 있는 항목이기에 a태그를 사용하여 만들었다. /* header */ header{ border-bottom: 1px solid rgba(0,0,0,0.075); box-shadow: 0 0 5px rgba(0,0,0,0.75); background: #fff; } header .inner{ max-width: 980px; height: 78px; margin: 0 auto; bac..

.input--text{ height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); font-size: 16px; } .input--text:focus{ border-color: #51a7e8; /* 안쪽 그림자는 유지하면서 바깥 그림자도 적용하는 법 */ box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 5px rgba(81, 167,232,0.5); } /* Vendor Prefix */ .input--text::-webkit-inpu..

body부분에 css를 기본적으로 적용을 하고 싶은데 body부분에 스타일이 많이 들어가있으면 좋지 않다. 그렇기에 body태그처럼 사용할 body__container 태그를 써준다 body__container{ font-size: 16px; font-family: 'Roboto', sans-serif; font-weight: 400px; color: #333; } BEM 작명 규칙 -: 그냥 이름 __ : ~의 일부분이다 --: ~의 상태를 의미하는 것 ex) body__container: body의 일부분이다. btn--success btn--danger btn--warning btn의 상태를 의미 그냥 이름 toggle-btn 전체코드↓ 더보기 body__container{ font-size: 16..

meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Eric Meyer CSS reset - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. W..

Browse Fonts - Google Fonts Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사용하고 싶은 폰트들을 select하면 이렇게 카드가 뜬다 2021.04.21 - [무작정 따라하기/패스트캠프(프론트)] - [깃허브 예제] 파비콘 설정하기 / 스마트폰에 사용되는 파비콘 [깃허브 예제] 파비콘 설정하기 / 스마트폰에 사용되는 파비콘 전체코드보기↓ 더보기 GitHub sso-feeling.tistory.com