웹 전반, 브라우저/HTML, CSS 검색 결과

해당 글 24건

css convention에 대해서

세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이 된다. 원활한 협업을 위해서 필자가 다니는 회사에서는 아래와 같은 CSS 규칙을 따르고 있다. * 아무 규칙도 없이 나열한 것이 아니다. 가장 큰 범주에서 가장 작은 범주로 내려가는 순서로 CSS 속성을 선언하고 사용하려는 의도 하에 작성된 규칙들이다. 속성 선언 순서는 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. default 값은 선언하지 않는다. ex - flex-direction은 기본적으로 row이기 때문에 굳이 선언하지 않아도 된다. ..
웹 전반, 브라우저/HTML, CSS 2021. 11. 20. 22:36

Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서

회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다. 결론은 "안된다"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다. iframe과 내부에 있는 html을 단순히 확인하는 것은 가능합니다. 그러나 iframe 내부에 있는 google doc을 조작하는 것은 보안상의 문제로 불가능합니다. 그럼에도 불구하고 시도해본 것들은 다음과 같습니다. 시도 1) contentWindow을 사용하여 접근하려는 경우 contentWindow란 부모 window에서 임베디드된 을 참조할 때 사용되는 메서드입니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameEle..
웹 전반, 브라우저/HTML, CSS 2021. 7. 11. 13:28

swiper 그만 하고 glide 합시다

glidejs.com/docs/ Glide.js | A dependency-free JavaScript ES6 slider and carousel A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more glidejs.com Dependency-free + ~23kb (~7kb gzipped) with every functionality included. 안 쓸 이유가 없다. 무엇보다 react-swiper가 약간 buggy하다는 평도 오카방에서 돌더라. 무엇보다 지금까지 carousel은 외부 패키지를 쓰지 않고 전부 내가 직접 만들어..
웹 전반, 브라우저/HTML, CSS 2021. 3. 9. 01:39

mailto 프로토콜을 통해 메일을 수발신을 해보자

랜딩 페이지를 만들 때 잠재 고객으로부터 메일을 받기 위해 지금까지 해왔던 방법은 다음과 같다. 메세지 전송을 누르면 DB에서 이미 메일을 보냈는지 duplicate check를 하고 중복되지 않았다면 email을 DB에 저장 => 그 후, mailgun API를 통해 해당 이메일에게 감사 메세지 발송 => 메일을 보내는 데 성공하면 toast를 띄우거나 (react-toastify 가 참 디자인이 잘 되어 있다), Thanks you 페이지로 이동시켰다. 이렇게 번거롭게 한 이유는 누구도 outlook을 사용하지 않기 때문이다. 윈도우에서는 브라우저에서 별도 설정을 하지 않는 경우 outlook이 켜지는 것으로 알고 있다. 그런데 일반 기업 페이지에서 mail을 받아야 할 때는? 쉽게 말해 우리가 아쉬..
웹 전반, 브라우저/HTML, CSS 2021. 2. 9. 14:27

input checkbox 디자인하기

