본문 바로가기

개발 노트/기초 지식42

overflow: hidden 영역 밖으로 커지면 안보이게 하기 아래의 그림에 transform : scale(1.3) 을 통해서 확대를 하게되면 이미지의 사이즈가 커지게 된다 근데 난 사이즈는 변하지 않고 이미지만 돋보기로 보듯 zoom 시키는 효과를 주고 싶다면? 이미지 영역 크기는 그대로두고 위처럼 zoom in 효과로 일부 확대한 것처럼 보고 싶다면 scale속성은 그대로 두고 이미지의 부모 요소에 overflow: hidden; 을 설정해주면 부모 요소를 벗어나는 자식 요소를 hidden 으로 보이지 않게 할 수 있다 2022. 9. 24.
구글 accelerator 사건 / get post delete 생활코딩으로 nodejs 를 공부하던 중 지나가듯 들어서 찾아본 사건이다 과거 구글에서는 웹서핑 속도를 빠르게 하기 위해서 accelerator 라는 기술을 도입했는데 이게 뭐냐면... 예를들어 네이버 사이트에 방문한다면 그 페이지의 모든 링크들을 accelerator 엑셀러레이터 가 자동으로 미리 클릭을 하여 모든 링크의 URL을 접속, 모든 링크의 캐시를 가져와 이미 방문한 사이트에 재방문 한 것처럼 캐시를 사용하여 웹서핑 속도를 향상시키려는 기술이었는데 문제는 저 엑셀러레이터는 URL 이 있으면 모두 방문했다는 것! 아니 URL 에 방문하는게 뭐가 어때서? 라고 할지 모르지만 URL 으로 리소스를 요청하는 방식은 get 방식이고 그걸 의도해서 만든거지만 삭제를 하는 버튼에도 get 방식으로 만든 개.. 2022. 8. 30.
이미지의 alt 속성 사용시 주의점 이미지가 깨졌을 경우나 시각장애인들의 경우 이미지를 대체하는 대체 텍스트가 필요하다 그럴 때 쓰는 alt 속성 사용시 주의점을 알아보자 1. 배경 이미지의 alt 속성은 아래처럼 빈텍스트로 넣어서 스크린 리더에서 읽히지 않게 하자 2. alt 에서 이미지를 설명할 때 언더바, 기호는 사용 금지다. 예를 들어 alt ="익명이_어른" 으로 입력 시, 스크린 리더에서 '_' 기호로 뜨지 않으며, 한글로 '익명이언더바어른' 으로 떠서 기호를 그대로 한글로 읽어주므로, 이미지를 설명하는 글을 적자. 시각 장애인들에게도 alt 속성을 통해 이미지가 무엇인지 설명할 수 있어야 한다 3. alt 안에 '~하는 그림, ~하는 사진' 같은 설명은 필요 없다. 이미 이미지라고 알고 있으므로 이 사진, 이 그림 등의 설명은.. 2022. 8. 23.
HTTP url 의 구성 url 은 프로토콜 + 도메인 + 포트번호 + 웹서버의 루트에서의 상대경로 로 이루어져있다 http://localhost:3000/1.html 를 예시로 들어 해석하면 http:// http 프로토콜을 사용하겠다 // 뒤에 도메인 주소를 받겠다 localhost: 도메인 주소는 localhost 이다. www.naver.com 같은 것이 여기에 해당된다. : (콜론) 뒤에 포트번호를 받겠다 http 의 경우 기본 포트인 80번 포트를, https 의 경우 443번 포트를 사용한다면 포트번호를 생략이 가능하다 포트번호가 생략되어 있다면 각 프로토콜에 맞는 기본 포트번호를 사용하고 있는 것이다 3000 포트번호는 3000 이다. 위에서 말했듯이 기본포트를 사용 시 포트번호는 생략 가능하다 / 웹서버의 루트를.. 2022. 8. 11.