Programming/HTML, CSS10

• 

  [HTML]  (non-breaking space, 줄 바꿈 없는 공백)이란? FE 개발을 하다 보면 JSX나 HTML에 명시적으로 공백을 표시해야 할 때가 있다. 텍스트 요소 길이가 너무 길 때 줄을 바꾸고 그곳에 nbsp를 쓰는 식이다. nbsp가 정확히 무엇을 의미하는지와 사용해야 하는 경우, 사용하면 안 되는 경우를 알아 보았다. 1. nbsp란? nbsp는 사실 공백을 표시하는 데 쓰는 것이 아니다. 하지만 공백의 역할을 한다. nbsp를 쓰면 공백이 표시됨과 동시에 그 위치에서는 줄 바꿈이 일어나지 않아 그 이전 공백이나 이후 공백에서 줄 바꿈이 일어나게 한다. 그러니까 극단적으로 한 p 태그 안의 모든 공백을 nbsp로 대체해 표시하면, p 태그의 콘텐츠가 p 태그를 감싸고 있는 div의 오른쪽 바깥을 한 줄로 뚫고 나가게 된다. 줄 바꿈 없는 공백을 HTML이 인식할.. Programming/HTML, CSS 2024. 3. 26.

• 

  [HTML] <a> 태그 'target' 요소 target 요소는 주로 _blank를 사용해서 새로운 탭에서 페이지를 열려고 할 때 말고는 사용한 적이 거의 없었다. 하지만 이번에 기능 하나를 개발하면서 다른 요소를 사용해야 하는 경우를 만나서 mdn을 보고 정리해 보았다! 의미 target 요소는 링크한 URL을 표시할 '위치'를 말한다. 위치는 브라우징 맥락을 말하는데, 탭, 창, 의 이름 등이 될 수 있다. target 요소에는 총 네 가지 값이 들어갈 수 있다. _self: URL을 현재 브라우징 맥락에 표시한다. (기본값) _blank: URL을 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다. _parent: URL을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않으면.. Programming/HTML, CSS 2024. 1. 27.

• 

  [CSS] 속성 선언 순서 CSS 속성의 선언 순서를 스스로 정리해 본 적이 없는 것 같아 네이버의 CSS 코드를 참고해 정해 보았다. 평소 best practice나 클린 코드 관련 글들에서 읽은 것과 결이 같아 좋은 기준이 될 것 같다. display - 표시(관련 속성: visibility) overflow - 넘침 float - 흐름(관련 속성: clear) position - 위치(관련 속성: top, right, bottom, left, z-index) width & height - 크기 margin & padding(그룹) - 간격 border(그룹) - 테두리 background(그룹) - 배경 font(그룹) - 폰트(관련 속성: color, letter-spacing, text-align, text-decorat.. Programming/HTML, CSS 2023. 11. 12.

• 

  [CSS] 글꼴 이탤릭체로 만드는 법 업무에서 이탤릭체로 'Coming soon!'이라는 문장을 이탤릭체로 별도 출력해야하는 티켓이 있었다. 그런데 어떤 CSS 요소가 폰트의 스타일을 지정해줄까? tailwind 등에는 별도의 클래스가 있겠으나 scss를 사용하는 경우에는 pure css를 사용하게 된다. font-style 글자의 모양을 정하기 위해서는 'font-style' 속성을 쓰면 된다. font-style의 종류 normal 특별히 꾸미지 않는 일반적인 모양(글꼴의 디폴트 생김새가 될 것이다.)을 말한다. italic 이탤릭체 oblique 대부분의 글꼴에서 이탤릭체와 동일하지만, 일부 글꼴에서는 이탤릭체는 필기체처럼 표현되고 oblique는 그냥 기울기만 기울인 것처럼 표현된다. inherit 부모 요소의 속성을 그대로 상속 받.. Programming/HTML, CSS 2023. 8. 12.

• [CSS] transform 속성 사용자에게 특정 팝업(div로 만드는 간단한 팝업)을 보여주려고 하는데, 우선 중앙정렬 하도록 하기 위해서 최상단 div 태그에 top: 50%;, left: 50%; 로 지정해주었다. 그런데 몇 십 픽셀 정도 묘하게 어긋나서 이유를 알아보니 div의 왼쪽 상단 모서리를 기준으로 위치가 산정되기 때문이었다. 이 때 사용하면 좋은 것이 transform 속성이다. transform은 요소에 이동(transform), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 애니메이션이 필요하다면 트랜지션이나 애니메이션과 함께 사용하고, 아무것도 사용하지 않으면 바로 해당 속성이 적용되어 렌더링 될 것이다. transform 함수들 transform functi.. Programming/HTML, CSS 2023. 3. 31.

• 

  [iOS] button 요소에 color를 지정하지 않으면 safari 브라우저에서 버튼 텍스트가 파란색(-apple-system-blue)로 표시된다 만년 갤럭시 유저인 나(최근 산 아이패드 제외!)... 회사 서비스 404 페이지를 만들고 당당하게 담당자분께 보고했는데, 사파리에서만 버튼이 파란색으로 표시됨을 전달받았다. 알고 보니 사파리에서는 button 요소에 color가 지정되어 있지 않으면 기본으로 -apple-system-blue 색상을 할당한다고 한다. 따로 color를 지정해주면 쉽게 해결 된다! How to avoid safari adding -apple-system-blue to my button I'm loading a website through an iFrame in my ionic app. I realize that every button turned blue. I've searched a little bit and I fou.. Programming/HTML, CSS 2023. 3. 20.

• 

  MUI Breadcrumbs 빈 Breadcrumb 하나가 중간에 삽입되는 오류를 고치고 있다. Breadcrumbs가 무엇인지는 알고 있었지만 프로젝트에서 써 본 적이 없어서 개념부터 정리해 봤다! Breadcrumbs의 정의 Breadcrumbs는 웹사이트의 계층적 구조 안에서 유저가 페이지의 위치를 시각적으로 파악하는 것을 돕는 링크들의 리스트다. 또, 해당 페이지의 모든 조상으로의 이동을 가능하게 한다. 내가 블로그 글을 쓰는 경로를 예로 들자면(현재 티스토리에서 제공되는 기능은 아니지만) 상단에 티스토리 홈 > 블로그 설정 > 글쓰기와 같은 링크들의 연결고리가 적혀 있다면 breadcrumbs다. 헨젤과 그레텔이 빵가루를 떨어뜨려 길을 찾으려고 했던 것이 생각나는 귀여운 작명이다 ㅎㅎ 기본 형태 import * as Rea.. Programming/HTML, CSS 2022. 12. 28.