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