웹앱/CSS3 flex 속성 알아보기 CSS flex는 크게 컨데이너와 아이템으로 구성됩니다. flex속성을 통해 아이템을 정렬하려면, 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에서 display:flex; 또는 display:inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가 수평추가의 차이입니다. 부모요소에 flex속성을 추가하면, 자식요소에는 자동으로 해당 속성 효과가 부여됩니다.. flex 속성은 부모요소와 자식 요소를 함께 사용합니다. 양측정렬 혹은 균등정렬 두개의 아이템을 왼쪽에 하나의 아이템을 오른쪽레 정렬하는 방법입니다. fustify-content:space-between; 속성을 사용하면 왼쪽부터 차례로 요소를 균등하게 정렬할수 있다. BOX1 BOX2 BOX3 .cont.. 2022. 5. 1. position 속성 [css] position (static, relative, absolute, fixed) 의 속성 position 은 레이아웃을 배치하거나, 객체를 위치시킬때 사용하는 css 속성이다. position 속성은 상속되지 않으며, 위(top), 아래(bottom), 왼쪽(left), 오른쪽(right) 의 위치를 같이 설정 할 수 있다. position 사용법 static (기본값) :위치를 지정하지 않을 때 사용한다. relative : 위치를 계산할때 static의 원래 위치부터 계산한다. absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다. fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받.. 2022. 4. 16. CSS 기초 - text 속성 color : 텍스트 색상 설정. 기본 설정값은 검정색이다. {color : green;} letter-spacing : 글자의 간격(자간)을 설정 {letter-spacing:10px;} word-spacing : 띄어쓰기 간격을 설정 {word-spacing:40px;} text-align : 수평 방향 정렬을 설정 {text-align:center;} - 가운데 정렬 {text-align:right;} - 오른쪽 정렬 {text-align:left;} - 왼쪽 정렬 {text-align:justify;} - 양쪽 맞춤(2줄이상, 강제줄바꿈 X) text-indent : 단락의 첫 줄의 들여쓰기 설정 {text-indent:20px} line-height : 줄 높이를 설정 {line-height:2.. 2021. 8. 28. 이전 1 다음
