sunny_afterrain.log https://velog.io/ I want to become a developer Wed, 26 Jan 2022 03:40:03 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed sunny_afterrain.log https://images.velog.io/images/sunny_afterrain/profile/e461510b-956a-430d-a000-014c92e86b4b/KakaoTalk_20211209_185819899.jpg https://velog.io/ Copyright (C) 2019. sunny_afterrain.log. All rights reserved. <![CDATA[CSS - Position: Sticky; 를 잘 적용 하려면?]]> https://velog.io/@sunny_afterrain/knowledge02 https://velog.io/@sunny_afterrain/knowledge02 Wed, 26 Jan 2022 03:40:03 GMT ☑︎ Section.log
  • HTML 마크업 중 메뉴바를 만들었고 스크롤을 하면 원하는 위치에 고정하고자 한다.
  • 관련 MDN 검색 결과 그러한 기능을 가진 position: sticky 을 찾았다.
  • 고정 속성값을 주면 해당 값의 위치에서 자동으로 fixed 속성으로 바꾸어준다.
  • top, right, bottom, left 속성을 줄수 있고, 위쪽 고정을 위해 top: 0px; 을 적용했다.

HTML

  <body>
    <div class="ul-sticky">
      <div class="ul-sticky__list">
        <ul>
          <li>Home</li>
          <li>About me</li>
          <li>Favorite</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </body>

CSS

.ul-sticky__list {
position: sticky;
}



❔Issue

  • 아무리 top: 0px; 을 주어도 메뉴바가 해당 위치에 고정이 되지 않았고 수치를 바꾸어도 동일했다.

  • 해결을 위한 수많은 구글링을 통해 Sticky 왜 안되는지, 어떠한상황에서 적용되어야 하는지 검색했다. ▻ Sticky 를 적용할 HTML 태그의 부모 태그에 무조건 height 이 있어야 할것
  • 상위 부모태그에 임시로 height 속성을 주었다.

CSS

.ul-sticky {
  height: 500px;
}
.ul-sticky__list {
  position: sticky;
  top: 0px;
}

  • 된다. 그런데 문제가 있다. 상위 부모태그에 height 를 준 만큼만 고정됨.

  • 아래의 gif 처럼 높이 값을 준 만큼만 고정되고 그 이후엔 다음 태그와 같이 올라간다.


  • 높이값을 더 주게 된 다면 이후의 컨텐츠 배열에 문제가 생김


❕Tips

  • Sticky 를 사용하려면 꼭 부모태그에 height 값이 있어야 한다고 했다.
  • 그렇다면 컨텐츠의 내용에 따라 자동으로 높이 속성을 가지는 <body> 태그가 생각났다.
  • Sticky 를 꼭 사용해야 한다면 그 부분만 <body> 아래에 놓고 CSS를 주자.
  • 아주 잘되는 모습을 볼 수 있다.

HTML

  <body>
    <div class="ul-sticky">
      <div class="ul-sticky__list">
        <ul>
          <li>Home</li>
          <li>About me</li>
          <li>Favorite</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>
  </body>

CSS

.ul-sticky {  // body 태그 바로 아래 class
  position: sticky;
  top: 0px;
}


↩︎ Link

]]> <![CDATA[TIL & TEL - 04]]> https://velog.io/@sunny_afterrain/TIL-TEL04 https://velog.io/@sunny_afterrain/TIL-TEL04 Fri, 21 Jan 2022 04:26:02 GMT Today I Learnd

☞ HTML

  • 글 작성시 띄어쓰기, 공백, 다음 줄 등 내가 친 데로 웹페이지에 입력 됨 <pre></pre> 태그


  • 좌우 스크롤 없애는 방법 <body style="overflow-x:hidden; overflow-y:auto;">

    • auto, visable, hidden, scroll 속성 확인


