text border- 폰트테두리 text-shadow:-1px 0 rgba(0,0,0,.3), 0 -1px rgba(0,0,0,.3), 1px 0 rgba(0,0,0,.3), 0 1px rgba(0,0,0,.3); HTML 삽입 미리보기할 수 없는 소스 gradient - 그라데이션 그라데이션 자동 생성 사이트 https://www.colorzilla.com/gradient-editor/ background:linear-gradient(45deg, #28c983 0%,#db157b 50%,#385eea 100%); HTML 삽입 미리보기할 수 없는 소스 gradient border - 그라데이션 테두리 ul li{ width:240px; height:240px; border:4px solid trans..

css 가상 요소를 활용해 넘버링을 해주는 기능이다. ol뿐만 아니라 일반 태그에도 붙일 수 있다. 다만, 숫자 순번만 가능하다. css 카운터는 css선택자로 선택한 요소에만 순번을 붙일 수 있다. HTML 구조 내용01 내용01_01 내용02 내용02_01 내용03 counter-reset - 변수명 정의 넘버링을 하기 위해서는 부모 요소가 반드시 필요하다. 부모 요소에 counter-reset를 추가하여 변수 선언을 한다. 카운터를 초기화하고, 별도의 시작 값을 지정하지 않으면 0에서 시작한다. 변수명 뒤에 시작값을 추가할 수 있다. 시작 값을 추가하게 되면 1부터 증가 값을 더한 순으로 나열된다. .container{ /*변수명 [시작값]*/ counter-reset: num; counter-re..

grid는 flex와 비슷한 듯 다르다. flex의 경우 가로 혹은 세로 한 가지 방향으로만 정렬 가능하지만, gird는 가로+세로로 정렬 가능하기 때문이다. gird의 경우 IE에서는 따로 선언해줘야 하니 주의할 것! 특히, IE의 경우 grid를 선언하면 row, column 값을 전부 지정해줘야 한다. 그리드 용어 설명 그리드 컨테이너(Grid container) : display:grid를 적용하는 전체 영역 그리드 아이템(Grid Item) : 컨테이너의 자식 요소 그리드 트랙(Grid track) : grid의 행 또는 열 그리드 셀(Grid cell) : 그리드 한 칸. 제일 작은 영역 단위. item이 들어가는 가상의 틀이다. 그리드 라인(Grid line) : 그리드의 트랙을 구분하는 선..

부모 요소 하위의 자식들을 가로 혹은 세로로 정렬해준다. float와 inline-block 대용으로 사용할 수 있다. 단, IE에서는 사용 안 되는 속성도 있다. 자세한 지원사항은 https://caniuse.com/?search=flex 에서 확인 가능하다. HTML 구조 item01 01 02 item02 item03 flex container 속성 display .container{display: flex;} 기본적으로 부모 요소에 flex 선언이 되어있어야 한다. 선언을 하면 자식들이 inline 되었음을 확인할 수 있다. height 값은 컨테이너의 높이만큼 늘어난다. 이것이 float와의 차이점이다. 단, 직계 자손에게만 적용된다. 하위 요소도 또한 옆으로 정렬하고 싶다면 ul에 displa..

HTML 구조 리스트01 리스트01 리스트01 CSS 구조 ul{overflow:hidden} /* 기본 - li가 4개 일 때 */ ul>li{float:left; width:25%; border:1px solid #ccc;} /* li가 2개 일 때 */ ul>li:first-child:nth-last-of-type(2), ul>li:first-child:nth-last-of-type(2) ~ li{width:50%;} /* li가 3개 일 때 */ ul>li:first-child:nth-last-of-type(3), ul>li:first-child:nth-last-of-type(3) ~ li{width:33.3%;} /*flex는 값을 지정할 필요가 없다*/ ul{display: flex;} ul ..