이메일 바로 보내주는 mailto를 사용할까했지만,
팝업창 띄우는 걸 전부터 해보고싶어서 팝업창으로 결정
onclick="alert('이메일')"
자기소개 페이지 만들었으니 이정돈 할 수 있다고 호기롭게 시작
근데 내뜻대로 되는게 하나도 없다...........
height와 같은 line-height 주는 방식으로 해결안돼서,
부모 요소에 display: table;
, 자식 요소에 display: table-cell;
주는 방식으로 해결
네비게이션 바 아래쪽에 로고가 위치해야하는데 같은 줄에 위치하는 현상 발생
position: absolute;
top: 0px;
right: 0px;
네비게이션 바에 위 코드 추가해주니 우측 상단에 고정 완료
<form action="https://www.google.com/search" method="GET">
<input id="search" type="text">
</form>
google 사이트 검색결과로 연결되도록
input에 border-radius, box-shadow 적용하고있었는데,
개발자 도구로 구글 검색창을 보니, box 안에 input 창이 들어있는 형태
<div class="searchbox">
<form action="https://www.google.com/search" method="GET">
<input id="search" type="text">
</form>
form을 감싸는 div를 추가해주고 div에 border-radius, box-shadow 적용
근데 div 안에 들어있는 input 클릭 시 아래와 같은 끔찍한 검정색 border가 생기는 현상 발생😭
input 박스를 클릭 했을떄 나오는 테두리 색상 없애기
input:focus {outline:none;}
<input value="텍스트">
클릭 시, 빈칸이 되도록 설정하는 것은 JS로 할 수 있어서 JS 공부하고 구현 예정
display: inline; 을 해줘도 다 한 줄씩 잡아먹는 문제 발생
display: flex;
justify-content: space-between;
align-items: center;
dispaly: flex;
: flexble box를 만듦justify-content: space-between;
: 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨align-items: center;
: 수직 가운데 정렬<input type="button" value="버튼내용"/>
<button>버튼내용</button>
input과 button의 두가지 방법이 있는데 이번엔 button 사용
.btn:hover{
color: black;
border: 1px solid gray;
}
버튼 클릭할 때, 진한 검정 테두리가 자동으로 생성되는데 이게 뭘해도 안없어지는 문제가.....
마우스 클릭 시에 없어지면 된다고 생각해서 :active 에
outline: 0;
했는데도 계속 생김
찾아보니 :active 아닌 그냥 상태에 outline: 0;
해주는거였다😂
<button>버튼내용</button>
하루종일해서 드디어 마무리!
아직 많이 부족하지만 뿌듯뿌듯🤪
더 열심히 하자! 👊🏻💪🏻
뭐지 왜 이미지 하나가 엑박이 뜨는걸까😱