☞ CSS

  • 배경 사진 조절에 있어 background-size, object-fit 의 속성의 종류와 기능
  • 웹페이지 제작시 픽셀 단위 보다는 가변형 뷰포트 단위 적절하게 이용 할것
    • 브라우저 크기조절시 자연스럽게 contents도 그에 맞게 자동으로 조절이 되어 보기 편함
  • 어떤 요소의 방향이나 위치를 조절하고 싶을때 CSS의 transform 으로 조절
  • 가상요소 before, after 의 사용방법과 기능
  • 글의 자간 어간 간격 등 설정 letter-spacing:자간(글자 간격), word-spacing: 어간(단어 간격), line-height: 줄간격, columns : 다단
  • 항상 크로스 브라우징에 대해 염두하고 웹페이지 제작
  • width 속성에서 calc() 확인
  • box-shadow 속성의 사용방법
  • Grid의 사용방법 및 칸 나누는 방법 template-row and column fr단위와 원하는만큼 칸 배열 가능


Trial and Error Log

  • SITUATION:
    * HTML 에서의 CSS 로딩속도가 뒤죽박죽 아예 안될때도 있어 웹페이지 결과물에 혼란
  • REASON:
    * 구글링 결과 `@import` 방식은 속도 측면에서 좋지 않으니 `` 방식을 사용 권장
  • SOLUTION:
    * html의 CSS 연결을 `@import` 에서 `` 방식으로 변경 결과 원할하게 작동
]]> <![CDATA[ TIL & TEL - 03]]> https://velog.io/@sunny_afterrain/TIL-TEL03 https://velog.io/@sunny_afterrain/TIL-TEL03 Wed, 19 Jan 2022 10:37:16 GMT TIL (Today I Learnd)

SCSS(SASS)

  • CSS 의 전처리기 ➡️ 컴파일 (Compile) 해서 사용

    • CSS 를 더 편리하고 멋지고 쿨하게 전처리기로 작성 가능

  • 선택자의 변수지정, 중첩, 반복문, 조건문 사용가능


  • SASS 와 간단한 문법 차이는 세미콜론 ( ; ), 중괄호 ( {} ) 의 유무


  • VScode 사용시 비교적 쉽게 컴파일 가능

    • Extension : Live Sass Compiler

  • & : 상위 선택자 a ➡️ &:hover === a:hover


  • @mixin @include , %변수명 @extend 사용법과 차이


  • 인자 사용 가능 @mixin 변수명($param, $param) { }

    TEL (Trial and Error Log)

  • VScode 확장자 *.scss , 컴파일 과정은 비교적 간단함
  • 아직 익숙하지 않으나 확실히 작성하는데 있어 불필요한 문법낭비를 줄일 수 있으며 편하다.
    * 간혹 문법의 오류, 익숙해지도록 자주 사용 앞으로는 SCSS 로만 사용하기
    * SCSS(SASS) Lint 사용법
  • Compilation Error Error: Invalid CSS after "h1 {": expected "}", was "{" on line 4
    * *.sass 에 SCSS 문법대로 작성하고 컴파일 하니 에러
]]> <![CDATA[TIL & TEL - 02]]> https://velog.io/@sunny_afterrain/TIL-TEL02 https://velog.io/@sunny_afterrain/TIL-TEL02 Wed, 19 Jan 2022 06:33:51 GMT TIL (Today I Learned)

CSS

  • 동일한 이름 Class 중 필요한 선택자 지정방법


    * `&:first-child`, `&:last-child`, `&nth-child(n)` 차이 * 속성값 `even`, `odd`, `2n-1` 등
    * `p span{}` 부모안의 span, `p>span`p의 바로 밑자식 spans, `p+span`p바로 다음으로 오는 span
    * 특정 선택자만 통제 할수 있는 방법 연구
    * `` * input:require { } 으로 통제 * input[placeholder="edit"] { } 로 통제

  • States 가상 선택자


    * `&:active`, `&:hover`, `&:focus`, `&:visited` 등 * [MDN 공식문서 참조](https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes)
    * CSS 전역 변수
    * `:root { }` 변수 지정 하여 사용 * `:root { --font-color: blue }` 선언 * `h1 { color: var(--font-color) }` 사용
    * `transition` 개념, ease-in-out
    * `transform` 개념, 요소의 회전, 기울이기 등 조절
    * 애니메이션 필히 복습
    * `@keyframe 이름 { from { } to { } }`
    * `@media screen and ( ) { }` CSS를 이용하여 화면크기에 따른 스크린조절, 미디어 쿼리
]]> <![CDATA[TIL & TEL - 01]]> https://velog.io/@sunny_afterrain/TIL-TEL01 https://velog.io/@sunny_afterrain/TIL-TEL01 Tue, 18 Jan 2022 18:42:28 GMT TIL (Today I Learned)

