코딩헤딩

입력값이 비었는지 확인아이디/비밀번호가 맞는지 검사로그인 성공 시 다음 페이지로 이동실패 시 에러 메시지 출력사용자 이름을 로그인 시 넘겨받아 화면에 표시 # 로그인 화면* .HTML 코드 Login 👁️ 로그인 * .CSS 코드/* 공통 초기화 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background: #f4f4f4; ..

*주요 구현 내용반응형 너비width: 100%; max-width: 400px모바일 대응미디어 쿼리로 폰트/패딩 조절중앙 정렬flex 사용다크모드 대응prefers-color-scheme 사용디자인그림자, 버튼 호버, 둥근 모서리* .HTML 코드 Login 👁️ 로그인 * .CSS 코드 /* 공통부분 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh;..

원하는 결과물 : 사이드바에서 반투명의 배경색과 불투명 글씨 그리고 불투명한 사이드바 버튼. 1. opacity 적용 background-color: darkgreen; opacity: 0.3; 보통 요소를 반투명 또는 투명하게 만들기 위해서는 opacity 속성을 사용한다. 하지만 위의 그림과 같이 하위의 모든 요소들이 투명해져 버렸다. 2. rgba(#, #, #, 0.7) RGB값과 투명속성 이용 background-color: rgba(57, 114, 57, 0.7); rgba(57, 114, 57, 0.7) 57 : red / 114 : green / 57 : blue / 0.7 : 투명도 투명도는 0이 투명 1이 불투명으로 0부터 1사이의 값을 사용한다. * opacity와 동일 3. 자연스러..

구현된 모습 1. html 코드 menu1 text1 text1 text1 text1 menu2 text1 text1 text1 text1 menu3 text1 text1 text1 text1 menu4 text1 text1 text1 text1 2.css코드 주의할 점 text-decoration 은 none으로 주어야 a태그의 밑줄이 사라진다. list-style 은 none으로 주어야 ul,li 태그앞의 동그라미 기호가 사라진다. 하위 ul이 커서를 올리기 전까지 보이지 않게 하기 위해 ul의 display : none. 상위 ul 내부의 li 들이 가로로 보여져야 하기 때문에 li의 display : inline-block.

HTML 버튼