이번 프로젝트에서 아래와 같이 체크 박스를 스타일링해야 할 일이 생겼다. 1. ::before, ::after 가상 선택자 스타일링은 input, image에서는 동작하지 않는다. 쓰지 마세요.. 의미 없이 시간을 날렸... 참고: stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field input[type='checkbox'] { &:checked { // 안 된다. &::after { content: ''; background: red; padding: 1px 4px; } } } 2. appearance로 기본 스타일링은 날릴 수 있지만, 이용하지 않는 것이 좋다. 왜냐하면 checkb..
웹 전반, 브라우저/HTML, CSS 2021. 2. 7. 11:55

모바일 웹 앱에서 100vh가 일정하게 유지되지 않는 문제

여느 다른 페이지들이 그렇듯 첫 페이지에 사진을 꽉 채우기 위해 100vh를 줬고, fullpage.js 처럼 움직이도록 화살표까지 달아줬다. 웹 환경에서는 정상적으로 작동하는데 모바일 화면에서 다음과 같이 스크롤을 내리면 100vh를 할당했던 이미지의 크기가 워블링하는 문제를 발견했다 alphafitness.altervista.org/log.php 비밀 :) 이런 문제를 해결해보기 위해 구글링 한 결과 이러한 현상은 '의도된 것'이라고 한다. (what the...) stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser CSS3 100vh not constant in mobile browser I have a ver..
웹 전반, 브라우저/HTML, CSS 2020. 9. 6. 10:53

마진 병합 현상과 방지 방법

🚨 마진 병합 현상? 인접한 block요소의 상하의 마진이 병합되는 현상 좌우의 마진은 해다 사항없습니다. section1 section2 section { padding: 20px; margin:20px; } 아래와 같은 코드는 다음과 같이 작동합니다. 분명 section 태그에 margin을 20px씩 줬는데 section 상하의 margin은 40이 아니라 20px만 적용되었습니다. 이렇게 상하의 마진이 병합되는 현상(마진 병합)은 css에서 의도한 것입니다. 일정한 크기만큼 떼기 위해서 일부러 상하의 패딩을 10px 따로 줘야 한다면 css를 작성하는 코더 입장에서는 불편하기 때문입니다. 대개의 상황에서 마진 병합은 코더에게 도움이 됩니다. 즉, 문제점이 아니라는 것입니다. 그러나 가끔은 이러한 ..
웹 전반, 브라우저/HTML, CSS 2020. 9. 5. 07:01

이미지를 위한 object-fit, object-position

width, height 속성만으로 구현하려면 조금 번거롭습니다만 object-fit, object-position을 이용해 쉽게 구현할 수 있습니다. position은 말 그대로 해당 이미지의 위치 조정입니다. object-position: center center; fit는 어떤 방식으로 이미지를 채울 것이나에 대한 속성입니다. object-fit: cover; object-fit: contain; object-fit: fill; 보통 이미지를 줄 때 꽉 채우니까 width를 100%. height: 100%를 주고 cover로 덮으면 되겠죠 img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } 참고한..
웹 전반, 브라우저/HTML, CSS 2020. 8. 2. 22:51

textarea를 사용할 때의 문제점과 그 해결법

게시판의 댓글에는 주로 태그를 사용할 것입니다. 그런데 textarea를 사용하게 되면 관습적으로 직면하는 부분이 있어서 그 부분에 대해서 다뤄봤습니다. 1. 내용이 길어질 때 정해진 box를 벗어나는 문제 (word-wrap, word-break) CSS에서 박스의 크기를 명시한 다음 word-wrap, word-break 속성을 이용하는 것이 좋다. word-wrap: break-word; word-break: break-word; word-break 속성은 단어의 분리를 결정하여 줄 바꿈에 관여 word-wrap 속성은 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여 - 출처 (https://wit.nts-corp.com/2017/07/25/4675) 만약, 한 줄로..
웹 전반, 브라우저/HTML, CSS 2020. 7. 28. 03:59

input[type="file"]의 스타일링하기 + DOM 조작으로 자동 제출

너무 못생겼습니다... input[type="file']을 디자인하기 위해는 input을 아예 숨기고, 붙어 있는 label을 이용해야 합니다. 여기서, 숨긴다고 input에 display:none을 주게 되면 연결된 label까지 없어지게 됩니다. visibility를 hidden으로 준 다음, label을 스타일링하면 되겠습니다. 위치로는 form에 position을 relative로 주고, label을 form 내부에서 position:absolute로 주는 것이 좋겠죠? 이미지 변경 const Label = styled.label` display: inline-block; padding: 0.5em 0.75em; color: #999; font-size: inherit; line-height: n..
웹 전반, 브라우저/HTML, CSS 2020. 7. 22. 01:49