[스파르타 _ 리액트 과정] 12일차

📜 진행 내용

• [강의수강] 웹 퍼블리싱 정복반 1-6~2-4
• [자습] 프로그래머스 문제 풀기 0단계, 1단계
• [강의수강] 자료구조, 알고리즘 2-10~3-4
• [자습] 자바스크립트

---

💡 배운내용

< 웹퍼블리싱 정복 >

1-6. CSS 트랜지션(애니메이션) 개념과 실습

• a 태그의 스타일 없애주기

  • inherit 으로 지정시 부모요소의 속성을 그대로 가져온다!

    a {
      text-decoration: none;
      color: inherit;
    }

1-10. 과제

• 네이버 검색창의 CSS 스타일링

• 버튼 속 돋보기 아이콘의 위치 지정 :
  • background-position : 하나의 큰 이미지 안의 특정 아이콘 좌표값만 가져와서 사용하도록 지정할 수 있다.

     #header .search_area .btn_submit .ico_search_submit {
     		display: inline-block; 
     		width: 22px; 
     		height: 22px; 
     		**background-position: -420px -24px;** 
     		background-repeat: no-repeat; 
     		vertical-align: top; /* 세로 정렬 */
     }

• 이미지 설명
  • 실제 아이콘 이미지를 보면 위와 같이 다른 소스 이미지와 합쳐진 것을 볼 수 있다.
  • 이 하나의 이미지에서 돋보기 아이콘이 버튼 영역 안에 보일 수 있도록 위치를 이동시켜준 것이다.
  • 이렇게 하나의 이미지 안의 여러 아이콘의 위치만 바꿔서 보여주는 방식은 이미지를 한 번만 캐싱(caching)하면 되기 때문에 캐시의 효율을 높일 수 있다.

2-1-2. 검색창 + GNB 구조 살펴보기

• <legend class="blind">검색</legend>

  • 일반적으로 form은 어떤 입력값을 받는지에 관해 개념적으로 정의가 들어가있다.

  • 이 창은 검색을 위한 창이라는 것을 명시적으로 알려주기 위함.

  • 이 부분이 들어가면 차후 X-UA(호환성 보기)에 도움

  • 특정 유저의 PC가 무척 느려 CSS 스타일을 불러오지 못할 경우 HTML의 순수한 form형태 - 검색창인 것을 명시적으로 알려주게 할 수 있는 효과가 있다. (네이버가 다수의 사용자의 사용환경을 고려한 부분임)

    
    

2-3. 폼태그 기본과 실습

• form

  • 태그의 구조 : form > fieldset > legend > input 또는 항목

    • form : 폼 양식을 지정할 영역을 묶어준다.
    • fieldset : 서로 관련있는 것을 묶을 때 많이 사용
    • lengend : 관련 있는 것들이 어떤 사항인지 제목과 같은 역할
      • 상황에 따라서는 제목 텍스트 양식인 h 태그를 사용할 수도 있다.
    • label : 폼 요소에 이름을 붙여주는 태그 : 의 for 속성에 input의 id를 넣어줄 것. : label 태그 안의 글자를 눌러도 input 을 활성화할 수 있게 해준다.
      • 사용법 2가지:
        1. <label [속성 = "속성 값"]> 레이블 <input ..> </label>
           • label 태그안의 속성값은 생략 가능!
        2. <label for="id이름"> 레이블 </label> <input id="id이름" [속성="속성 값"]>
    • input : 기본적으로 text 타입을 가장 많이 사용, name은 회사에서 서버개발자가 요구하는 방식으로 사용하거나 임의로 지정하여 사용해도 무방함

      👉
      - div처럼 순서에 맞게 사용하고, 순서에 맞게 배치를 한 후 적절한 input필드를 넣어주고, input타입을 지정해주면 된다.
      - 서버와의 통신을 위해 method를 지정해줄 수도 있다. (get, post)

    • submit : form 양식은 전송하는 submit은 input과 button으로 구현할 수 있다.
      👉 두 태그의 차이점
      • 예를 들어 submit 요소 하위에 이미지 태그( 아이콘(i) 혹은 이미지(img)) , 혹은 span 등 다른 요소를 추가하고 싶을 경우
        • button은 하위 태그 추가가 가능!
        • input은 하위 태그 추가 불가능!
          👉 button 태그가 CSS 스타일링이 자유롭다는 것을 보여줌

                    <button type="submit">제출</button>
                    <input type="submit" /> 

	              -  input의 submit 타입은 '제출'이라고 따로 기재안해도, 제출이라는 문구가
           			들어간 버튼의 형태가 완성된다. 

• ! & !! : NOT 연산자 (논리 연산자)
  - ! : 값을 역으로 반환
  - 예) !true → false
  - !! : 다른 데이터 타입의 값을 불린형으로 반환
  - 예) !!null → false
  - 예2) !!$('#checkbox:checked').val()
  - 강의 예제에서 input 체크박스가 체크 되었을 경우 true를 반환하도록 활용함
  
  

---

⁉️ 어려웠던 내용

• 정렬

❎ 한 번 더 공부할 내용

• 정렬 ( 버블, 선택, 병합 )

🎯 문제와 해결

• 알고리즘 강의가 파이썬으로 풀면서 진행되기 때문에, 자바스크립트로 직접 풀어보거나 풀이된 자료를 찾아보는 중이다.

---

🔗 출처

• 스파르타코딩클럽 - 자료구조, 알고리즘 강의
• 스파르타코딩클럽 - 웹 퍼블리싱 정복 강의