kyung_99.log https://velog.io/ 코드로 그림 그리는 사람 🎨 Thu, 01 Dec 2022 15:19:11 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed kyung_99.log https://velog.velcdn.com/images/kyung_99/profile/1d40426f-ae04-4bce-9d4a-1cb5c6b64636/image.JPG https://velog.io/ Copyright (C) 2019. kyung_99.log. All rights reserved. <![CDATA[[HTML] 올바르게 title="" 속성 사용하기]]> https://velog.io/@kyung_99/HTML-%EC%98%AC%EB%B0%94%EB%A5%B4%EA%B2%8C-title-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 https://velog.io/@kyung_99/HTML-%EC%98%AC%EB%B0%94%EB%A5%B4%EA%B2%8C-title-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Thu, 01 Dec 2022 15:19:11 GMT img 태그에 alt 속성과 title 속성을 같이 쓰는 것이 웹 표준에 맞는지에 대한 의문이 생겼다.

실무에서는 span 태그에 텍스트성 정보를 기입하고 오프스크린(offscreen) 방법을 많이 쓰기 때문에 title 속성을 잘 쓰지 않지만..!

궁금하기 때문에 검색해 봤다. 🤓 뾰족한 답은 얻지 못했지만 동시에 써도 상관없는 듯하다..!

title 속성이란?

title 속성은 엘리먼트에 대한 정보를 나타내주는 툴팁(tooltip) 기능이다. 엘리먼트에 hover를 하게 되면 말풍선으로 부가 정보를 나타내준다.

요소가 title 특성을 가지고 있지 않을 땐 부모 요소로부터 상속받게 된다. 부모 요소 또한 자신의 부모로부터 상속받을 수 있다.

+) 구글 메인 이미지 같은 경우, 부모로 상속 받는 구조이다.

<div title="google">
    <img src="" alt="" />
</div>

+) 네이버는 오프스크린 기법을 사용했다.

<a href="">
    <span class="blind">naver</span>
</a>

img 태그

<img src="" alt="" title="" />

이미지 태그를 사용할 때 src 속성과 alt 속성은 필수이다.

  1. 이미지가 로드되지 않거나 (엑스박스)
  2. 시각 장애인 스크린 리더기 사용

이런한 점들을 고려해 대체 텍스트로 들어가기 때문에 꼭 명시해두어야 한다. 🚫 alt 속성이 툴팁으로 나타나는 현상은 인터넷 익스플로러 7 이하 버전에서 W3C의 권고를 MS가 오용하여 발생한 버그라고 한다.

label 태그

<label for="" title=""></label>
<input typ="" id="" />

라벨 태그는 UI 항목에 대한 설명을 나타내준다. 태그 특성상 텍스트로 설명이 가능하기 때문에 title 속성을 써줄 필요가 없다.

단,

  1. 디자인적으로 라벨이 제공되기 어려울 때
  2. placeholder=""가 스크린 리더기에 읽힐 정보가 없을 때

title 속성을 사용해 사용자 이용에 도움을 주어야 한다.

참고 문서 https://seulbinim.github.io/WSA/embedded.html#img-%EC%9A%94%EC%86%8C https://nuli.navercorp.com/community/article/1132934 https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/title

]]> <![CDATA[[HTML] meta 태그에 관하여, "ie=edge", "view-port" 등등]]> https://velog.io/@kyung_99/HTML-meta-%ED%83%9C%EA%B7%B8 https://velog.io/@kyung_99/HTML-meta-%ED%83%9C%EA%B7%B8 Tue, 25 Oct 2022 15:25:58 GMT html 문서 단축키를 쓰면 항상 자동적으로 완성되는 메타 태그.. <head> 태그에 포함되면서 반응형 관련 viewport, SEO를 위한 키워드 담기 등등.. html 문서에 대한 정보를 나타내주는 태그로 익히 알고 있지만 제대로 알기 위해 정리해 본다.

<meta>

해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 빈 요소이지만 XHTML 문서 같은 경우 꼭 닫아줘야 한다.

html 문서일 때
<meta>
xhtml 문서일 때
<meta />

<meta> 속성

name

전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공한다. name 속성이 명시되었으면 content 속성 값 또한 필수이다. name 속성으로 쓸 수 있는 표준 메타데이터들은 매우 다양하다.

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

