Develop_NOTE

CSS방법론CSS 방법론은 웹 개발에서 CSS 코드를 구조화하고 관리하는 규칙과 패턴을 제시하는 방법이다.주로 CSS가 복잡해질수록 스타일을 유지보수하고 협업을 용이하게 만드는 데 중요한 역할을 한다.   1. BEM (Block Element Modifier)BEM은 구조화된 클래스 명명 규칙으로, 큰 프로젝트에서 일관성 있게 CSS를 관리할 수 있도록 도와준다.BEM은 CSS 클래스 이름을 블록, 요소, 수정자로 나누어 작성한다.Block: 독립적인 UI 구성 요소 (예: .menu, .header, .card)Element: 블록 안의 구성 요소 (예: .menu__item, .card__title)Modifier: 블록 또는 요소의 상태나 변형 (예: .menu__item--active, .car..

:root? 위에 기재되었다시피 css에서 사용되는 전역(root)선택자이다. 일반적으로 CSS 변수를 정의 할 때 사용된다. 이를 사용하여 전역적으로 사용되는 변수를 선언하고, 이 변수들을 다른 요소들 스타일링 작업을 할 때 참조 할 수 있다. 작성법 예시 /** 전역 선택자 **/ :root { --main-color: #ff0000; --sub-color: #000; --text-color: #222; --sub-text-color: #333; } /** 전역선택자에서 선언한 변수 사용 **/ body { background-color: var(--main-color); color: var(--text-color); } header { background-color: var(--sub-color);..

flex 레이아웃 이란? flex레이아웃은 css3의 속성 중 하나로, 웹 페이지를 이루고있는 요소들을 유연하게 정렬하고 배치하는데 사용되는 방법이다. 즉, 요소들을 효율적으로 배치 할 수 있기때문에 다양한 디바이스와 해상도에 대응하는 반응형 웹 사이트를 보다 간편하게 구현하는데 도움이 된다. IE의 서비스가 종료된 시점인 지금에서는 grid와 함께 매우 적극적으로 사용해도 무방한 css3 속성이다. 속성 display: flex -선택자 요소 안에 있는 컨테이너 항목을 내용에 따라 유연한 레이아웃으로 처리해준다. -확인링크: https://jsfiddle.net/zsk3behm/ ※ flex의 성질은 그대로 가져오되 인라인 타입으로 처리해주는 'display: inline-flex' 속성도 있다. A ..

아래의 jsfiddle에서 같은 버튼을 중심으로 퍼지는 애니메이션을 주고싶을때 아래와 같이 처리한다. 퍼지는 버튼 - JSFiddle - Code Playground jsfiddle.net HTML 마크업 버튼 SCSS body { background: #000; } /* 버튼 요소 */ .btn { background: #fff; color: #000; font-size: 20px; width: 100px; height: 40px; border-radius: 35px; position: relative; z-index: 1; border: 0; //버튼을 중심으로 퍼질 요소 &:before { content: ""; border-radius: 35px; display: block; position: a..

웹을 만드는 작업중 css처리를 하면서 위와 같은 요소가 있다고 가정을 해보겠다. 우린 저 요소 안에있는 분홍색 사각형이 초록색 사각형의 한가운데 오게끔 css position속성을 이용해 만들고자 한다. 우선 마크업 방식은 아래와 같다. big이란 클래스명을 가진 요소가 분홍색 사각형의 기준점이 되어줘야 하고 small은 big의 기준점에서 한가운데로 자유롭게 이동해야하기때문에 아래와 같이 적용해준다. big 이란 요소에는 position: relative; small 이란 요소에는 position: absolute; .big { width: 300px; height: 300px; background: green; position: relative; } .small { width: 50px; heigh..