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..
Scss에서는 확장이라는 개념이있는 다른 프로그래밍 언어에서 사용되는 상속의 개념과 비슷하다. Scss 상단에서 특정한 클래스를 만들어두고 아래쪽에서 그대로 가져와서 사용이 가능하다. Scss는 많이 알면 알수록 확실히 편한부분이 눈에 띄는거 같다. 상속은 @extend selecter 방식으로 사용하면 된다. // scss file .sample { color: red; font-size: 3.5em; background: green; margin: auto; } .sample2 { color: blue; padding: 15px 0; margin: -15px 0; } .sample3 { @extend .sample; box-sizing: border-box; @extend .sample2; } 위의 ..
평소에 사용을 잘안해서 포스팅 해두려고 한다. 들여쓰기와 내어쓰기를 할때 사용한다. 값이 양수면 들여쓰기, 값이 음수면 내어쓰기이다. 디폴트는 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..
Scss를 사용하는 가장큰 이유중 2번째가 변수를 사용부분인거같다. 사실 css를 쓰다 보면 반복적으로 특정 색깔을 지정하게 되는데 이럴때 유용하게 사용이 가능할거같다. 특히 유지보수적인 측면에서 상당히 편해지는 부분이있다. 같은색깔들을 전부찾아 바꿀수 있지만. scss상단에 특정 색상들을 선언해두고 이후 유지보수시에는 변수에서만 변경해주면 되기때문이다. 이부분은 색상뿐만 아니라 폰트사이즈, 너비, 높이등에서도 사용가능하다. 아래는 scss변수 선언방법이다. // variable $white: #fff; // 하얀색 $black: #000; // 검정색 $gray: #ddd; // 회색 $red: red; // 빨간색 아래는 scss변수를 활용한 scss 파일이다. // scss file #sample ..