프로그래밍/HTML&CSS 사전
[html/css] img 태그에 vertical-align RESET 필요한 이유
[html/css] img 태그에 vertical-align RESET 필요한 이유
2023.04.09[html/css] img 태그에 vertical-align RESET 필요한 이유 Problem 아래 예제 코드를 보면 알겠지만 이미지의 height 628p이다. 하지만 img를 감싸고 있는 div의 height는 633px으로 5px 만큼 더해진 문제가 있었다. 왜 그럴까? HTML 삽입 미리보기할 수 없는 소스 Why? 이를 알기 위해서는 몇가지 배경지식이 필요하다. 배경 지식 1: img의 display 기본값은 inline 이다. 배경 지식 2: inline 요소는 typography 규칙인 vertical-align 속성이 적용된다. 이제 아래 예시를 살펴보자. 자세히 살펴보면 img 요소와 p 요소 사이에 간격이 생긴다. 이는 vertical-align 속성의 기본값이 적용되었기 때문이다...
[html/css] flex와 z-index
[html/css] flex와 z-index
2023.03.31flex와 z-index 배경 회사 동료 코드 리뷰 중 flex 요소의 자식의 경우 z-index가 동작하는 걸 발견함. 내가 알고 있는 상식과 달라 조사를 해봄. 예시: https://codepen.io/nuhends/pen/eYLOVaO?editors=1100 조사 및 결과 내가 알고 있는 상식은 어떤 요소에 z-index를 줬을 때 쌓임 맥락이 형성되려면 position속성의 값이 static(기본값)이 아니어야 한다. 그런데 flex 요소의 자식은 왜 동작할까? w3의 flex items 스펙을 살펴보자. Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is use..
[html] img태그 에러 처리 방법
[html] img태그 에러 처리 방법
2022.11.08[html] img태그 default 이미지 적용하기 img 태그의 src 속성에 url이 존재하지 않거나 이상이 있는 경우, 빈 이미지가 노출 된다. 그 결과 ui가 ugly하게 보인다. 이럴 때 onError 이벤트를 사용할 경우 대처가 가능하다. 사용법 및 주의 사항 onError 이벤트는 url이 존재하지 않을 경우만 동작한다. url이 falsy value 일 경우, onError 이벤트는 동작하지 않는다. (ex: null, undefined, ‘’) const defaultImagePath = 'https://via.placeholder.com/300/09f.png'; // sourceUrl이 falsy value 일 경우 동작하지 않기 때문에 // defaultThumbImagePath로 ..
CSS 만 사용하여 특정 비율 + 반응형 요소 만들기
CSS 만 사용하여 특정 비율 + 반응형 요소 만들기
2021.07.31종종 이미지, 비디오 등 요소들은 브라우저의 사이즈에 따라 확대 혹은 축소되는 스펙을 구현해야 되는 경우가 많습니다. 보통 요소의 width/height 가 특정 비율(ex: 2:1)을 유지해야하는 스펙이 함께 있습니다. 보통 해당 스펙은 CSS 만으로 구현하기 어렵기 때문에 JS를 사용하여 구현하는 경우가 많습니다. 하지만 JS로 처리할 경우 스크립트 처리에 대한 추가 공수가 필요할 뿐 아니라 viewport 사이즈가 변경될 때마다 영역을 계산해서 다시 렌더링 해줘야 하기 때문에 성능에 악영향을 끼치게 됩니다. 이는 사용성 저하로 인한 유저 이탈로 이어질 수 있습니다. 사실 이 스펙은 CSS의 % 단위의 값 과 padding-top 만으로 구현할 수 있습니다. 자세히 알아보겠습니다. 비율을 유지하면서 ..
[html/css] a태그에 대한 거의 모든 것
[html/css] a태그에 대한 거의 모든 것
2021.07.19[html/css] a 태그에 대한 거의 모든 것 태그(앵커 태크)는 href 특성 을 통해 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 기능을 가진 태그 입니다. Attributes a. href 1. 태그를 클릭시 이동하는 URL 지정하는 속성 2. 페이지 내부 영역을 가리키는 fragment URL 3. tel: URL을 사용하는 전화번호 4. mailto: URL을 사용하는 이메일 주소 5. 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있습니다. b. download 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니..
[CSS] 스크롤바 확실하게 숨기는 방법
[CSS] 스크롤바 확실하게 숨기는 방법
2020.12.28[CSS] 스크롤바 숨기는 방법 요소 안에 담기는 컨텐츠의 길이가 요소보다 길어지게 되었을 때, overflow: scroll 속성을 주게 되면 스크롤이 가능한 요소로 만들 수 있습니다. overflow 속성에 대한 정리가 필요하시다면, 아래 포스팅을 참고해주세요. overflow 관련 포스팅 이 때 다른 설정을 하지 않으면 리스트에 스크롤바가 노출됩니다. CSS .list { overflow: scroll; /* IE scroll 숨김 */ -ms-overflow-style: none; } .list::-webkit-scrollbar { display: none; width: 0 !important; } 이럴 경우 위와 같이 CSS를 설정하면 스크롤 동작은 되면서 스크롤바가 숨김처리 됩니다. 예제 Se..
[CSS] float 와 float 해제 방법 A to Z
[CSS] float 와 float 해제 방법 A to Z
2020.12.16[CSS] float 와 float 해제 방법 A to Z 안녕하세요 Nuhends 입니다. 이번 포스팅에서는 float 에 관한 걸 알아보겠습니다. 다음과 같은 순서로 적어보겠습니다. 바쁘신 분들은 해결방법 2-4 방법으로 바로 넘어가시는 걸 추천합니다. 1. float 가 필요한 이유 (배경) 2. float 를 사용하는 방법 3. float 의 문제점과 해결 방법 0. 시작하기 앞서 최근에는 float 를 대신 사용할 flex, grid 등 다양한 레이아웃 속성이 나오고 있습니다. float 는 오래된 속성이라, 사용하기 불편하고 어렵기도 합니다. 하지만 새로운 레이아웃 속성보다 구형 브라우저에서의 이슈가 없어 크로스 브라우징에 장점이 있고 이전에 작성된 거의 대다수의 코드들이 float 방식을 채..
[CSS] 제일 쉬운 overflow 설명
[CSS] 제일 쉬운 overflow 설명
2020.12.11[CSS] 제일 쉬운 overflow 설명 오늘은 css의 overflow 속성에 대해서 알아보겠습니다. 기본 컨텐츠, 콘테이너 성질 이해하기 기본 CSS는 요소의 크기(width, height) 를 정하지 않는다면 아래 그림 1 처럼 컨텐츠 늘어나면, 요소의 크기도 같이 커지게 됩니다. 이럴 때 "초과하는" 영역을 제어할 수 있는 속성이 overflow 입니다. 요소의 크기(width, height)를 고정해둔 상태에서 overflow 속성을 주게 된다면 컨텐츠가 요소의 크기보다 늘어날 경우, 초과한(넘쳐흐른 = overflow 된) 부분이 설정해 둔 속성에 맞춰서 보이게 됩니다. 속성값 visible 기본값. 영역을 벗어난 부분을 자르지 않고 그대로 보이게 함 (그림 1 참고) hidden 영역을 벗..
[CSS] word-wrap, word-break 정확하게 알아보기
[CSS] word-wrap, word-break 정확하게 알아보기
2020.12.09[CSS] word-wrap, word-break 정확하게 알아보기 오늘은 CSS의 word-wrap 과 word-break 속성에 대해 알아보겠습니다. 항상 그렇듯이 해당 속성을 알아보기 전에, 먼저 왜 이 속성들이 필요한 지부터 이해가 필요합니다. // 영문 https://plus.google.com/+googlekorea#+googlekorea/ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. // 한글 나랏말싸미중귁에달아문자와로로서로삼았디디아니할세이런전차로어린백셩이 니르고져 ..
[CSS] cursor 속성 빠르게 알아보기
[CSS] cursor 속성 빠르게 알아보기
2020.12.09[CSS] cursor 속성 빠르게 알아보기 cursor 속성 마우스가 요소 위에 위치(hover) 했을 때, 커서의 모양을 바꿀 때 사용합니다. 다양한 종류가 있으며, 상황 및 용도에 맞게 사용하면 됩니다. UX 개선에 도움을 주는 속성 입니다. 사용법 .text { cursor: pointer; cursor: not-allowed; // cursor: 원하는 값 } 시스템 cursor 아래 codepen 예제에서 키워드별 모양을 확인할 수 있습니다. See the Pen cursor list by 이상진 (@sangziii) on CodePen. 커스텀 cursor 시스템에서 기본적으로 제공하는 키워드 커서 외에 자신이 원하는 이미지를 적용할 수도 있습니다. 사용법 차례대로 첫번째는 적용되기 원하는 ..
[html/css] HTML 공백 줄바꿈 그리고 white-space
[html/css] HTML 공백 줄바꿈 그리고 white-space
2020.12.09[html/css] HTML 공백 줄바꿈 그리고 white-space 이번에는 HTML 텍스트의 공백, 줄 바꿈에 대해서 알아보겠습니다. 예제로 시 한편을 공유하기 위해 HTML로 작성하려고 합니다. 시는 행으로 나누어 표현하는 표기해야 하므로 신경 써서 HTML을 작성하였습니다. See the Pen html spacing by 이상진 (@sangziii) on CodePen. 결과를 살펴보겠습니다. 이런,, HTML에서는 시의 형태로 enter를 쳐서 개행하였는데, 왜 브라우저에서는 반영되지 않았을까요? text의 공백(space)과 공백문자( ) HTML에서의 공백 관력 규칙은 다음과 같습니다. - 공백을 만들 수 있는 키(key)는 space, enter, tab 세 종류. - HTML에서는 기본..
[CSS] 말줄임(ellipsis)에 관한 모든 것
[CSS] 말줄임(ellipsis)에 관한 모든 것
2020.12.09[CSS] 말줄임(ellipsis)에 관한 모든 것 이번에는 위 그림처럼 width, height 고정된 영역에 길이가 긴 텍스트가 들어갈 경우 말줄임 처리하는 방법에 대해 알아보겠습니다. 강제로 잘라내는 방법 overflow: hidden 과 white-space 을 사용하여 컨텐츠를 잘라내는 방법입니다. 해당 속성을 모르시거나 헷갈리신다면, 아래 포스팅에 쉽게 정리해두었습니다. 참고해주세요 [html/css] HTML 공백 줄바꿈 그리고 white-space [CSS] 제일 쉬운 overflow 설명 한 줄 처리 기본적으로 text가 길어져 width를 넘게 되면 자동 개행됩니다. 이때 white-space: nowrap를 주게 되면 자동 개행되지 않습니다. (white-space 에 대한 자세한 설..