Utils Function

선택한 요소에 hidden 속성 적용

스타일링 할 때 필요한 부분의 마크업만 보기 위해서 hidden속성 적용하기 위해서 유틸리티 함수를 만든다.

처음에 만들어본 함수

속성을 적용하는 것에는 성공했지만 어떤 것을 querySelector로 찾아와야 원하는 태그를 넣었을 때 적용이 가능한지 잘 모르겠어서 고민을 했다.

const hiddenContents = document.querySelectorAll('main > *:not(.ourStory), footer')

function hiddenHTMLlements(content) {
  hiddenContents.forEach(function (content) {
    content.setAttribute('hidden', 'hidden')
  })
}

hiddenHTMLlements('main > *:not(.ourStory), footer')

해답은 selector에 있었다!! 몇 번 짜봤던 로직이지만 정작 필요할 때 기억이 안난다. 잊지말고 기억하기~! 그리고 해당 함수는 따로 파일을 만들어서 utils분리

function hiddenHTMLlements(selector) {
  const hiddenContents = document.querySelectorAll(selector)
  hiddenContents.forEach((selector) =>
    selector.setAttribute('hidden', 'hidden')
  )
}

console.log 함수 만들기

콘솔로그에 텍스트 넣고 텍스트 스타일링 하기. 유틸리티 함수에 옵션객채 사용했으니 이번에 옵션객체 기억하기 (참고로 ES6문법을 사용)

const COLOR_SCHEME = {
  red: '#E50914',
  black: '#010101',
}

const { red, black } = COLOR_SCHEME

console.log(
  '%cMake Better! Netflix Website Homepage',
  'color: white; font-size: 1rem; background: #E50914; padding: 0.45em 0.82em'
)
console.log(
  '%cHanna244([e-mail])',
  'color: white; font-size: 0.2rem; background: #111; padding: 1em 2em'
)

코드 해석 (옵션 객체 포함)

• [옵션객체]printConsole() 안에 기본 설정값 입력. key: value가 아니다. 예를들어 title에 기본값을 할당(대입) 한다는 말이 정확하다. = {} 마지막에 꼭 써주기.

• 함수를 실행시킬 때 key값을 입력하면 옵션객체 위에 입력한 값이 덮어쓰게 된다.

• '%c%s' : css(%c) 와 string(%s) 이라는 의미다.

function printConsole({
  title = 'Make Better! Netflix Website Homepage',
  author = 'Hanna244([e-mail])',
  red = '#E50914',
  black = '#111',
  white = '#fefefe',
} = {}) {
  console.log(
    '%c%s',
    `color: ${white}; font-size: 1rem; background: ${red}; padding: 0.45em 0.82em`,
    title
  )
  console.log(
    '%c%s',
    `color: ${white}; font-size: 0.2rem; background: ${black}; padding: 1em 2em`,
    author
  )
}

key: value를 입력하지 않으면 기본값이 적용된다.

// 실행
printConsole({
  title: '넷플릭스 고정형 프로젝트입니다!',
  author: '[e-mail]',
})