디바이스의 해상도에 따라서 적절하게 대응하는 반응형 웹을 만들기 위해 viewport를 설정한다. (모든 기기에서 올바른 크기로 조정할 수 있음) content="width=device-width" ➡️ 브라우저 너비를 장치의 너비로 설정 content="initial-scale=1.0" ➡️ 초기 확대/축소 값 content="minimum-scale=1.0, maximum-scale=1.0" ➡️ 최소와 최대 확대/축소 값

<meta name="description" content="meta 태그 정리">

description은 페이지 문서에 대한 설명이나 요약 자료로 쓰일 확률이 매우 높다. ex) 즐겨찾기 페이지의 기본 설명 값

표준 메타데이터 관련 사이트 https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name

http-equiv

웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다. http-equiv 속성이 명시되었으면 content 속성 값 또한 필수이다.

<meta http-equiv="X-UA-Compatible" content="ie=edge">

IE 브라우저에서 가장 최신 버전을 선택하는 문서 모드이다. 문서 유형 선언<!doctype html>과 함께 사용해야 유효하며, 가장 최신 웹표준을 지원하는 html5를 추천한다. IE8 이하 버전부터는 지원 안 되는 기능들이 많기 때문에 명시해 주는 것이 좋을 것 같다.

<meta http-equiv="refresh" content="30">

refresh는 content="값" 간격으로 웹 페이지가 자동적으로 새로고침이 된다.

http-equiv 관련 사이트 http://www.tcpschool.com/html-tag-attrs/meta-http-equiv

charset

<meta charset="utf-8">

char은 'Character(문자)'를 의미하며, character + set = charset "문자 집합"이라는 의미를 내포하고 있다. 다국어를 설정할 수 있는 속성이며 인코딩 설정이 잘못되면 글자가 깨져 보인다.

인코딩 관련 사이트 https://theqoop.tistory.com/266

. . . . 이렇듯 메타 태그를 잘 활용하면 더욱 가치있는 웹 페이지를 만들 수 있다! 🤓

참고 사이트 https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta http://www.tcpschool.com/html-tags/meta https://youtu.be/zO5zHxX2lNI https://web.dev/i18n/ko/viewport/ https://webclub.tistory.com/354 https://aboooks.tistory.com/357

]]> <![CDATA[[CSS] display 속성 block, inline-block, inline 차이점]]> https://velog.io/@kyung_99/CSS-display-%EC%86%8D%EC%84%B1-block-inline-block-inline-%EC%B0%A8%EC%9D%B4%EC%A0%90 https://velog.io/@kyung_99/CSS-display-%EC%86%8D%EC%84%B1-block-inline-block-inline-%EC%B0%A8%EC%9D%B4%EC%A0%90 Thu, 20 Oct 2022 13:33:53 GMT Q: inline-block 성질이 뭐야? A: inline이지만 block 성질을 가지고 있는..? Q: block은 무슨 성질을 가지고 있는데? A: 밑으로 쌓이는 덩어리..?

_block_과 _inline-block_의 차이점에 대해 설명해 보라고 했을 때, 느낌적으로만 알지 정확한 대답을 하지 못했다. 😅 가장 기본적인 것인데 제대로 알지 못하고 CSS를 갈기는 것 같아 정리해 봤다.

block

영어의 단어처럼 박스, 덩어리이며 가로로 전체 영역을 가지기 때문에 콘텐츠가 아래로 쌓인다. width, height 값을 가질 수 있어 사용자가 지정한 크기를 가진다.

<h1>, <div>, <p>, <ul>, <figure> 등등

inline

텍스트적인 성질을 가지고 있어 Html에 입력한 콘텐츠만큼의 영역을 갖기 때문에 옆으로 쌓인다. width, height 값을 가질 수 없다.

<span>, <a>, <img> 등등

inline-block

block과 inline 성질을 모두 가지고 있다.(?) inline의 텍스트적인 성질로 html에 입력한 콘텐츠만큼의 영역을 갖지만 width와 height 값을 가질 수 있다. 자신의 크기(width, height)를 가질 수 있는지에 대한 점이 inline과 가장 큰 차이점이다.

