codeStates front-end
-
[css] 기본 개요codeStates front-end/Css 2023. 1. 4. 09:54
본 실습은 VS CODE로 작성했습니다. CSS는 독립적으로 사용하지 못한다. 그렇기에 기본 웹사이트를 세팅 후 CSS 알아보기 index.html This is the header. This is the navigation section. Home Mac iPhone iPad This is the main content. ... This is an aside section. ... 개인정보 처리방침 이용 약관 법적 고지 index.css body { margin: 0; padding: 0; background: #fff; color: #4a4a4a; } header, footer { font-size: large; text-align: center; padding: 0.3em 0; background-..
-
[html] 개념 학습 <Flexbox>codeStates front-end/Html 2023. 1. 4. 09:48
Flexbox로 레이아웃 잡기 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법 display: flex : css 속성 index.html box1 box2 box3 index.css main { border: 1px dotted red; } div { border: 1px solid green; } * { margin: 10px; padding: 10px; } 부모 요소인 요소에 display: flex 속성을 적용 main { **display: flex;** border: 1px dotted red; } 부모 요소에 적용해야 하는 flexbox 속성들 flex-direction : 정렬 축 정하기 → 자식 요소들을 정렬하는 정렬 축을 정한다(아무 설정 x → 가로 정렬) main { displa..
-
[html] 개념 학습 <레이아웃>codeStates front-end/Html 2023. 1. 4. 09:40
와이어 프레임 : 웹/앱의 레이아웃의 뼈대를 그리는 단계 목업 : 실물 크기의 모형 즉 실제 제품의 모습과 동일한 HTML문서 내에 하드코딩 하는 방식 하드코딩 : 변수 사용 없이 하나하나 HTML문서를 입력하는 것 HTML 구성하기 수직분할 : 콘텐츠가 가로로 배치될 수 있도록 요소를 배치 수평분할 : 콘텐츠가 세로로 배치될 수 있도록 요소를 배치 아이콘 1 아이콘 2 아이콘 3 영역1 영역2 영역3 영역4 영역5 레이아웃 리셋(은근 많이 사용) -초기화 * { box-sizing: border-box; } body { margin: 0; padding: 0; }
-
[html] 실습 - 로그인 구현2codeStates front-end/Html 2023. 1. 4. 09:38
1. 로그인 기초 구현 login.html Login Keep Login style.css .input { display: block; width: 200px; height: 30px; text-indent: 10px; border: 2px solid lightgray; } #id-input { border-radius: 10px 10px 0 0; } #password-input { border-radius: 0 0 10px 10px; border-top: 0; margin-bottom: 5px; } .focus:focus { background-color: rgb(227, 237, 255); } #login-button { display: block; height: 35px; width: 200px; ..