css 스타일 속성 중 all이라는 아이가 있는데, 요 아이는 예를들어 버튼을 생성하면 브라우저마다 기본적으로 적용되어있는 버튼의 기본 스타일 값을 초기화 시켜주는 아이다. 예를들어, 아래와 같이 버튼을 생성했다면?이런 버튼이 생성된다. 여기서 all: unset;스타
css의 position 속성 중 relative와 absolute의 차이를 알아보자! 이 둘의 차이를 알려면, 먼저 position의 기본 속성인 static 을 알아야한다. static은 position속성의 기본값으로 모든 태그들은 이미 처음부터 static 상태
flex box를 생성하고(display: flex;), 요소들의 방향을 설정해주고 (flex-direction),요소들을 다음줄로 넘겨주는 방법 (flex-wrap) 까지 알아보자. MDN에서 가져온 flex model오늘 사용한 기본 코드는 아래와 같다. 기본 ht
flexBox 중 요소들을 축의 중심방향(justify-content) 혹은 축의 수직방향(align-content)을 중심으로 정렬하는 방법을 알아보자. 축의 방향으로 요소들을 정렬시켜준다. (기본값)justify-content: flex-first;justify-c
마지막으로, flex-grow flex-shrink flex-basis를 통해 브라우저 크기가 커지거나 작아질때 요소의 크기도 변화할 수 있도록 만들어보자. 그리고 진짜 진짜 마지막으로 FLEXBOX FROGGY(https://flexboxfroggy.com/
css의 border 속성은 테두리를 만들어주는 역할을 하지만, 테두리의 스타일이나 색, 굵기 등을 커스터마이징 할 수 있기 때문에 이를 이용하여 밑줄이나, 인용문 등으로도 활용할 수 있다. text-decoration: underline; 으로 밑줄 긋기css의 b
box-sizing은 박스의 크기를 어떤 값을 기준으로 계산할지 결정하는 속성이다👻아래 예시를 보자. 노란박스 4개의 가로 사이즈를 모두 300px로 지정해 주었는데 두번째 박스의 가로길이가 더 길다. 그 이유는 두번째 박스의 스타일에 padding과 border 속
css를 통해 레이아웃을 컨트롤할 수 있는 Display 속성 중 가장 많이 사용되고 있는 block, inline, inline-block에 대해서 알아보자!block은 한줄의 영역을 모두 사용하는 박스형태이며, 기본적으로 width값이 100%이다. 그렇기 때문에
float 속성은 이미지를 띄워서 텍스트를 이미지 주변에 배치되도록 만들어준다. 이미지와 텍스트 사이에 빈 공간이 생기게된다. float:left;를 사용해주면, 라이언 이미지가 왼쪽에 뜨게 되고 텍스트들이 그 주변을 감싸준다. float:right;를 사용해주면 라