Ted's Codding study

😁 스크롤바가 없는 것이 디자인에 깔끔해 보여서 간략하게 정리 해보았습니다 브라우저마다 방법이 조금씩 상이함배경에 이미지를 넣고 브라우저 크기를 전체로 키우고스크롤바는 없지만 실제로 스크롤이 구현되는 모습/* Chrome, Safari, Opera */body::-webkit-scrollbar { display: none;}/* IE, Edge */html { -ms-overflow-style: none;}/* Firefox */html { scrollbar-width: none;}홈페이지 사진들은 픽사베이의 사진들을 사용하였습니다.전체 소스 코드 테드코딩  노션으로 보고 싶다면?https://short-echidna-b16.notion.site/525a9368..

1.inline/inline-block 요소 간의 수직 정렬 (이전 글)2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.2.테이블 셀 요소 내부의 수직 정렬vertical-align 속성을 사용하지 않은 default 값인 middle인 상태제일 왼쪽 셀에 글자가 많아지면서 자연스럽게 셀의 길이가 늘어난 상태가 되고다른 셀의 글자가 자동으로 가운데로 들어가 있음// 전체 소스 코드는 길어서 제일 아래에 첨부 자차카타 vertical-align: top; 을 하게되면, 셀 안의 글자가 위로 정렬 자차카타vertical-align: bottom; 을 하게되면, ..

1.inline/inline-block 요소 간의 수직 정렬2.테이블 셀 요소 내부의 수직 정렬 (다음 글)기본 구문 : vertical-align: middle; (top, middle, botom 등이 있으며) default 값은 middle이다.1.inline/inline-block 요소 간의 수직 정렬 vertical-align을 적용하지 않았을 때의 default 값은 middle로 설정 되어 있다 vertical-align정렬 top을 주었을 때 정렬이 위로 올라간 것을 확인 vertical-align정렬 bottom을 주었을 때 정렬이 아래로 올라간 것을 확인 vertical-align정렬 이러한 특성을 이용하면 2의 제곱 이런 형태도 쉽게 표현 가능 22 노션으로 보고 싶다면..

😁 학습을 위해서 공부는 했지만, 개인적으로는… 잘 안 쓸 것 같습니다 (요즘 트렌드에는 맞지 않는 것 같습니다) radial-gradient() 함수 사용 중심점에서 시작하여 원형으로 색상이 전환되는 방식기본 구문radial-gradient(shape size at position, start-color, ..., last-color); 사용 디테일shape: 그라데이션의 모양 지정 (circle(원) 또는 ellipse(타원)) size: 그라데이션의 크기 지정 (예: closest-side, farthest-corner) position: 그라데이션 중심의 위치 지정 (예: center, 50% 50%)EX) background: radial-gradient(circle, yellow, purpl..

😁 개인적으로 그라데이션 중에서는 선형 그라데이션이 가장 모던한 스타일로 여겨지고 원형보다는 깔끔해서 가장 선호하는 스타일입니다. inear-gradient() 함수 사용 시작점과 끝점 사이의 직선을 따라 색상이 전환되는 방식기본 구문background: linear-gradient(direction, color-stop1, color-stop2, ...); 사용 디테일direction : 그라데이션의 방향을 지정 - 각도(예: 45deg)나 방향(예: to right)을 사용 가능color-stop : 색상이 변하는 위치를 지정 - 각 색상 위치는 퍼센트(%)로 지정 가능EX01) background: linear-gradient(to right, skyblue, pink); (하늘색에서 핑크색으로 ..