공부하는 비오

최근 프로젝트를 하면서 아무리 z-index를 입력해도 (심지어 999를 넣어도) 원하는대로 화면위로 올라오지 않았다.z-index보다 위에있는 element는 심지어 z-index가 없어서 더 환장할 노릇이었다.그래서 그동안 한번도 고민해보지 않았던 z-index에 대해 찾아보았다.정말 개발은 하면할수록 내가 모르는게 투성이라는걸 알아가는것 같다.어쨌든 그렇게 알게된 z-index 작동 원리를 정리해보고자 한다. 1.  z-index 도 우선순위가 있다.이번에 알게된 제일 충격적인 사실... z-index도 우선순위가 있다.a. 부모요소의 z-index가 자식요소의 z-index보다 우선순위를 가진다.다른말로 하면, 자식요소의 z-index가 아무리 높아도 부모요소의 z-index에 제한을 받는다. ..

HTML & CSS 2023. 3. 20. 00:21

HTML에서 변수를 CSS로 보내고 싶다면 어떻게해야할까? 제일 쉬운방법은 inline을 사용해서 넣는것이다. 하지만 가상선택자(`:hover`나 `:after` 같은거...)에서 HTML변수를 사용해야할 일이 있었다. HTML에서 인라인으로 설정할 수 있는 방법이 없다. 그럴때 사용할 수 있는 방법! HTML 인라인으로 변수이름을 정해서 보내주고 CSS에서 그 변수명 그대로 사용하면 된다. // react+typescript를 사용한다면 CSSProperties 타입을 사용해서 변수로 지정할 수 도 있다. const colorInStyle = { '--bg-color': '#ccc' } as CSSProperties; background-color: var(--bg-color); * 참고: CSS 변수..

HTML & CSS 2022. 12. 25. 21:13

Form 요소의 속성 중 encType이라는 속성이 있다. 이 속성은 POST 요청 할 때, 데이터를 어떤 형태로 인코딩할 것인지를 설정한다. 속성 데이터 형태 설명 application/x-www-form-urlencoded 문자 (default) 모든 문자들을 서버로 보내기 전 인코딩. 폼 데이터는 URL-Encode가 됨. multipart/form-data 파일 모든 문자를 인코딩하지 않음. 파일이나 이미지를 서버로 전송할 때 사용. 기본값으로 서버로 데이터를 넘기면 파일의 경로명만 전송되고 파일의 내용은 전송되지 않으므로, 파일을 업로드할때는 multipart/form-data를 사용해야한다. 출저 - http://www.tcpschool.com/html-tag-attrs/form-enctype..

HTML & CSS 2021. 1. 3. 23:54

React 에서 css를 어떻게 주는 것이 좋을까를 고민하다가 방법론과 도구들의 차이를 찾아봤다. BEM 방법론 : 블록, 요소, 변경자 켄변션을 사용함으로써 클래스명의 유일함을 보장하여, 스타일이 겹치는 위험성 줄여준다. 컴포넌트를 유일하고 재사용 가능하게 만들어 준다. 하지만 클래스명 선택자가 길어지고, 재사용하려고 할때마다 모든 UI 컴포넌트를 명시적으로 확장해야 한다. CSS모듈 : 로컬단위로 정의된 모든 스타일에 동적으로 클래스명을 만들어내어 추가된 CSS 속성들에 의해 스타일이 겹치지 않도록해주며, 모든 스타일들을 캡슐화한다. (스타일 정의를 로컬화했다.) BEM을 자동화 함으로 클래스명을 결정하기위한 고민을 덜어준다. 심지어 같은 이름을 사용했더라도 서로 겹치지 않게 보장해준다. Styled..

HTML & CSS 2020. 12. 20. 22:42

_blank 를 사용할 때 보안문제로 인해 같이 사용해주어야 하는 속성이 있다. 바로 rel="noreferrer noopener" 새창에서 창을 열 경우, referrer(이전페이지)과 opener(누가 나를 열었는지)가 전달된다. 이 정보를 사용하여 보안에 위협이 생길 수 있으므로, 정보가 전송되지 않도록 만드는 것이 이 코드이다. 새창을 누가 열었는지에 대한 정보를 없애기 위해 사용해주는 코드.

HTML & CSS 2020. 12. 10. 22:51

white-space Property line break space, tab 자동 줄바꿈 normal 무시 1번만 반영 O nowrap 무시 1번만 반영 X pre 반영 그대로 반영 X pre-wrap 반영 그대로 반영 O pre-line 반영 1번만 반영 O text-overflow - clip : 영역을 벗어난 텍스트 값을 입력하지 않음. (default 값) - ellipsis : 영역을 벗어난 텍스트 값을 말줄임표(...)로 입력.

HTML & CSS 2020. 8. 22. 20:46

{background: color || image || repeat || attachment || position} > image : url("경로 입력") > repeat : repeat-x, repeat-y, no-repeat > attachment : fixed > position : px, %, top, right, bottome, left, center - px: left기준 top기준 (ex. position: 20px 30px) >> 속성 값을 입력할 때 ','를 넣어주면 다른 배경의 속성값으로 인식되므로, 한 배경의 여러 속성값을 입력하려면 ' '(공백)을 사용해야함. {background-size: px, %, cover, contain } -cover : 배경이미지 비율 그대로 큰 축에..

HTML & CSS 2020. 8. 22. 19:40

root를 사용하면 전역변수를 지정할 수 있다. 예를 들어 root를 사용하여 글자색을 지정해본다 하자. 각 요소에서 글자색을 지정해줬을 경우, 나중에 메인이 되는 글자색을 바꾸고 싶을때, 하나하나 찾아가며 바꿔주어야 하는 불편함이 있다. 하지만 root를 사용하면 root안에있는 코드만 바꿔주면 다른 요소들을 바꿀필요가 없으므로 유지보수가 편리하다. :root{ --text--color: white; --background--color: black; --link--padding: 10 20px; } ex.

HTML & CSS 2020. 8. 16. 22:23