사이먼's 코딩노트

[디자인삼성 탑바 제작 (~ing)] [우측 텍스트와 아이콘 생성] 우측 right-box는 텍스트가 들어가는 text-box와 아이콘이 들어가는 icon-box로 나누어져 있다. html에 작성 시 text-box에 속한 "#UX_UI"라는 텍스트는 추후 스크립트 작업(애니매이션)이 필요하기 때문에 단순히 div태그로만 감싸지 않고 안에 span태그를 포함하여 작성한다. icon-box는 두 가지 이미지를 포함하기 때문에 클래스 선택자를 2개로 두어 div태그를 생성한 뒤 div태그 안에 img태그를 추가하는 방식으로 코드를 작성한다. img태그 안에 들어갈 돋보기와 지구본모양 아이콘은 디자인삼성 홈페이지에서 코드를 가져와 svg 파일을 새로 생성한다. img태그의 src에는 각 svg파일 경로를 작성..

[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의 총 값 = ??" 에서 ??값을..

[align-items 복습] display가 flex일 때 flex-item에 높이를 auto로 두고 align-items를 기본값(stretch)이 아닌 다른 속성값을 지정했다면 높이가 0으로 작동한다. [flex 속성 실습 with 개구리 게임] 아래 소개된 속성들은 display가 flex일 때, 정렬과 줄바꿈에 대한 속성이다. 정렬과 줄바꿈에 대한 속성값은 코드 작성 시, 주체가 되는 컨테이너(상위 엘리먼트)에 한번만 적용하면 된다. [flex-direction] flex-direction은 정렬하는 방향을 지정하는 속성이고, 속성값은 4가지가 있다. 1) row flex-direction의 기본 속성값이다. flex-item 요소들을 텍스트의 방향과 동일하게 (한 줄에 나란히) 정렬한다. fl..

[flex] 설명에 앞서 flex 관련한 기본적인 html 구조는 flex-container 아래 flex-item가 있는 구조로 생각하면 된다. [flex-direction] flex-item에는 flex-direction이라는 속성이 기본적으로 들어있다. flex-direction은 flex-item의 방향을 설정(정렬)할 수 있는 속성이다. 정렬과 관련된 flex 속성은 flex-item이 아닌 flex-container에서 코드를 추가해야 적용된다. flex-direction의 기본값은 한 줄에 나란히 배열되는 row가 있다. 특정한 상황에서는 row값을 column값으로 바꿔 사용하는 경우도 있다. column은 flex-item을 한 줄에 하나씩 배열시키는 속성값이다. [flex-shrink]..

[마켓컬리 탑바 제작 ~ ing] [html] 샛별 · 하루 배송안내 [css] .top-bar-section > .container > .right-box > a { background-color: #fff; font-size: 13px; font-weight: bold; border-radius: 20px; border: 2px solid #f2f2f2; letter-spacing: -2px; line-height: 56px; padding-left: 16px; padding-right: 16px; padding-top: 6px; padding-bottom: 6px; } a태그는 display가 inline이기 때문에 브라우저에서 텍스트 취급을 받는다. 텍스트 취급받는 요소는 가로 정렬할 때 text..

[마켓컬리 탑바 제작] [html] 카테고리 아이템-1 아이템-2 아이템-3 아이템-4 배송안내 [css] a { color: inherit; text-decoration: none; } a태그의 노멀라이즈 (글자색상은 검은색, 밑줄 제거) .top-bar-section { border: 1px solid red; } top-bar-section 클래스는 div태그이고 div는 display 속성이 block이기 때문에 상위 엘리먼트인 body의 너비를 100% 상속받아 화면 너비만큼 크기를 가진다. .top-bar-section > .container { border: 1px solid orange; width: 1080px; height: 56px; margin-left: auto; margin-ri..