HTML / CSS

css 스타일 속성 중 unset이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 예를들어, 아래와 같이 버튼을 생성했다면?이런 버튼이 생성된다. 여기서 all: unset;

css의 position 속성 중 relative와 absolute의 차이를 알아보자! 이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다. static은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static 상태

flex box 모델의 모든것을 알아보자👻오늘은, flex box를 생성하고(display: flex;), 요소들을 다음줄로 넘겨주고 (flex-wrap), 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로

요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-content: fl

flex-grow flex-shrink flex-basishtml 파일 css파일 flex-grow와 flex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink

boder: 두께 선스타일 선색깔; 밑줄은text-decoration: underline; 로 만들 수 있지만, 실제로 대부분의 개발자는 커스터마이징하기 좋은 border-bottom: 2px solid; 이런식으로 구현한다.

박스의 가로 사이즈를 모두 300px로 지정해 주었는데도, 아래와 같이 가로의 길이가 다르다면?

레이아웃을 컨트롤할 수 있는 Display 속성. 모든 요소들은 대부분 block 아니면 inline을 Display속성 값으로 가지고 있다. block block 요소는 브라우저의 한줄을 모두 사용하며, 위에서 아래로 차곡차곡 쌓인다. inline

float 속성은 이미지를 띄워서 텍스트가 띄윈 이미지 주변에 배치되도록 만들어준다. 이미지와 텍스트 사이에 빈 공간이 생기게된다. float:left;를 사용해주면, 라이언 이미지가 왼쪽에 뜨게 되고 텍스트들이 그 주변을 감싸준다. float:right;를 사용해주