그리드
작업을 중간쯤 진행해보니 처음 레이아웃을 나눌 때 더 세분화해서 나눴어야겠다는 생각이 들었다. 큼직하게 로고, 입력창, 로그인으로 나누고 시작했는데, 위에서 부터 내용을 채워가며 계속 자식의 자식을 만드는 과정에서 구조가 헷갈리게 되면서 중간중간 형제와 부모 관계가 정확하지 않아 불필요한 검토작업이 필요하다.
flex를 적용할 때 자식의 자식 요소는 적용되지 않는다. 내용을 세로 배치하기 위해서 flex-direction: column을 주어야 하는데, 자식을 만들면서 flex를 사용할 일이 있다면 다시 display:flex; 속성을 줘야 한다.
배경
전체 선택자 ( * )에 배경색을 주고, 내부 배경색을 하얀색을 줬는데 사진처럼 자식 요소로 가면 전체 선택자의 배경과 색이 같아진다. 구체성 문제는 아닌 듯하다. 전체 선택자의 구체성이 가장 낮을뿐더러, 구체성이 높은 id선택자에 하얀색 배경을 줬기 때문이다. 전체 선택자 대신, body 태그에 배경색을 주면서 해결했다.
2022.8.3 +) 전체 선택자에 배경색을 주고, 하얀 부분은 background-color: white;를 줬기 때문에 그 부분만 하얗게 나온 것. 즉 내부로 배경색이 상속되거나 우선순위가 밀린 것이 아니라 전체가 배경색이 바뀌는 게 맞다. 행여 부모의 배경색을 자식 요소가 따르지 않는다면 background-color: transparent;를 주면 된다. 특히 버튼의 경우 상당히 올드해 보이는 배경색을 디폴트로 갖고 있어 배경색을 다른 색으로 바꾸기 마련인데, transparent 를 주면 배경이 되는 부모와 같은 색이 되므로 배경색이 없어지는 듯한 효과를 얻을 수 있다.
중간선
중간선과 텍스트를 이렇게 넣는 방법은
<!-- HTML -->
<div>
<div class="line">
또는
</div>
</div>
/* CSS */
.line {
flex-basis: 100%;
color: #8e8e8e;
display: flex;
align-items: center;
margin: 15px 0px;
}
.line::before{
content: "";
flex-grow: 1;
margin: 0px 16px;
background: rgba(0, 0, 0, 0.35);
height: 1px;
line-height: 0px;
}
.line::after {
content: "";
flex-grow: 1;
margin: 0px 16px;
background: rgba(0, 0, 0, 0.35);
height: 1px;
line-height: 0px;
}
선의 색상은 background 속성을 이용해 조절하고, 선의 길이는 margin 가로 값을 조절해서 늘리고 줄일 수 있다.
버튼 활성화
로그인 버튼이 평소엔 조금 더 불투명한 색으로 꺼져있다가, 아이디에 입력이 있고, 비밀번호를 5자리 이상 입력했을 때 활성화되도록 했다.
const ID = document.getElementsByClassName("inputId")[0];
const PW = document.getElementsByClassName("inputPw")[0];
const loginButton = document.getElementsByClassName("loginButton")[0];
const loginForm = document.getElementsByClassName("loginForm")[0];
function changeColor() {
if (ID.value && PW.value.length>4) {
loginButton.disabled="false"
loginButton.style.backgroundColor = "#0096f6";
} else {
loginButton.disabled = "true"
loginButton.style.backgroundColor = "#9fcdea";
}
}
loginForm.addEventListener('keyup', changeColor);
오류) 4번 라인인 Form 자리에 아이디, 비밀번호 input 태그에 공통으로 있는 태그를 사용했다. 아이디든 비밀번호든 인풋 창에 입력이 있다면 함수가 실행되도록 하려 했다. 하지만, 같은 클래스를 쓰고 있는 두 개의 인풋 창에서 이벤트 리스너가 동작해서 그런지 비밀번호 5자리 입력 후 아이디 창에 입력을 줘야 로그인 버튼이 활성화되는 오류가 있었다.
해결) 아이디와 비밀번호의 입력을 각각받는 이벤트 리스너를 두 개 만드는 방법도 있겠지만, 인풋 창을 싸고 있는 form 태그의 클래스에 이벤트를 받도록해서 해결했다.
const loginForm = document.getElementsByClassName("loginForm")[0];
.
.
.
loginForm.addEventListener('keyup', changeColor);
해결책을 찾으면서 생각해보니, changeColor 함수는 결국 ID창에 입력이 있고, 비밀번호가 다섯 자리 이상 있을 때 동작하므로, 비밀번호 창에 이벤트 리스너를 걸어도 로직상 문제가 되지는 않는다.
const ID = document.getElementsByClassName("inputId")[0];
const PW = document.getElementsByClassName("inputPw")[0];
const loginButton = document.getElementsByClassName("loginButton")[0];
function changeColor() {
if (ID.value && PW.value.length>4) {
loginButton.disabled="false"
loginButton.style.backgroundColor = "#0096f6";
} else {
loginButton.disabled = "true"
loginButton.style.backgroundColor = "#9fcdea";
}
}
PW.addEventListener('keyup', changeColor);
추후에 페이스북 로그인 API에 연결해보고자 버튼을 만들어 두었다. 이제 메인 페이지 작성해서 연결하는 것까지 진행해보려 한다.
'Programing > Javascript' 카테고리의 다른 글
[JS] 소셜웹페이지 - 댓글 추가기능 구현 (0) | 2022.08.06 |
---|---|
[JS] 소셜웹페이지 - 메인화면 (0) | 2022.08.06 |
[JS] 변수 호이스팅 (0) | 2022.07.28 |
[JS] HTMLCollection & NodeList (0) | 2022.07.19 |
[JS] 이터러블과 유사 배열 객체 (0) | 2022.07.17 |