웹 퍼블리싱 정복반 - 2주차 마무리

웹 퍼블리싱 정복반 - 2주차 마무리

2023. 3. 21. 23:08ㆍ스터디/항해 99

[WPM] 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (1)

2주차 학습 목표 1. 개발자 도구로 웹사이트 특정 요소 분석 2. 특정 요소를 HTML/CSS 로 구현하는 방법 이해 3. jQuery 활용 - 특정 요소에 이벤트와 기능을 부여 1. 개발자 도구로 웹사이트 특정 요소

youngsimi.tistory.com

[WPM] 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2)

youngsimi.tistory.com

[WPM] 웹 퍼블리싱 종합반 - 2주차 강의 내용 정리 (3)

youngsimi.tistory.com

2주차 수업 내내

기존 웹 페이지를 분석하는 방법에 대해 주로 배웠습니다.

기존 웹페이지를 분석하면서 이러한 기능들을 현업에서 왜 사용하는지 알게 되는 시간이기도 했습니다.

2주차 마무리 과제로는 네이버 검색창을 구현하고 javascript로 간단한 토글 기능 까지 구현하는 것을 하였습니다.

강의 해주시는 분은 이게 가장 쉬운것 같다고 하셨는데..왠걸 너무 어려워요 ㅠㅠㅠ

2주차 소감

HTML, CSS는 쉬운거라고 생각했는데 많이 어려웠습니다. (과거의 나...)

특히 CSS는 상위태그와 하위태그가 서로 영향을 주고 받는 경우가 많기 때문에 positon 속성등을 사용할때 주의해야 할 부분들이 꽤 많았고 기존의 서비스 되고 있는 웹 페이지를 클론하는 작업이 생각보다 어려웠습니다.

기존의 웹 페이지는 이미 많은 정보를 가지고 있고 class명이나 css등이 복잡하게 얽혀있어 그중에 내가 필요한 부분들이 어떤 것인지 찾아서 적용하는게 상당히 오래걸리는 작업이었습니다.

웹페이지를 분석하는 연습을 반복한다면 더 빨리 할 수 있을꺼라고..믿고..또 그래야 겠지여...

현업에서 일을 할때에는 기존의 코드가 있는 상황이거나 퍼블리셔가 작성하여 주는 html, css 를 사용해야 하기 때문에 이렇게 클론을 해보는 연습이 중요한것 같다는 생각이 들었습니다.

<body>
  <div id="search" class="search_area">
    <form id="sform" name="sform" action="https://search.naver.com/search.naver" method="get" role="search">
      <fieldset>
        <legend class="blind">검색</legend>
        <div class="green_window">
          <input id="query" name="query" type="text" maxlength="255" class="input_text" tabindex="1" autocomplete="off"
            placeholder="검색어를 입력해 주세요." />
        </div>
        <button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit">
          <span class="blind">검색</span>
          <span class="ico_search_submit"></span>
        </button>
      </fieldset>
    </form>

    <!-- 검색어 자동 완성 및 지난 검색어 토글 버튼-->
    <div class="autocomplete">
      <a href="#" role="button" id="nautocomplete" tabindex="2" class="btn_arw _btn_arw fold" aria-pressed="true"
        data-atcmp-element="">
        <span class="blind">자동완성 레이어</span>
        <span class="ico_arr"></span>
      </a>
    </div>

    <!-- 자동완성 아래 div 영역 -->
    <div id="autoFrame" class="reatcmp" style="display: block;">
      <div class="ly_atcmp" data-atcmp-element="">
        <div class="api_atcmp_wrap">
          <div class="atcmp_fixer _recent_layer" style="display:block;">
            <div class="atcmp_container">
              <ul class="kwd_lst _recent">
              </ul>
              <div class="kwd_info kwd_none _recentNone" style="display: block;">
                최근 검색어 내역이 없습니다.<br>
                <span class="kwd_dsc">설정이 초기화 된다면 <a href="https://help.naver.com/support/alias/search/word/word_29.naver" class="kwd_help" data-clk="sly.help" target="_blank">도움말</a>을 확인해주세요.</span>
              </div>
            </div>
            <div class="atcmp_footer">
              <span class="side_opt_area">
                <span class="opt_item"><a
                    href="https://help.naver.com/support/service/main.help?serviceNo=605&amp;categoryNo=1991"
                    data-clk="sly.help" target="_blank">도움말</a></span>
              </span>
              <span class="rside_opt_area">
                <span class="opt_item">
                  <a href="#" class="close _keywordOnOff">자동저장 끄기</a>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

