디노문경

기본적인 HTML 구조 helloflex abc helloflex Flex는 여러가지 속성들을 가지고 있다. 하지만, 크게 보면 컨테이너에 적용하는 속성 아이템에 적용하는 속성 으로 나눌 수 있다. 컨테이너에 적용하는 속성 display: flex; .container { display: flex; /* display: inline-flex; */ } item들의 width는 자신이 가진 컨텐츠의 크기만큼 커지고, height은 부모인 container의 높이 만큼 커진다. inline-flex;는 container가 inline-box처럼 동작하게 할 수 있다. flex-direction .container { flex-direction: row; /* flex-direction: column; */ ..

이 글은 리베하얀님의 유튜브 강의 "CSS3 기초"를 보고 정리한 글입니다. animation transition vs animation transition은 이벤트가 반드시 있어야 실행되지만, animation은 이벤트가 없이 스스로도 실행될 수 있다. 먼저, keyframes를 만들어주고, 애니메이션을 실행시키고 싶은 요소 안에 animation을 넣어준다. animation: 키프레임명 실행시간 time-function 딜레이 반복횟수 이동방향 flex flex 해버렸지 모얌..? 진짜 완전 편하다..... 대박!! 부모 요소에 display:flex를 주고, 자식 요소에 flex: 1을 주면, 모두 같은 너비로 사이좋게 나눠가진다. float을 써서 하면 부모 요소 높이 사라지니까, clear도 ..

이 글은 리베하얀님의 유튜브 강의 "CSS3 기초"를 보고 정리한 글입니다. border-radius 1. 정사각형에서 한 변의 길이와 같은 값을 border-radius 주면 원이 된다. 2. 둥그스름한 버튼을 만드려면 높이와 같은 값의 radius를 주면된다. 예를 들어, 아래와 같은..! 3. 2개의 값을 주면 border에서는 상하 좌우였지만 border-radius는 11,5시 1,7시 방향을 의미한다. 3개의 값을 주면 11시 1,7시 5시이고 4개의 값을 주면 11시부터 시계방향! 4. border-top-left-radius와 같이 사용해서 한 방향에만 radius를 줄 수도 있다. outline과 outline-offset 1. outline은 border와 비슷한 데 border보다 바..

이 글은 리베하얀님의 유튜브 강의 "CSS1, CSS2기초" 를 듣고 정리한 글입니다. 우선순위 전체 선택자(*): 0점 요소 선택자: 1점 클래스 선택자: 10점 id 선택자: 100점 inline style: 1000점 !important: 절대값 (사용법: div { color: red !important } 만약 점수가 같다면 나중에 적은 것의 우선순위가 더 높다. 여백 (padding과 margin) border를 기준으로 안쪽 여백 -> padding 바깥쪽 여백 -> margin div { padding: 4px 8px } 상하 4px, 좌우 8px div { padding: 4px 6px 8px } 상 4px, 좌우 6px, 하 8px div { padding: 1px 2px 3px 4px..