목록web/css (26)
Rainbow
[css] BEM :(Block, Element, Modifier) 이란?
CSS 방법론 BEM 개념 BEM : Block, Element, Modifier 구성된 클래스 이름을 짓는 CSS방법론이다 Id에서 사용하지 않고 오직 CSS명에만 활용할 수 있다 "어떻게 보이는가" 아니라 "어떤 목적인가 에 따라 이름을 짓는다 BEM 방법론은 다음과 같다 블록(Block) : 재사용 가능한 독립적인 블록요소이고, 사용자 인터페이스(ul) 의미 있는 부분을 나타낸다 블록은 일반적으로 하이픈(--)으로 구분된 단어 또는 짧은 단어 조합으로 되어있다 블록의 예로는 헤더, 푸더, 버튼, 내비게이션메뉴 예시 → header, footer, Button, nav--menu 요소(Element) : 블록을 구성하는 종속의 하위요소이다 블록 내에서 특정 기능을 수행하며 블록 외부에서는 사용할 수 ..
CSS 기초 !!
소스코드 .js { font-weight: bold; color: red; } #first { color: green; } span { color: blue; } WEB JavaScript JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used ..
04-3 겹치거나 넘치는 요소 다루기 - 입문자를 위한 CSS3 (wikidocs.net) 04-3 겹치거나 넘치는 요소 다루기 ##요소의 겹침 현상과 z-index 웹 문서가 렌더링 될 때, 모든 요소는 문서의 기본적인 흐름에 따라 태그가 쓰여진 순서, 즉 요소가 표현된 순서대로 브라우저 화면에 보여집니… wikidocs.net
display : { 속성값 } grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치 inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치 grid-template-columns : 속성 - 각 칼럼의 너비를 지정한다 grid-template-rows : 속성 - 컨테이너 안의 줄의 간격, 높이 지정 px -> 크기 고정 fr -> 상대적 크기 지정 repeat()함수 값이 반복될 경우 줄여서 표현 auto-fill: 너비만큼 채우기 auto-fit: 공간 없이 꽉 채우기 minmax(최소, 최대) - 줄 높이를 고정하지 않고 유연하게 지정한다 - 줄 높이를 고정할 경우 지정한 높이보다 내용이 많을 경우 보이지 않음 px: 크기 고정되어 넘어가면 보이지 않음 minmax(100px ..
BEM이란? CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙이는 게 관건이다. BEM이란, Block Elements Modifier의 축약어입니다. 1 즉, 협업이나 유지보수에 있어서 생산성의 향상을 가져다줍니다. 2 css선택자 이름을 정의하면 어디에 사용하는지 쉽게 알 수 있다 예를 들어 설명해 보겠습니다. 다음은 같은 뜻을 지닌 클래스 네임을 다른 방식으로 작성한 것입니다. mymenuitemvisible my-menu-item-visible myMenuItemVisible class="mymenu" 라는 큰..
https://gold-dragon.tistory.com/38 float를 clear 하는 방법 float clear box1 box2 empty-box * { margin: 0; padding: 0; } .box-wrap { background-color: yellow; } .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100p.. gold-dragon.tistory.com 부모 요소의 가상 선택자 클래스 ::after로 clear: both; 속성을 적용 box1 box2 empty-box * { margin: 0; padding: 0; } .box-wrap { background-color: yellow; }..