codeStates front-end/Html
-
[html] 개념학습 <optimization>codeStates front-end/Html 2023. 3. 29. 20:26
HTML 삽입 미리보기할 수 없는 소스 📌 optimization 📍 최적화(optimization) 사전적의미 : 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정 주어진 조건으로 최대 효율을 낼 수 있도록 하는것을 의미한다. 🔗 최적화의 필요성 및 효과 이탈률 감소 : 웹 개발 최적화 👉🏻👉🏻 빠른 속도로 렌더링 하는 것 🙏🏻 렌더링이 빠르지 않으면 페이지 이탈할 확률 ⬆️🙏🏻 전환율 증가 : 💁🏼♂️ 전환율이란? 방문자의 비율 👉🏻👉🏻 이탈율 ⬇️ 👉🏻 전환율 ⬆️ 수익 증대 : 회원 수가 증가하면 수익이 증대함을 의미 사용자 경험(UX) 향상 : 페이지 로딩이 빠를수록 UX는 향상된다. 🔗 HTML,CSS 코드 최적화하기 html,css의 DOM트리가 크고 복잡할 수록 리..
-
[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; ..