HTML

  • Semantic tag


    * 효율적으로 MarkUp을 하기 위한 HTML Tag Element * `
    ` 를 남발하기 보다는 의미있게 마크업 하기 위함 * 적절하게 사용했을시 검색엔진에 중요한 검색 랭킹 요소
    * `
    ` `
    ` `
    ` `

CSS

  • px, vh, vm, em, rem, vmin, vmax 단위속성 차이
  • Flex box
    * `display:flex;` 부모요소에 적용 * `justify-content`, `align-item`, `flex-direction` 사용방법
  • position
    * 화면이 움직여도 레이아웃을 고정 `fixed`
    * 디폴트 `static`
    * `relative` 위치조절 마음대로 가능 * top, bottom, left, right 값, `z-index`
    * `absolute` relative 속성인 부모를 기준으로 위치조절, 없으면 body가 기본 부모

    # TEL (Trial and Error Log)

  • HTML Sementic tag <main>,<article>,<section> 헷갈림

    • MDN 문서 보면서 자주 사용

  • CSS 작성 중 수직이나, 수평으로 내마음대로 조절이 잘 안됨

    • 기존 width, height이 충분하지 않았다. 늘려 주니 원하는 대로 결과 출력
]]> <![CDATA[NodeList? HTMLCollection? 무슨 차이지?]]> https://velog.io/@sunny_afterrain/knowledge01 https://velog.io/@sunny_afterrain/knowledge01 Tue, 07 Dec 2021 07:38:46 GMT ☑︎ Prologue

JavaScript 기초 공부를 위해 그림판 만들기(from NomadCoders)를 하던중 그중에 색상 팔레트를 만드는 과정에서 강의를 잠시 멈추고 혼자 해보는 시간을 갖었었다.

금방 짜고 잘 작동되는것을 보고 뿌듯! 그것도 잠시 남은 강의 영상을 보던 나는 몰랐던 사실을 알고 혼란스러웠다.😱

☑︎ Before

const nodeList = document.querySelectorAll(".list");
const htmlCollection = document.getElementsByClassName("list");

아직 초보인 나는 이 두가지에 대해서 Node 라 읽고 배열로 기억했다.

하지만 배열과는 전혀 다른 NodeList 와 HTMLCollection 이라는 것이고 배열과는 다른 듯 하지만 비슷한 '유사 배열' 이라는 것

☑︎ Description

✔️ NodeList from MDN more

NodeList 객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는 노드의 콜렉션입니다.

✔️ HTMLCollection from MDN more

HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.

MDN 에서는 이렇게 정의 하고 있다. 정석적인 설명은 다른 곳에도 많으니 정말 간단히 쉽게 설명 하면, 두가지 다 유사 배열이기 때문에 배열에 적용할수 있는 Method가 제한이 된다. (어떤 것인지는 MDN 이나 console.log 로 확인해 보면 된다.)

✔️ Live, Static Collection

  • 대체로 NodeList 가 Live Collection 으로 DOM 의 변경사항을 실시간으로 반영하지만 qeurySelectorAll 으로 반환한 NodeList 는 Static Collection 으로 실시간으로 반영하지 않는다. 즉, 중간에 append 로 DOM을 추가해도 반영하지 않는다.
  • HTMLCollection Live Collection 으로 문서의 변경사항이 실시간으로 반영된다.

☑︎ How use?

그렇다면 여러 Methdos 를 사용하고 싶은데 어떻게 해야하냐? 생각보다 답은 간단하다. Array.from() 사용 해 배열로 바꾸어주면 된다.

htmlCollection.forEach(list => list.addEventListener("click", argu);
// 뭐야 왜 안돼!! 왜 forEach 를 사용 못하는거야?! (nodeList는 가능)

Array.from(htmlCollection).forEach(list => list.addEventListener("click", argu);
// 아 이제 진짜 배열로 바꾸니까 잘되는구나

console.log 로도 확인 해 보았다.

]]>