yeji

Autoprefixer Autoprefixer CSS online include comment with configuration to the result Select result You can also see which browsers you choose by filter string on browserl.ist Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules autoprefixer.github.io 지원되지 않는 그리드 속성 2가지를 사용한 CSS 그리드 클래스를 복사해서 붙여넣으면 벤더 프리픽스가 적용된 CSS 코드를 표시해줍니다.

유튜브 리베하얀님 영상으로 알게된 css speedrun 홈페이지! https://css-speedrun.netlify.app/ CSS Speedrun | Test your CSS Skills A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. css-speedrun.netlify.app 화살표가 가르키는 선택자를 불러오면 되는 것! 근데 생각보다 어려워서.. 놀랐고 나의 실력에 놀랐다.. (못해서) 하하하... 자주 쓰지 않다보니 이런 불상사가 일어난 것이라고 본다. 그래서 복습하는겸 공부하는 겸 글로 정리해본다! ① 내 답: li:nth-child(..

태그의 type 속성은 해당 버튼의 타입(type)을 명시한다. 브라우저별로 요소에 대한 서로 다른 기본 타입을 사용할 수 있으므로, 요소에는 언제나 type 속성을 명시해야 한다. 근데 나는 이 태그가 그냥 버튼이지 버튼 타입을 줘야하나?? 생각했다.button의 type에는 3가지 값을 정해줄 수 있는데, submit reset button 이다.근데 만약에 아무런 값도 지정해주지 않았다면 기본값은 submit 이 된다. === 이라는 것! 속성값 설명 button 해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시 submit 해당 버튼이 폼 데이터(form data)를 제출하는 제출버튼(submit button) 임을 명시 reset 해당 버튼이 폼 데이터를 초기값으로 리셋..

표현식 filter: blur(radius); radius의 값은 왜곡되는 정도, blur 정도를 말한다. 값이 커질수록 흐릿하게 보이게 된다. backdrop-filter - 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야함.

@font-face 웹폰트 문법 @font-face { font-family: ; src: [,]*; [font-weight: ]; [font-style: ]; } 속성값(values) => font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다. => 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name") 형식으로 지정하는 속성이다. => 폰트의 굵기(font weight) 값 => 폰트 스타일(font-style) 값 ★ 사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을 ..

이제껏 코딩을 하면서 border 값을 없애려고 할 때 border:none; 을 사용했었다. 우연히 다른 사람의 글을 통해 border:0;이 더 맞다는 걸 깨닫게 되고 정리해본다. 두 개의 p태그에 똑같은 css로 설정하고 첫번째 p 태그에는 border:none; 두번째 p 태그에는 border:0; 을 준 다음 border:style:dotted;를 설정해주니 이런 결과가 나왔다!.. border-style은 border:none 보다 우선 순위가 높아서 이런 현상이 발생되었다. border-style 다음에 border:none을 선언하면 캐스케이딩 원칙에 따라 후자가 적용된다. 실수할지 모르니, 잘 알아두도록 하자. See the Pen border test by yeji (@kimyeji) ..

table 요소를 통해서 세로 가운데 정렬을 할 수 있다. 일단 태그에 대해서 알아보자. 표를 만들 때 table 태그로 만든다. 행은 tr 태그로 만든다. tr -> table row의 줄임말. 가로줄! 열의 제목이 들어가는 셀은 th 태그로 만든다. -> table hading 내용이 들어가는 셀은 td 태그로 만든다 -> table data 각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있다. 가로로 이웃한 셀을 합칠 때에는 colspan 속성 사용 세로로 이웃한 셀을 합칠 때에는 rowspan 속성 사용 표 제목은 caption 태그로 만든다. table은 부모가 높이가 달라지면 자식도 달라진다, 뿐만 아니라 예를들어 td의 height값을 변경하면 모든 td의 h..

::after ::before ::first-letter ::first-line ::after 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. 보통 content 속성과 함께 찍지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인! ::before 선택한 요소의 첫 자식으로 의사 요소를 하나 생성한다. 보통 content 속성과 함께 찍지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인! ::first-letter 첫번째 문자를 선택하는 선택자. ::first-line 첫번째 줄을 선택하는 가상 요소. 블록 요소에만 적용 가능. ! :after, :before 와 ::after, ::before의 차이점은? => ::은 CSS3에서 도입된 문법, pseudo-..