/* 
reset  :: 현업에서는 기본적으로 커스텀된 디자인을 활용하다 보니 전체적으로
리셋해주는 코드를 삽입한다.
*/
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

em {
  font-style: normal;
}

button,
input {
  border-radius: 0;
  border: 0;
}

.search_area .input_text::placeholder {
  color: transparent;
}
/* 네이버 첫 화면에 들어왔을ㅇ때 해당 인풋태그가 어떤 역할을 하는지
placeholder로 정보를 수집하는 외부 서비스가 있기도 하므로
네이버와 같은 웹서비스는 화면에 보이지 않더라도
해당 정보를 기입하고 보이지 않도록 처리한다.
현업에서도 이러한 처리를 많이 하고
blind 클래스를 쓰는등의 방식으로 사용한다. */


html,
body {
  /* flex 박스를 지정한다. 세트바리 - justify-content, align-items */
  display: flex;
  width: 100%;
  height: 100%;
  /* flex 박스의 하위 요소들을 가로 기준 가운데 정렬 */
  justify-content: center;
  /* Flex 박스의 하위 요소들을 세로 기준 가운데 정렬 */
  align-items: center;
  font-size: 10px;
  line-height: 10px;
}

.blind {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

fieldset,
img {
  border: 0;
}

/* background-image setting */
.search_area .btn_submit .ico_search_submit,
.search_area .btn_arw .ico_arr {
  /* 네이버 이미지 사용 */
  /* background-image: url(https://s.pstatic.net/static/www/img/uit/2021/sp_main_57f073.png); */
  /* 로컬 이미지 사용 */
  background-image: url("./sp_main.png");
  background-size: 444px 439px;
}

/* search_area */
.search_area {
  position: absolute;
}

/* form */
.search_area .green_window {
  position: relative;
  width: 582px;
  height: 52px;
  border: 2px solid #4ae94a;
  border-radius: 2px;
}

.search_area .input_text {
  width: 444px;
  height: 24px;
  padding: 13px 15px;
  margin: 1px;
  background-color: #fff;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  font-weight: 700;
  outline: 0;
  border-radius: 0;
  border: 0;
}

.search_area .btn_submit {
  position: absolute;
  /* top, bottm을 각각 0으로 주게 되면 상위 요소에 맞춰 영역이 늘어나서
  꽉 차 보이게 연출된다. */
  top: 0; 
  right: 0;
  bottom: 0;
  width: 56px;
  background-color: #4ae94a;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

.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;
}

/* autocomplete */
.search_area .btn_arw {
  position: absolute;
  top: 0;
  right: 64px;
  bottom: 0;
  width: 22px;
}

.search_area .btn_arw .ico_arr {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 5px;
  background-position: -170px -154px;
  background-repeat: no-repeat;
  vertical-align: top;
  margin: -2px 0 0 -5px;
}

.search_area .btn_arw.fold .ico_arr {
  display: inline-block;
  width: 10px;
  height: 5px;
  background-position: -158px -156px;
  background-repeat: no-repeat;
  vertical-align: top;
}


/* 과제로 인한 추가 부분  */

.search_area .reatcmp {
  position: absolute;
  top: 55px;
  left: 0;
  width: 586px;
  z-index: 300;
}

.api_atcmp_wrap .atcmp_fixer {
  position: relative;
  height: 100%;
  padding-bottom: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_header {
  position: relative;
  margin-bottom: -11px;
  padding: 8px 18px 0;
  font-size: 1.4rem;
  line-height: 3.3rem;
  color: #666;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 39px;
  border-top: 1px solid #f1f4f6;
  border-radius: 0 0 6px 6px;
  font-size: 1.3rem;
  line-height: 37px;
  text-align: right;
  background-color: #f9fafb;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_footer:after {
  content: '';
  display: block;
  clear: both;
}

.api_atcmp_wrap .atcmp_fixer:before {
  content: '';
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  z-index: 1;
  height: 1px;
  background-color: #eff2f4;
}

#header .search_area .reatcmp {
  position: absolute;
  top: 55px;
  left: 0;
  width: 586px;
  z-index: 300;
}

.api_atcmp_wrap {
  font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",'나눔바른고딕 옛한글','NanumBarunGothic YetHangul',sans-serif;
  border: 1px solid #e4e7e8;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 3px 0 rgb(0 1 3 / 7%);
  background-color: #fff;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_container .kwd_info {
  padding: 97px 0 94px;
  font-size: 1.6rem;
  color: #202020;
  text-align: center;
  line-height: 2.5rem;
  letter-spacing: -.5px;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_footer .side_opt_area {
  float: left;
  padding-left: 12px;
}

.api_atcmp_wrap a {
  text-decoration: none;
}

.api_atcmp_wrap .atcmp_fixer .atcmp_footer .opt_item a {
  display: inline-block;
  padding: 0 6px;
  color: grey;
  vertical-align: top;
  cursor: pointer;
  font-size: 1.3rem;
    line-height: 37px;
    text-align: right;
}

    let toggleBtn = document.getElementById('nautocomplete')
    let toggleContent = document.getElementById('autoFrame')
    toggleBtn.addEventListener('click', function(){
        if(toggleBtn.classList.contains('fold')){
          toggleBtn.classList.remove('fold')
          toggleContent.style.display = 'none'
        }else{
          toggleBtn.classList.add('fold')
          toggleContent.style.display = 'block'
        }
    });

추가로 더 공부해야할 내용들

data-clk 속성에 대해 알아보기

display:table, table-cell 에 대해 정리하기

-webkit 에 대한 내용 알아보기 (webkit을 적용하는 브라우저에서도 동일한 CSS를 적용하기 위함이라고만 알고있다.)

:after, :before 개념정리 (가상엘리먼트를 만들어서 해당 엘리먼트 앞, 뒤 에 붙여넣는 거라고만 알고 있음.)

각 태그들을 가로로 정렬하는 다양한 방법들 정리 (table, table-cell, absolute, float )

javascript !! 사용 예시 찾아보기.

<script>
      $('#login').submit(function (event) {
        event.preventDefault(); 
        // 폼태그를 submit 하게 될때 화면을 새로고침 하게 된다.
        // 원래는 폼대그에 액션을 따로 두어서 해당 액션을 통해서 백앤드를 호출하고
        // 처리가 된 다음 새로고침을 하는 형태로 진행되었으나
        // 최근에는 폼태그의 액션속성을 지양하는 편이기때문에
        // 이렇게 서브밋 이벤트의 기본 동작을 제거하게 되는 preventDefault 메소드를 통해
        // 새로고침을 막게 된다.
        var username = $('#username').val();
        var password = $('#password').val();
        var isChecked = !!$('#checkbox:checked').val(); // 체그가 되면 1, 아니면 언디파인 인데.. 체그가 된 것의 값을 가져오면 1만 가져오게 된다
        // 1에 대해 !!를 앞에 주어서 해당 갓을 트루, 펄스의 불린 값으로 가져오게 된다.
        
        alert(username + ' / ' + password + ' / ' + isChecked);
      });
</script>

label 태그의 활용

       <!-- 
        label 태그의 활용 - checkbox 타입의 input 태그를 사용시 정확하게 체크박스를 클릭해야
        해당 체크박스가 토글되는데 lable태그로 input태그와 택스트를 함께 묶게 되면
        label 태그로 감싸진 모든 영역을 클릭하더라도 checkbox 타입의 인풋박스의 체크박스가 토글된다.
        label 태그는 라디오 박스 등에서도 동일하게 활용 가능하므로
        정리해둘 필요가 있다.
        -->

'스터디 > 항해 99' 카테고리의 다른 글

웹 퍼블리싱 정복반 - 3주차 마무리 (0)	2023.03.23
웹 퍼블리싱 정복반 - 2주차 마무리 ( 화면 클론하기 ) (0)	2023.03.22
웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (3) (0)	2023.03.21
웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2) (0)	2023.03.21
웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (1) (0)	2023.03.21

태그

최근글

댓글

공지사항

아카이브

2주차 소감

추가로 더 공부해야할 내용들

'스터디 > 항해 99' 카테고리의 다른 글

관련글

티스토리툴바