webplacidcy

가로축 방향으로 요소들을 정렬한다 1. justify-content : flex-start 요소의 시작점을 기준으로 정렬한다 2. justify-content : flex-end 요소들을 끝 지점으로 정렬한다 3. justify-content: center 가운데로 정렬한다 4. justify-content: space-between 요소들 사이의 간격을 균일하게 설정하여 정렬한다 5. justify-content: space-around 아이템들의 둘레에 균일한 간격을 설정한다 6. justify-content: space-evenly 아이템 사이와 양 끝에 균일한 간격을 설정한다

flex 속성에 영향을 받는 요소들이 컨테니어의 범위를 넘어갈때 요소들의 줄바꿈을 설정한다 1. flex-wrap : nowrap 줄바꿈을 하지 않는다 2. flex-wrap : wrap 요소들이 줄바꿈된다 3. flex-wrap : wrap-reverse 줄바꿈이 되며 요소들을 반대 순서대로 정렬된다

Flex 속성을 사용할때 Flex 속성에 영향을 받는 요소들의 정렬 방향을 결정하는 속성 1. flex-direction : row 가로 방향으로 정렬된다 2. flex-direction : column 세로 방향으로 정렬된다 3. flex-direction : row-reverse 요소들을 반대 순서대로 가로 방향으로 정렬된다 4. flex-direction : column-reverse 반대 순서로 세로 방향으로 정렬된다

1. Inline - 해당 요소의 크기는 요소의 크기만큼 정해지며 줄바꿈이 되지 않는다 - 위쪽, 아래쪽 바깥 여백(margin)값 설정이 되지 않는다 2. Block - 전체 화면의 너비만큼의 너비 길이가 설정된다 - margin 값 설정이 가능하다 인라인 텍스트 1 인라인 텍스트 2 인라인 텍스트 3 블록 텍스트 1 블록 텍스트 2 블록 텍스트 3

CSS 단위 웹 사이트 내의 범위나 크기를 수치로 나타낸다, 상대 단위 / 절대 단위가 있다 상대 단위 고정되지 않고 어떤 기준에 따라 바뀔수 있는 단위 1. % 전체 요소의 특정 비율을 나타내는 단위 ex) 한 요소의 높이가 100px일때 50% 적용하면 50px 2. em 폰트의 크기(font-size)를 나타내며 외부로부터 적용받는 폰트의 크기(font-size)에 따라 값이 달라진다 ex) 브라우저의 기본 폰트 크기가 10px일때 1em은 10px, 2em은 20px 3. rem 폰트의 크기(font-size)를 나타내며 최상위 요소(html 요소)에 지정된 크기를 기준으로 값이 달라진다 ex) html에서 정해놓은 크기 20px, 부모 요소의 크기는 25px일때 1rem의 값은 20px 4. v..

요소의 안쪽 여백 크기를 변경하는 속성이다 1. padding : 20px -> 위/아래/왼쪽/오른쪽 모두 20px 만큼 여백을 늘린다 2. padding : 10px 20px -> 위/아래 10px, 왼쪽/오른쪽 20px만큼 여백을 늘린다 3. padding : 10px 20px 30px 40px -> 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px만큼 여백을 늘린다 4. padding : 10px 20px 30px -> 위 10px, 왼쪽/오른쪽 20px, 아래 30px만큼 여백을 늘린다 padding : 20px padding : 10px 20px padding : 10px 20px 30px 40px padding : 10px 20px 30px 결과

문서의 요소의 바깥쪽 여백(빈 공간) 크기를 설정하는 속성 숫자 뒤에 단위 px를 표시한다 여백의 방향마다 다르게 설정할 수 있다 1. margin : 20px -> 위/아래/왼쪽/오른쪽 모두 20px 만큼 여백을 늘린다 2. margin : 10px 20px -> 위/아래 10px, 왼쪽/오른쪽 20px만큼 여백을 늘린다 3. margin : 10px 20px 30px 40px -> 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px만큼 여백을 늘린다 4. margin : 10px 20px 30px -> 위 10px, 왼쪽/오른쪽 20px, 아래 30px만큼 여백을 늘린다 margin : 20px margin : 10px 20px margin : 10px 20px 30px 40px margi..

float 속성을 사용해서 이미지를 이동시킨후 문서의 텍스트 위치를 변경할때 사용한다 1. left: 이미지로부터 왼쪽 위치 설정 해제 2. right: 이미지로부터 오른쪽 위치 설정 해제 3. both: 양쪽 모두 해제 This is the image file text text 결과