[8] 230203 개인 프로젝트 (1) 8일 차 Fri) 메인 화면 진행 중 (2) 해야 할 것 리스트

230203 Fri 26th class [8th day for portfolio :)]

---

우선 해야할 것은

메인 화면 (진행중)

1) 메인 화면:
- 게시판(공지사항) 넣기 
- 공지사항 아이콘을 우측 상단에 넣거나 세부 메뉴에  넣기 (완료)
- 슬라이드 쇼 이미지 사이즈 조절 및 8개 이미지 추가 (완료)
- 아이콘 6개 추가 
- 슬라이드 쇼의 More 누르면 그 정보 페이지로 이동 
동구 문화관광축제 사이트 참고)
https://www.donggu.ulsan.kr/tour/cmm/main/mainPage.do

| 울산광역시 동구 문화관광축제

- css 코드 깔끔하게 만들기 :)
- 메뉴 코드 게시글 올리기
- 날씨 위젯, 검색어 기능 추가 
- 두번째 슬라이드 쇼 반복 재생 버튼 일시정지 버튼 만들기

로그인 페이지

2) 로그인 페이지
- 비밀번호 입력시 글자 보이게 하는 아이콘 넣기
- 버튼 눌렀을 때 윤곽 글자색 변경 효과 주기
- input 눌렀을 때 border 색상 변경된다
- 패딩, 마진 변경으로 더 깔끔하게 보이게 하기
- | 연하게 만들기, 아이디 비밀번호 찾기 회원가입 글자색 black 
- 구글 아이콘 사용하기 (화살표 위, 아래)
- 메인 페이지와 연결하기 

회원가입 페이지

3) 회원 가입 페이지
- 비밀번호 입력시 글자 보이게 하는 아이콘 넣기 (로그인 페이지와 같다.)
- 버튼 눌렀을 때 윤곽 글자색 변경 효과 넣기 (로그인 페이지와 같다.)
- input 눌렀을 때 border 색상 변경된다 (로그인 페이지와 같다.)
- 직접 입력 눌렀을 때 왼쪽 정렬로 바꾸기
- 약관 (내용 보기) 추가
- 메인 페이지와 연결하기 

- 약관 보기 눌렀을 때 제이쿼리 slideUp slideDown 기능쓰기 
- 라디오 버튼: 커스텀하기 (아래 참고) 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

- tabindex 추가한다.
https://www.daleseo.com/html-tabindex/

- 회원가입 입력 검증 유효성 검사
비밀번호 입력시 글자 보이게 하는 아이콘 누르면 적은 비밀번호와 경고 문장들이 나온다.

- (필수)약관 전체 동의 (선택) 약관 전체 동의
if 전체 동의시동의 시 check box 3개 선택, 선택 동의 시 checkbox 2개 선택 
if 3개 선택시선택 시 전체 동의 클릭됨, 2개 선택 시 선택 동의 클릭됨
참고) 
https://gangzzang.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACjQuery-%EC%84%A0%ED%83%9D%EC%9E%90
https://emessell.tistory.com/149https://openlife.tistory.com/381

https://openlife.tistory.com/381

기타) 페이지 아이콘 넣기
https://dasima.xyz/html-title-%EC%9D%B4%EB%AF%B8%EC%A7%80-icon/

HTML title 이미지 또는 icon 적용하는 방법 - dasima

---

새로 알 게 된 것 

여러가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용하고, 한가지만 적용하고 싶다면 아이디(id)를 사용하면 된다.
id selectors take precedence over classselectors.

---

::after (:after)

참고: https://developer.mozilla.org/ko/docs/Web/CSS/::after

CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.
(CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.)

/* 링크 뒤에 화살표 추가 */
a::after {
  content: "→";
}

HTML

<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>

CSS

.exciting-text::after {
  content: " <- 흥미진진!";
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}

결과)

---

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

참고: http://jsfiddle.net/jyAyX/

예시) HTML

<div class="foo bar">
    <div class = "bar">
    </div>
</div>

<div class="foo">
    </div>
</div>

CSS

.foo{
    border-left: 1px solid gray;
}

.foo.bar{
    border-top: 1px solid gray;
}

.foo .bar{
   border-right: 1px solid gray;        
   width:25px;
   height:25px;
   background-color:lightgray;    
}

div{
    margin:20px;
    height:50px;
    width:50px;
    background-color:beige;
}

결과)

---

<label> 태그의 장점은 label의 for 속성이 label 값을 누르면 label과 연결되어 있는 input 태그를 선택하는 효과를 줄 수 있다는 것이다. 라디오나 체크박스의 작은 영역에서 텍스트까지 그 클릭 영역을 늘리면서 사용자가 더 편리하게 이용할 수 있게 하는 것이 목적이다. 라벨 너비가 다른데 CSS로 너비를 맞춰주는 작업이 필요하다.