CSS
-
mouseenter/leave border-bottom dropdown 덜덜거림 해결CSS 2022. 11. 24. 12:45
헤더 영역에 보더바텀이 있고 로고 메인메뉴 etc 이렇게 헤더에 3개가 있는 상황! 메인메뉴 영역과 서브메뉴 영역에 css hover가 아닌 js mouseenter/leave로 동일한 효과를 주고 있었는데 header의 보더바텀이 1px영역을 차지하다 보니 메인메뉴의 요소가 아니라 판단해서 마우스 커서가 이 문제의 1px영역을 미지의 공간으로 인식해 서브메뉴가 사라지는 이슈가 있었다. 그래서 outline으로 대체했다. outline은 영역을 차지하지 않는 간섭이 없는 선이라 말끔히 해결됐다. 대신에 outline-bottom. top left 이렇게 한면 한면에 지정할 수 없다. 하지만 헤더가 기본적으로 top left right에 맞닿아 있어 1px은 브라우저 밖에서 그려지기 때문에 눈속임을 하면서..
-
면접 질문에 대한 내가 했던 아리송 개념정리CSS 2022. 11. 20. 14:45
1. 상하 요소에서의 마진 겹침. 해결책은? 나의 답변 : 마진끼리 겹치는 첫번째 요소에 .clearfix를 준다! .clearfix::before, .clearfix::after { content: ''; clear: both; display : block; } 하지만 이건 float 속성을 쓸때 레이아웃이 빠끄러질 때 쓰는 것! .parent::before, .parent::after { content: ' '; display: table; } 테이블 가상요소를 넣어주는게 보편적이고 overflow: hidden 처리를 해주는 등 다른 방법이 있으나 그에따른 마이너한 이슈를이 생긴다. 평소 flex를 사용하다보니 마진 겹침 현상을 겪어 보지 못했고 clearfix는 기능사를 준비할때 많이 썼기에 뭔가..
-
Background-clip과 flex 속성을 같이 사용시 작동 안됨(a.k.a Bug)CSS 2022. 9. 19. 10:14
나의 개발환경은 윈도우 intel CPU 조립식 컴퓨터 크롬브라우저이다. Cross browsing을 위해 iphone 디바이스에서 safari로 더블체크를 한다. 이 환경에서 아래의 코드는 문제가 없었다. (strong태그에 그라데이션 텍스트 스타일링을 해줬다.) &-content { @include text-style(14, $dark); .blog { strong { @include inline-flexbox(start); overflow: hidden; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient( 180deg, #f5e2b0, #f5b5b5 10%,..
-
CSS SCSS Sass 뭐고 뭐가 좋은지CSS 2022. 9. 15. 00:28
CSS(Cascading Style Sheets:종속형 시트)를 작성함에 불편함을 느껴 생겨난 것이 Sass(Syntactically Awesome Style Sheets:문법적으로 어썸한 스타일시트)이다. CSS를 배우다 Sass를 처음접하면 마치 HTML을 Pug구문으로 작성하는 낯섦이 있다. 세미콜론과 중괄호를 쓰지 않을 뿐더러 잘못된 들여쓰기에 부모자식요소의 하극상이 벌어진다. 그래서 Sass ver.3부터 기존의 Sass의 장점은 가져가되 많이 생략해서 쓰는 낯섦을 없애고 CSS와 비교적 닮아있는 SCSS(Sassy CSS:멋진 CSS)가 생겨나게 됐다. SCSS는 오히려 CSS보다 먼저배우면 좋겠다 싶을 정도다. Nesting기능 덕분에 선택자의 중복을 없앰과 동시에 위계구조가 한눈에 보여서 ..
-
숨김 클래스.CSS 2022. 9. 7. 07:17
.hide .visually-hidden .blind .offscreen 접근성 측면에서 시각장애인을 위한 스크린리더가 읽을 수 있도록 img태그에 alt속성을 꼭 채워주는 것처럼, ✨버튼안에 span,strong과 같은 인라인블록 태그에 설명을 써놓고 대게 위의 클래스명으로 화면에는 보이지 않게 한다. 스크린리더가 불필요한 아이콘은 읽지못하게 i태그 속성에 aria-hidden을 추가해주는 것도 접근성 측면에 도움이 되는데 지금 이 사진이랑 버튼은 이런거예요! 하고 알려주는 위의 방법과는 사뭇 다르다. 화면상에는 꼭 필요하지만 스크린리더가 읽지 않고 스킵해도 될때 태그에 쓰는 속성이니 말이다. (이미 버튼안에 글쓰기 텍스트와 chevron 아이콘이 있을 때 글쓰기라는 텍스트를 스크린리더가 읽어줄 것이니..
-
CSS 속성 변수로 담아 사용하기CSS 2022. 8. 29. 01:29
주로 색상값을 변수에 담아 곳곳에 사용하면. 테마 변경시 변수에 담아둔 색상값만 변경하면 한번에 전부 변경된다. 일일이 하나하나 수정할 필요가 없어지고 유지보수가 용이한 코드가 된다는 것! 흔한패턴 : :root 의사 클래스에 선언해서 html문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구하는 방법. 범위를 제한해야 하는 적절한 이유가 있을 경우 달리 사용가능. :root { --main-bg-color: brown; } 아래 처럼 var()함수안에 선언한 이름을 넣어주면 그 값이 불러와 진다. element { background-color: var(--main-bg-color); } 왜 쓰는지 코드비교해보자. 반복사용하는 것을 선언하고 그 값을 뿌려준 코드. 추후에 값 변경시 일일이 찾아 변..
-
Mixin. 작성해 두면 두고두고 편하게.CSS 2021. 7. 22. 21:31
flexbox $flex-map: ( // 배열이라고 하나 이렇게 값을 펼쳐논다. key : 값 형태. start: flex-start, end: flex-end, between: space-between, around: space-around, stretch: stretch, center: center, ); @function _get-flex-value($key) { //입력한 키값($key)를 받아서 @return map-get($flex-map, $key); // @return 리턴한다. 배열에서 입력한 키값에 맞는 값을. } @mixin flexbox($js: center, $ai: center) { // : 를 붙히고 값을 써준 것은 default값을 설정함 display: flex; alig..
-
Sass. SCSS. grid system.CSS 2021. 7. 22. 18:26
Sass. Syntactically Awesome Style Sheet. 문법적으로 어썸한 스타일시트. Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다. Sass는 중괄호 세미콜론이 없고 +, = 기호로 @mixin, @include를 대신합니다.SCSS가 Sass보다 CSS와 중괄호, 세미콜론을 쓴다는 점에서 유사합니다. 참고: https://heropy.blog/2018/01/31/sass/ Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법..