사이먼's 코딩노트

[css선택자 힘] [1순위] : 선택자로 선택된 클래스 선택자 (section > .color-box) [2순위] : 혼자있는 클래스 선택자 (.color-box) [3순위] : 선택자로 선택된 태그 (section > div) [4순위] : 혼자있는 태그 (div) [공통 특징] 같은 순위끼리는 가장 아래쪽에 있는 식이 실행된다. 순위의 순번이 낮을 수록 제일 후순위로 밀려 실행된다. 라이브러리는 2순위인 혼자있는 클래스 선택자로 되어있고, 커스텀을 하기 위해선 1순위인 선택자로 선택된 클래스 선택자로 지정하여 커스텀해야 한다. 라이브러리는 개발자 모드(F12)에서 관찰할 때 클래스 선택자로 지정되어 있기 때문에 1순위로 만들기 위해 상위 엘리먼트를 포함한 선택자를 지정해야한다. See the Pen..

[background-image] background-image 속성은 css에서 이미지를 불러온다. background-image 속성은 html에서 img태그를 작성하는 것과는 다르게 div나 일반 태그에 속성을 주어 배경화면 이미지를 포함하는 역할을 한다. 일반 img태그 안에는 텍스트와 같은 요소를 포함할 순 없지만, background-image를 통한 이미지는 텍스트를 포함할 수 있다. [background-image 기본 형태] background-image의 기본 형태는 background-image: url(); 이다. url()의 () 안에 이미지 주소를 넣으면 된다. [background-image 특징] background-color와 같이 background-image도 너비나 높..

[vscode 추가 설정] 코드 작성 후 코드 위에 마우스를 올려놓았을 때, 불필요한 정보를 보고싶지 않다면 파일 -> 기본설정 -> 설정으로 진입하여 설정 검색창에 'hover'를 검색하고 '호버 표시 여부를 제거합니다'의 항목의 체크박스를 해제한다. [디자인삼성 탑바 제작] [기본 구조 잡기] 겉면의 가장 큰 틀의 클래스 네임을 top-bar-section 라고 지정 top-bar-section은 pc 해상도에 따른 너비를 가지고 있다는 가정하에 너비를 따로 지정하지 않고, 해당 태그 아래에 container라는 클래스를 생성하여 높이를 주고 top-bar-section이 해당 높이를 상속받도록 한다. container에 높이를 지정하게 되면 top-bar-section에 100% 상속되고, disp..

[flex-direction: column과 flex-grow: 1; 적용하기] flex-direction이 column일 때, flex-item들의 세로 크기를 지정해주는 속성이 2가지 있다. height를 이용하거나 flex-grow를 이용하여 높이를 지정한다. flex-container에 남는공간이 100%라면 height: 100%와 flex-flow: 1은 같은 역할을 수행한다. height: 100%는 flex-container의 높이를 100% 가진 상태로 끼어있는 상태를 의미한다. flex-grow: 1은 flex-container의 남는 공간에 비율계산 후 알맞게 들어간 상태를 의미한다. 나중에 코드를 작성할 때, 두 속성의 의미는 비슷하지만 상황에 맞춰 필요한 코드를 작성하는 것이 좋다..

[flex-grow] flex-grow는 비율로 너비를 설정할 수 있는 속성이다. 속성값은 1부터 n까지 정수, 소수점 사용 가능하다. flex-container에서 남는 공간을 사용한다. 여기서 말하는 남는 공간이란, 여백을 사용하거나 다른 형제들이 사용하고 남은 공간을 뜻한다. 예를 들어 flex-container에서 width 600px를 지정하고 3개의 flex-item에 flex-grow를 1, 1, 1로 지정하면 flex-itme에 따로 width를 지정하지 않고도 남는 공간에 의해서 1:1:1 비율로 200px 200px 200px로 반응형처럼 너비가 설정된다. 공식을 쓰자면 "flex-container의 남는 공간 / flex-item들의 flex-grow의 총 값 = ??" 에서 ??값을..