사이먼's 코딩노트

[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..

[box-sizing] box-sizing은 도형의 테두리(border)를 안에 그릴지 밖에 그릴지를 정하는 속성이다. box-sizing의 기본 속성은 content-box로 도형 밖에 그려진다. 디자인 상 outside 즉, 밖에 테두리를 그리는 속성은 box-sizing: content-box; 이다. 디자인 상 inside 즉, 안에 테두리를 그리는 속성은 box-sizing: border-box; 이다. 웹 디자이너는 한가지 가이드라인을 만들어서 통일성있게 디자인을 하는 것이 좋다. 구현하는 개발자는 구현하기 전에 한번씩 확인 후 개발을 하는 것이 좋다. 너비, 높이가 200px에 border의 두께를 1px를 준다고 가정했을 때, box-sizing: border-box;를 적용하면 박스(도형..

[문제풀이] 아래 문제는 모든 태그와 텍스트를 가운데 정렬해보고자 만든 문제입니다. 도형취급을 받는 display 속성과 텍스트취급을 받는 display 속성을 잘 구분해서 풀어봅시다. 여유가 된다면 우측 하단에 버튼도 추가해봅시다. See the Pen 문제 by kimhyeji324 (@kimhyeji324) on CodePen. [문제 도전] img는 텍스트 취급을 받는 display: inline 요소이다. 따라서 img를 감싸고 있는 엘리먼트에 가운데 정렬을 한다. img-box에 text-align: center;을 적용한다. 하단에 텍스트들은 도형취급을 받는 display: block 요소 안에 써져있다. (h1, p 태그) text-box에는 가운데 정렬을 위해 margin-left: au..

[도형 가로정렬] 상위 엘리먼트와 하위 엘리먼트의 크기가 같으면 정렬기능을 사용할 수 없다. 뚱뚱한 고양이가 박스에 끼어있을 때 사람이 박스를 아무리 흔들어도 움직이지 않는 것처럼 모든 물체나 요소도 똑같이 상위 엘리먼트 크기와 하위 엘리먼트의 크기가 같으면 정렬할 수 없다. (가로와 세로 전부) [브라우저에서 도형 취급을 받는 요소] display 속성이 block 요소일 때 display 속성이 flex 요소일 때 [브라우저에서 도형 취급을 받는 요소의 가로정렬] margin-left: auto; 와 margin-right: auto; 를 사용한다. 두 속성은 움직여야할 태그에 직접 적용해야한다. margin-left: auto; 의 속성을 부여하면 도형 취급받는 요소는 오른쪽으로 정렬하게 된다. m..

[a태그] a태그는 앵커 태그이자 하이퍼링크 태그이다. a태그는 URL 주소를 남겨 해당 웹 페이지로 링크되어 이동하는 역할을 가진 태그이다. a태그는 클릭할 수 있는 형태가 있어야 이동할 수 있다. 링크만 적어두고 태그의 내용이나 형태가 없다면 링크 이동이 불가능하다. a태그의 기본속성인 target="_self"는 링크 이동을 할 때, 내가 보고있는 페이지가 바뀌면서 이동한다. target의 속성을 _blank로 한다면 내가 보고있는 페이지가 아닌 새 페이지가 열리면서 이동한다. (target="_blank") a태그는 a태그가 가진 너비, 높이의 범위만큼 클릭이 가능하다. a태그의 기본 display 속성값은 inline이고 크기 커스텀을 위해서는 상황에 맞는 display 속성값으로 변경 후 커스..

[inline-block 줄바꿈 복습] [브라우저에서 텍스트 취급받는 display 속성값] inline inline-block 텍스트에 자간, 행간과 같은 여백이 있듯이 두 속성값도 여백이 생긴다. [브라우저에서 도형 취급받는 display 속성값] block flex See the Pen inline-block 줄바꿈 복습 by psm817 (@psm817) on CodePen. [inline-block 여백제거] [여백속성] margin : 클릭되지 않는 범위에 사용되는 여백 속성, 적용하면 적용한 태그 너비,높이에 포함되지 않는다. 오브젝트와 오브젝트 사이를 구분할 때 사용한다. (태그와 태그 사이의 여백) padding : 클릭되지 않는 범위, 클릭이 되야하는 범위에도 사용되는 여백 속성 (태그..

[h 태그] h 태그는 제목 태그이다. h 태그의 종류는 총 6개이며 h1, h2, h3, h4, h5, h6이다. h 태그의 숫자가 클수록 글자 크기가 조금씩 작아진다. (제목 용도에서 본문 용도의 글자로 작아진다.) h1 태그는 html 문서에서 딱 한번만 사용할 수 있다. h1 태그 없이는 h2 태그를 사용할 수 없다. h2 태그부터 h6 태그까지는 html 문서에서 여러번 사용할 수 있지만, h2 태그부터는 순서대로 한번씩 다 사용한 후 자유롭게 사용해야한다. h2 -> h3 -> h3 -> h3은 가능, h3 -> h3 -> h3 -> h2는 불가능 h 태그의 기본 display는 block이다. [overflow] 상위 엘리먼트보다 하위 엘리먼트가 더 클 때 overflow 속성을 사용하여 처..