참고 사이트 https://developer.mozilla.org/ko/docs/Web/CSS/display http://www.tcpschool.com/css/css_position_display

]]> <![CDATA[신입 웹 퍼블리셔 인성+기술 면접 후기]]> https://velog.io/@kyung_99/%EC%8B%A0%EC%9E%85-%EC%9B%B9-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9D%B8%EC%84%B1%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%ED%9B%84%EA%B8%B0 https://velog.io/@kyung_99/%EC%8B%A0%EC%9E%85-%EC%9B%B9-%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9D%B8%EC%84%B1%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%ED%9B%84%EA%B8%B0 Thu, 25 Aug 2022 13:08:17 GMT 면접을 복기하면서 몰랐던, 헷갈렸던 질문들을 정리하면서 기록해 본다. 전체적인 분위기를 봤을 때 성격과 프로젝트에 대한 기술 면접이 대부분이었고 압박 질문도 몇 개 있었다.

압박질문 List

  1. 일 처리 방법이 맞지 않는 팀원이 있을 때 어떻게 대응할 것인지?
  2. 싫어하는 일이 있는지?
  3. 원치 않는 일을 받았을 때 어떻게 할 것인지? 등등..

비전공자라 받은 질문 List

  1. 왜 퍼블리셔라는 직군을 선택하게 됐는지? ⭐️
  2. 전 회사를 왜 그만두게 됐는지?
  3. 디자인을 하기 싫어서 분야를 바꾼 것인지? 등등..

꼬리에 꼬리를 물기 식으로 여쭤보셔서 기억은 잘 나지 않는다. 면접 전에 녹음하는 것을 까먹어 매우 아쉽다.

마지막으로 기술면접 같은 경우, 내가 만든 프로젝트에 대한 기술 면접도 준비해 가는 것을 권장한다. 구글, 유튭에서 자주 나오는 질문들 위주로 준비해 갔지만 하나도 받지 못했다. 전형적인 질문은 당연시 준비해 가고 내가 만든 프로젝트에 대한 기술 면접도 셀프 체크해야 된다는 것을 깨달았다. -> 회사 특징마다 다른 것 같다. 웹 에이전시 같은 경우 CSS 질문과 웹에 대한 기본적인 이해를 파악할 수 있는 질문을 했다.

Q: JQuery랑 JavaScript 차이는 무엇인가?

JavaScript(JS)는 스크립트를 기반으로 한 동적 프로그래밍 언어이다. UI(움직이는 객체, 화면의 화려한 요소), 사용자 상호작용(클라이언트 측 유효성 검사, 팝업 표시 등) 및 사용자에게 표시되는 문서 콘텐츠를 제어하는 데 가장 일반적으로 사용된다.

  • 스크립트(Script): 별도의 컴파일 없이 내장된 번역기에 의해 번역되므로 바로 실행할 수 있는 언어

JQuery는 자바스크립트 DOM 작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다. 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어가 절대 아님.

참고자료 https://graphguide.org/ko/javascript%EC%99%80-jquery%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-2020-%EB%8B%A4%EB%A5%B8-%EC%82%AC%EB%9E%8C

Q: 라이브러리와 프레임워크 차이점은 무엇인지?

누가 누구를 컨트롤하는지에 대한 큰 차이점이 있다. 쉽게 말해, 라이브러리 같은 경우 직접 코드를 컨트롤할 수 있고 프레임워크 같은 경우 규칙을 따르면서 코딩하는 것이다.

  • 프레임워크(Framework)란? 원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 됩니다. ex) Angular, Vue.js 등

  • 라이브러리(Library)란? 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미합니다. 즉 필요할 때 부를 수 있는 것들이다. ex) Node.js에서 npm으로 설치한 모듈, JQuery

참고자료 https://cocoon1787.tistory.com/745 https://youtu.be/t9ccIykXTCM

Q: 리액트 서버는 무엇을 쓰는지?

??? 진짜 넘나 당황했던 질문 중 하나 ㅠㅠ npm 설치하거나 cdn을 사용한 경험밖에 없다고 얼버무리고 잘 모르겠다고 솔직하게 답변했다. 구글링 해도 이해가 잘되지 않아 강사님께 여쭤보고 업데이트할 예정,, -> 강사님도 면접관의 의도를 모르겠다고 하셨다. 그리고 두루뭉실한 질문 같다고 크게 신경 쓸 필요는 없다고 하셨다.

]]>