oris9

[선택자]::-webkit-scrollbar{ display: none;}width를 100vw로 지정하게 되고, 만약 y축에 scroll이 생기게 되면, 스크롤바가 vw에 포함되기때문에 x축에도 스크롤바가 생기게 된다 ~ ~ 아래의 방법으로 해결해주면 된다. 1. body 태그에  overflow-x: hidden; 속성 걸어주기나는 global.css 파일에 이렇게 적용시켜서 해결시켰다body { overflow-x: hidden;} 2. 스크롤바 안보이게 숨기기깔끔한 페이지 제작이 필요할때는 나쁘지 않은 방법일 것 같다![선택자]::-webkit-scrollbar{display: none;}

Attribute 과 Property 의 차이 실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가르키지만, 속성(Attribute)은 HTML 안에서 쓰이는 엘리먼트의 추가적인 정보를 의미하고(즉, html 문서 내에 있기에 정적임), 프로퍼티(Property)는 DOM 객체 내부의 속성을 의미한다(DOM객체는 js로 다루기때문에 동적임). 일반적으로 프로퍼티 접근이 getAttribute() 와 setAttribute() 메서드보다 약간 더 빠르다. 따라서 사용자 정의 속성과 같이 별도의 프로퍼티가 없는 경우에만 메서드를 이용하고 그외에는 프로퍼티로 접근하는 방법이 이상적이라 볼 수 있다고 한다. 비표준 속성의 충돌을 방지하기 위한 data-* 속성 속성은 개발자가 용도로 맞게 새롭게 ..

작동 방식 BEM 클래스 이름은 최대 세 부분으로 구성됩니다. 블록: 구성요소의 가장 바깥쪽 상위 요소를 블록으로 정의합니다. 블록은 새로운 구성 요소의 최상위 수준 추상화입니다. 이 블록은 상위 블록으로 간주되어야 합니다. 요소: 구성 요소 내부에는 요소라고 하는 하나 이상의 하위 요소가 있을 수 있습니다. __element 이중 under__scores 접두사가 붙은 요소는 하위 요소를 식별하는 CSS 선택기입니다 . 이러한 CSS 선택기를 사용하여 더 효과적으로 제어할 수 있는 요소를 타겟팅할 수 있습니다. 수정자: 블록이나 요소는 수정자로 표시되는 변형을 가질 수 있습니다. –modifier 이중 대시가 접두어로 붙은 수정자는 특정 요소의 변형을 식별하는 CSS 선택기입니다. 이는 기본 구성 요소..

** 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다. HTML5 시멘틱 태그 HTML5의 시맨틱(sematic) 태그는 웹 문서의 구조와 의미를 명확하게 나타내는 데 사용된다. 시멘틱 태그는 각요소의 의미를 명확하게 나타내므로, 직관적으로 구조를 이해하기 쉽게 만들고, 유지보수성을 높이는데 도움이 된다. 검색 엔진이 웹 페이지의 콘텐츠를 올바르게 이해해 인덱싱하는데 도움이 되므로, 적절한 검색결과에 노출될 수 있도록 도와주는 검색 엔진 최적화(SEO)에 도움이 된다. 스크린리더와 같은 보조기술을 사용하는 사용자들의 웹페이지 이해와 탐색 편..

개인적으로 css를 작성할 때, 가장 감으로 하는 부분인 것 같다. 제대로 이해하고 쓸 수 있도록 공부하자 😡 position 따로 position을 지정해주지 않으면, 기본적으로 요소들은 `static`으로 지정되어있다. 또한 대부분 position은 요소의 정확한 위치 지정을 위해서 `top`, `left`, `bottom`, `right` 속성과 함께 사용된다는 것을 알아두자. ** position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block의 특징이 사라지게 된다. 1. static 요소에 적용되는 기본값이다. 요소가 HTML 문서 흐름에 따라 배치되며, top, right, bottom, left 속성이 적용되지 않는다. 2. relative 요소가 HTML ..

Cascading Style Sheets 의 `Cascading` 이란, 폭포처럼 문서의 위에서 아래로 흐르면서 스타일이 적용되는 css의 방식을 설명하는 것이다. 기본적으로, 스타일이 중복될 때는 가장 아래쪽의 스타일이 적용되게되는 것이다. 이러한 css에는 중요한 두가지 원칙이 있다. 1. 스타일은 상속(Inheritance)된다. 부모 요소에서 정의된 스타일 속성들이 자식 요소에게 상속된다. 기본적으로 자식요소에게 상속되지만, 상속되지 않는 요소들과 속성들이 존재한다. 2. 스타일에는 우선순위(Specificity)가 존재한다. 실제 css 에는 단순한 순서만을 고려해 스타일을 적용하지 않는다. 중요도, 명시도, 코드순서를 통해 우선 순위를 정하고 그 우선 순위에 맞게 스타일을 적용시킨다. `중요도..

웹폰트 최적화가 필요한 이유 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며, Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다. 브라우저가 렌더링 될 때 콘텐츠를 화면에 그리는 동안 폰트 리소스 응답이 늦어지게 되어 발생하게 된다. 브라우저 렌더링 알아보기 웹 폰트 최적화 하기 1) Preload 웹 폰트를 사용하는 경우, preload를 사용해 폰트 리소스 요청 시점을 당겨, 최적화를 진행..

CSS 변수 선언 및 호출 CSS에서 변수의 이름을 지정할 때는 변수 맨 앞에 -- 를 붙여주어야 한다. 그리고 변수를 호출해 사용할 때는 var(변수명)형식을 사용한다. :root { --main-font-color: #000f22; /* CSS 전역 변수 선언 */ } div { color: var(--main-font-color); /* CSS 변수 사용 */ } CSS 변수 선언 스코프 전역 변수 스코프 CSS의 :root 의사클래스는 문서 트리의 루트 요소를 선택한다. 즉, HTML 문서의 루트 요소는 요소이므로, :root와 html은 같다고 보면 된다. 보통 이 영역에 css 변수를 선언해 사용한다고 보면된다. 자바스크립트로 따지면 일종의 전역 변수 영역이라고 이해하면 된다. :root에서 ..