https://developer.mozilla.org/ko/docs/Web/CSS/:focus-within :focus-within - CSS: Cascading Style Sheets | MDN CSS :focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나 developer.mozilla.org :focus-within는 부모요소에게 적용시에 하위 요소중에 focus 상태가 있을시에 부모요소에게 적용되는 css이다. 위와 같은 상황 일경우 상단 div요소에 :focus-within를 적용시에 하단의 input에 focus 된 경우 div에 back..

https://www.w3schools.com/cssref/css3_pr_pointer-events.asp CSS pointer-events property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com pointer-events 속성은 말 그대로 pointer의 events를 제어한다. 예전에는 a태그의 이벤트 속성을 제어할때 자바스크립트를 가지고 제어했지만, 이제는 ..

css에서도 scss처럼 변수선언이 가능하다. 하지만 브라우저에 따라서 지원 여부 차이가 크다. caniuse.com/?search=var() Can I use... Support tables for HTML5, CSS3, etc CSS Variables (Custom Properties) Permits the declaration and usage of cascading variables in stylesheets. caniuse.com 변수 선언은 다음과 같다. :root { --danger_text: red; --info_text: blue; --normal_text: green; --bg_color: #ccc; } 여기서 :root는 를 선택한다고 보면 된다. 사용부터은 다음과 같이 사용하며 추가..

이번 HTML5에 새롭게 추가된 태그이다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure HTML figure 요소는 독립적인 콘텐츠를 표현합니다. figcaption 요소를 사용해 설명을 붙일 수 있습니다. developer.mozilla.org 이미지나 도표등을 넣을때 아래쪽에 간단하게 설명문구 (캡션)을 달수있게 해주는 CSS다. 기존에는 이미지를 넣을곳을 DIV로 감싸고 작업을 하였는데 접근성을 위해 추가된거 같다. 어렵진 않지만 생소한 태그라서 정리해둔다. 아래는 사용방법이다. 접근성부분은 최대한 활용하는게 좋으니 다음작업때 사용해야겠다. // html 샘플이미지 캡션입니다. // css figure { display: inline..

평소에 사용을 잘안해서 포스팅 해두려고 한다. 들여쓰기와 내어쓰기를 할때 사용한다. 값이 양수면 들여쓰기, 값이 음수면 내어쓰기이다. 디폴트는 0입니다. 내어쓰기를 할 때는 왼쪽패딩을 조절해주면 좋다. html sample1 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only f..