POTATO THAT WANT TO BE HUMAN

chrome 브라우저에서는 input에 자동완성을 통해 입력하면 자동으로 input의 배경색, 글자색이 변경됩니다. 이는 chrome 브라우저의 기본설정이 다음과 같이 설정되어있기 때문입니다. input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important; color: -internal-light-dark(black, white) !important; } :autofill 은 hover, active 등과 같이 선택자에 추가..

CSS 레이아웃에 대한 학습을 진행할 때 반드시 배워야 할 두가지가 있습니다. 바로 Flex와 Grid 입니다. 이번 글에서는 Grid에 대해 다루겠습니다. 일단 Flex와 Grid의 가장 큰 차이점은 Flex는 한 방향 레이아웃(1차원)이고 Grid는 두 방향(가로-세로) 레이아웃(2차원)이라는 점 입니다. 그렇기때문에 Flex를 사용할 때보다 더 복잡한 레이아웃 표현이 가능합니다. Grid 레이아웃을 만들기 위해서는 컨테이너와 아이템이 필요합니다. 컨테이너와 아이템에는 지정할 수 있는 속성이 각각 정해져있습니다. 여러 속성에 대해 살펴보겠습니다. 🤔 display: grid 컨테이너에 display: grid 를 적용하면서 시작합니다. 속성으로는 grid와 inline-grid가 있습니다. 컨테이너가..

CSS에서는 다양한 단위가 있습니다. 단위에는 상대적인 단위와 절대적인 단위가 존재합니다. 🤔 절대적 단위 1. px px은 절대적인 단위로, 모니터의 해상도에 따라 다른 크기를 가집니다. 해상도가 높다면 작게 보이고, 해상도가 낮다면 크게 보입니다. 🤔 상대적 단위 1. % % (백분율) 단위는 부모 요소를 기준으로 비율로 표현됩니다. ( 상위요소의 몇 %인지를 계산 ) %를 사용할 때에는 calc() 함수와 함께 쓰입니다. clac() 함수는 연산함수로 +, -, *, / 연산이 가능합니다. ( 이때 나눗셈에서 0으로 나누면 에러가 발생하므로 주의하여야 합니다. ) 연산기호 중 +와 - 는 앞뒤로 띄어쓰기를 해줘야합니다. 예제를 통해 살펴보겠습니다. 큰 box가 있고 그 안에 두 개의 box가 있습니..

🤔 인접 형제 선택자 + 인접형제선택자는 바로 뒤에 있는 요소 단 한 개를 선택합니다. A + B { ··· } A와 B가 같은 계층에 있을 때 (형제요소일때) A 바로 뒤에 있는 B를 선택자로 지정합니다. 색상표 RED YELLOW GREEN BLUE BLACK 위 예제의 결과로 h1 태그 바로 뒤에 있는 p 태그 한 개가 선택된 것을 확인할 수 있습니다. 🤔 일반 형제 선택자 ~ 일반형제선택자는 뒤에 있는 모든 같은 요소를 동시에 선택합니다. A ~ B { ··· } A와 B가 같은 계층에 있을 때 (형제요소일때) A 뒤에 있는 모든 B를 선택자로 지정합니다. 색상표 RED YELLOW GREEN BLUE BLACK 위 예제의 결과로 h1 태그 뒤에 있는 모든 p 태그가 선택된 것을 확인할 수 있습니다.

ㅊCSS에서는 box-sizing이라는 속성이 있습니다. box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지는 정하는 속성입니다. content-box : content 영역을 기준으로 크기를 정합니다. (기본값) border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. CSS에서 각 태그의 영역은 Box Model로 구성됩니다. content : 글씨가 삽입되는 영역 padding : content와 border 사이 영역 border : 테두리 영역 margin : border와 다른 태그 사이 영역 🤔 content-box box-sizing을 content-box로 지정하면 width 및 ..

CSS에서 자식요소에 모두 flaot를 적용하게 되면 모든 자식요소가 뜨게 되므로 부모요소의 높이는 0이 된다. 이 현상을 방지하기 위한 다양한 방법이 있습니다. 1. 부모요소의 높이를 지정해줍니다. 2. overflow: hidden 속성을 이용합니다. 3. 가상클래스를 이용해 clear: both 속성을 줍니다. (clearfix) 이번 글에서는 3번째 방법인 clearfix에 대해 설명하겠습니다. 먼저 가상클래스가 없다는 가정하에, 4개의 box에서 3개의 box만 float가 되는 경우에 대해 살펴보겠습니다. 1번 박스 2번 박스 3번 박스 4번 박스 위 예제에서는 마지막 4번 box를 제외한 1, 2, 3번 box에 float: left; 를 적용하였습니다. 결과는 다음과 같습니다. 4번 요소는..

CSS에는 가상 클래스 선택자(Pseudo Class)가 있습니다. 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상선택자라고 합니다. 이번 게시글에서는 :nth-child()와 :nth-of-type()에 대해 알아보겠습니다. 🤔 :nth-child() :nth-child() 선택자를 사용하면 자식 요소의 위치에 따라 선택할 수 있습니다. 예를 들어 선택자:nth-child(3) 인 경우, 선택자의 형제 중 3번째 요소를 선택합니다. 🤔 :nth-of-type() :nth-of-type() 선택자를 사용하면 특정 태그 위치에 따라 선택할 수 있습니다. 예를 들어 선택자:nth-of-type(3) 인 경우, 선택자의 같은 선택자 형제(태그) 중 3번째 요소..

😶‍🌫️ text-indent text-indent 는 문단의 첫 글자를 들여쓰기(혹은 내어쓰기) 하는 속성입니다. 값을 지정해 얼마나 들여쓸 것인지 지정합니다. 들어갈 수 있는 값에 대해 알아보겠습니다. 속성 설명 크기 단위로 들여 쓸 크기를 지정 (음수 사용 가능) 백분율 부모 요소의 너비를 기준으로 상대적 크기 지정 값이 양수이면 들여쓰기가, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0으로 지정하지 않을 시 들여쓰기 없이 출력됩니다. 예시를 살펴보겠습니다. 법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다. 이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 그 공무원이 최초로 선출 또는 임명된 때로..