슬롱주리 Selon Julie

Combinator 여러가지 selectors를 선택할 수 있음. 무엇을 선택할지 더 자세히 정할 수 있음 combinator를 쓰면 우선순위가 높아짐 Combinator의 종류 Adjacent sibiling General sibiling Child Descendant Adjacent sibiling 2개 이상일 수 있음 h2의 '바로' 다음에 오는 p 태그에 적용 h2 + p { color: red; } Not applied CSS applied Not applied Not applied Not applied Not applied CSS applied General sibiling 바로 앞에 올 필요 없고, 같은 레벨에만 있으면 적용됨 h2 ~ p { color: red; } Not applied C..

Selector elements classes . universal * IDs # attributes [] *sass: Parent selector & Elements/Tags 해당되는 모든 태그에 적용 Our header The blog post more info h1 { color: red; } Classes 클래스 이름은 임의로 정할 수 있음. 본 클래스가 들어가 있는 태그만 선택 클래스 이름을 지을때는 '소문자', '-'로 연결하여 짓기 *대소문을 구분하지 않음 클래스는 여러번 사용 가능 Our header The blog post more info .blog-post { color: red; } Universal 모든 것에 적용. 하지만 거의 쓰지 않음 전체 동일 폰트를 적용할때 *{}보다 bo..

출처 노마드 코더 | Flexbox Flexbox 사용 규칙 1. 자식 요소를 움직이기 위해서는 (아래의 경우에는 div), 자식 요소에는 어떤 것도 적지 말아라. (직접적인) 부모 요소에만 명시해라. display:flex를 포함한 모든 것 body{ margin: 20px; display: flex; } div{ width: 300px; height: 300px; background-color: teal; } 주축(main-axis), 교차축(cross-axis) 기본값으로 설정되어 있는건 위 그림과 같다. 주축은 수평, 교차축은 수직으로 설정되어 있다. 하지만 기본값은 변경될 수 있음 2. justify-content 은 주축main-axis에 적용됨 justify-content: flex-star..

position은 html의 태그의 elements들을 화면 상에 어디에 위치시킬 것인가를 지정하는 css 의 프로퍼티이다. 위치를 위, 아래, 오른쪽, 왼쪽으로 이동시키고 싶을때 사용한다 (레이아웃 : Flexbox, 위치: position) position 주요 타입에는 아래가 4가지가 있다 position: static; position: absolute; position: relative; position: fixed; position type을 정했으면 얼마나 이동시킬지에 대한 offset값을 지정해줘야한다. offset에는 위, 오른쪽, 아래, 왼쪽 (top, right, bottom, left) 값이 있고, 단위 px이다. *offset 이라는 동사의 뜻은 ‘상쇄되다’이다, 즉 지정된 값 만..

부트캠프를 시작하기 전 사전 스터디에서 가장 먼저 배우는 것은 Javascript의 변수 선언하는 법과 console.log이다. 갑자기 replit이라는 사이트에 들어가라더니, 들어가 보니 막 영어를 쓰고 run을 누르고 있는 나를 발견하였다. 개발을 전혀 접하지 않은 상태에서는 자바스..하면 벌레퇴치제가 생각나고 변수 하면 변정수가 생각나는 수준이다. 이렇게 무지한 상태에서 큰 그림을 잡기위해 내가 도대체 지금 뭘 배우고 있는지 알아보기로 했다. 우선 나는 웹 개발을 배우고 있다. 웹을 구성하는 요소는 3가지인데, 이는 HTML, JavaScript, CSS이다. 각각은 웹에서 아래 역할을 맡고 있다. HTML: 내용, 구조 CSS: 디자인 JavaScript: 프로그래밍 언어 조금 더 자세히 보자면..