Gwni Lab GwniLab

벤더 프리픽스란? 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. IE 크롬 파이어폭스 사파리 오페라 -ms- -webkit- -moz- -webkit- -o- 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다. [브라우저별 벤더 프리픽..

Resetting과 Normalize 최근 외국의 한 블로거를 통해 작업 전 기본적으로 브라우저별 태그에 대한 기본 스타일링을 제어하는 두가지 방법을 비교한 글을 본적 있다. 하지만 국내에서는 대부분 front-end개발의 아버지로 칭하는 Eric Meyer의 Reset.css를 사용하거나, yahoo가 내놓은 Reset.css를 사용 또는 국내 IT대기업인 네이버나 다음의 reset.css를 사용한다. 그리고 본인의 입맛에 맞춰 커스터마이징하여 사용한다. 필자는 다음의 reset.css를 커스터마이징해서 사용한다. 이처럼 국내에서는 아직 Normalize보다는 Resetting을 하는 추세이다. 일단 Resetting은 대충 사용해보았기때문에 알 것 같은데 Normalize는 무엇인가를 정확히 설명 할..

CSS 단위 CSS에는 크기를 나타내는 단위가 있습니다. 많이 사용하는 대표적인 크기 단위는 px, em, %이 있습니다. px (픽셀) px(픽셀)단위는 화소 1개의 크기를 의미합니다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식합니다. em em은 배수 단위로 상대 단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적인 사이즈를 설정합니다. % %는 백분율 단위의 상대단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다. 다양한 단위의 종류 단위 관련 사항 em em은 상위 요소의 font-size를 정의합니다. ex)1.5em 이런 식으로 정의합니다. rem Root em..

css box padding의 기본 원리 width를 200을 지정한 후, 패딩을 50을 주면, CSS에서는 기본 박스 가로(200px)을 유지한 채 패딩(50px)만큼 크기를 늘림 그렇기에 총 width는 250xp이 됨 이를 막기 위해 box-sizing:border-box를 사용함. box의 크기를 유지한 채 padding 값을 줄 수 있다

Display CSS의 Display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. Block Block은 CSS의 Display 속성 중 하나입니다. display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 이나 , 태그 등을 들 수 있습니다. Inline Inline은 CSS의 Display 속성 중 하나입니다. display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 이나 , 태그 등을 들 수 있습니다. 여기서 잠깐! 인라인 태그는 블록..

CSS란? CSS는 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어입니다. CSS 주석 표시 {/*CSS주석*/} /*이렇게 표시합니다.*/ CSS 선언방법 3가지 내부 스타일 HTML 파일 안에 태그로 스타일을 작성하는 방식입니다. 이 방식은 번들링 하지 않는 프로젝트에서는 대부분 HTML, CSS, JS 파일을 나누어 관리하는 것이 일반적 이므로 번들링하지 않는다면 자주 사용되지 않는 방식입니다. 외부 스타일 link 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식입니다. 실무에서 주로 사용하는 방식으로 대부분의 프로젝트에서 이방식을 사용하고 있습니다. 인라인 스타일 요소의 style 속성에 직접 스타일을 작성하는 방식 입니다. 우선순위상..

그라디언트 코드 자동 생성 사이트 CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 글을 시작하기에 앞서 바로 그라디언트를 적용 시키고 싶으시면 링크된 사이트를 이용하시면 됩니다. CSS 그라디언트 CSS Gradient란? CSS 그레이디언트는 자료형의 특별한 종류인 로 나타내며 두 개 이상의 색 간의 점진적 전환을 표현합니다. 그레이디언트에는 선형(linear-gradient),..

30분 53초 10단계 통과! https://css-speedrun.netlify.app/