개발 블로그

BEM이란, 클래스 이름을 작성하는 방법에 대해서 정의된 규칙이다. .block__element--modifier 꼴로 정한다. 예를 들어, .card 컴포넌트 안에 img, title, desc, button element가 있으면 .card__img (언더바 2개) .card__title .card__description .card__button 와 같이 작성한다.

깃허브 주소 https://github.com/coolmj97/CSS Animation https://coolmj97.github.io/CSS/animation/index.html Background https://coolmj97.github.io/CSS/background/index.html Box shadow https://coolmj97.github.io/CSS/box-shadow-1/index.html https://coolmj97.github.io/CSS/box-shadow-2/index.html Flex box https://coolmj97.github.io/CSS/flex-box-1/index.html https://coolmj97.github.io/CSS/flex-box-2/index.ht..

Grid System : 페이지 전체를 설계하는 방법 중 하나 디자이너가 디자인한 페이지를 코드로 구현해야 하는 프론트엔드 개발자는 디자인을 이해해야할 필요가 있다. 디자이너들은 그리드 시스템을 이용해서 작업한다. container : 그리드 시스템이 적용되는 전체범위 column : 나눠져 있는 칸 (기본은 12칸) gutter : 간격, 여백 그리드 시스템과 반응형 웹을 구현하기 위해서 CSS 프레임 워크인 부트스트랩을 이용한다. 부트스트랩 ★ container의 자식은 반드시 row, row의 자식은 반드시 col로 시작하는 녀석들이 와야한다. 내가 진정으로 만들고 싶은 요소는 col 안에 자식요소로 넣어준다. col-1 설정한 칸이 12칸을 넘어버리면 다음 줄로 밀려난다. 반응형 웹 : 화면 사이..

어떤 선택자를 우선으로 적용할까? 1위 아이디 선택자 (금) 2위 클래스 선택자, 가상 클래스 선택자 (은) 3위 요소 선택자 (동) **Rule Breaker -inline style -!important : inline style도 이겨버림, 웬만하면 자제하자

user의 action에 따라 스타일을 다르게 할 때 사용한다. a, button, form과 관련된 요소는 특히 user와 상호작용이 잦아서 자주 쓰인다. ①element:hover : 요소에 마우스가 올라갔을 때 ②element:focus : 요소가 포커싱 되었을 때 ③element:active : 요소를 누르는 찰나

Pseudo-classes : 가상 클래스,상태나 조건을 만족할 때 쓸 수 있는 클래스 ①element:first-child : element이자 첫번째 요소 ②element:last-child : element이자 마지막 요소 ③element:nth-child(3) : element이자 n번째 요소

1. 자식 선택자 parent > child : 모든 자식요소 중에서 선택된 자식 2. 자손 선택자 parent descendants (띄어쓰기) : 모든 자손요소 중에서 선택된 자손 자식 선택자보다 좀 더 포괄적인 느낌이 든다. 3. 형제 선택자 -같은 레벨 -.active + li : 이 클래스의 요소 바로 다음에 오는 형제(li) 요소 하나만을 선택 -.active ~ li : 이 클래스의 요소 다음에 따라오는 모든 형제 요소(li)

1. 요소 선택자 요소 자체를 직접 지칭하여 스타일을 적용 ★2. 클래스 선택자 요소에 클래스 속성을 지정한 것에 스타일을 적용 .을 앞에 붙임 예를 들어 클래스를 여러개 가진 경우, .box-0.box-1 과 같이 띄어 쓰지 않고 붙여서 쓰면 .box-0이자 .box-1라고 해석 3.아이디 선택자 식별자, 신분증과 같음, 같은 단어는 단 한 개여야 함 앞에 #을 붙임