CSS36 CSS3 flexible box layout display flex속성을 이용해 요소들을 배치하는 방법주축과 교차축을 기준으로 요소를 정리하는 방법flex-direction 속성을 이용해서 주축과 교차축을 바꿀 수 있다. 이를 이용해서 가로로 혹은 세로로 정렬할 때 float보다 편하게 정렬이 가능하다.flex-direction reverse는 어디에 쓰이는걸까? 굳이 순서를 반대로 해서 정렬할만한 경우가 있는지?flexible box layout플렉스 컨테이너(flex container) : 배치할 요소들을 묶어주는 역할.플렉스 항목(flex item) : 플렉스 컨테이너 안에 위치하는 배치할 요소.주축(main axis) : 플렉스 컨테이너 안에서 요소들을 배치하는 기본 방향. 왼쪽(주축 시작점)에서 오른쪽(주축 끝점)으로 수평방향 →교차축(c.. 2022. 5. 16. CSS display 속성 display:none과 visibility:hidden의 차이display:block과 display:inline-block의 차이display:none 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않는다. (특정 요소를 hover상태에서 노출되도록 할때 사용할 수 있다. )visibility:hidden는 어디에 사용하는가?display 속성화면 보여주는 방식display:none; 화면에서 숨김. 화면에 보이지 않는 것뿐아니라 공간도 차지하지 않음 (삭제의 개념)display:block; 블록레벨요소로 만듬.display:inline; 인라인 레벨로 만듬 / 주로 목록에서 사용 /박스 모델 값이 적용 안됨.display:inline-block; 인라인 레벨로 배치 + 블록 레벨 속성 지정.[화면에.. 2022. 5. 8. CSS속성 transition 시간에 따른 속성 적용 transition-delaytransition-durationtransition-propertytransition-timing-function transition-timing-function 을 이용해서 자연스럽게 효과를 줄 수 있다. ease-in-out transition이란? 시간에 따라 웹 요소의 스타일 속성이 변함transition : transition 속성을 한번에 설정transition-delay: 트랜지션 지연 시간 설정transition-duration : 트랜지션 진행 시간 설정 / [시간]transition-property : 트랜지션 대상을 설정 / [all], [none], [속성 이름] transition-timing-function : 트랜지션 속도 곡선을 설정속도 곡선 종.. 2022. 5. 6. CSS 애니메이션 애니메이션 속성을 이해한다.애니메이션을 이용해 요소를 이동시킨다.애니메이션을 이용해 시간차 효과를 줄 수 있다.애니메이션을 이용해 움직임의 속도를 조절할 수 있다.%단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?애니메이션이란?CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다. Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의. from : 애니메이션의 시작 프레임를 설정함to : 애니메이션의 끝 프레임를 설정. @keyframes keyframesName .. 2022. 5. 5. 사이트 따라 만들기 part.3 이미지를 정렬하는 방법 1. 단순히 가로로 정렬하는 경우 (좌우 여백 맞춰서 꽉채우기) 핵심 속성 : {display: flex} {justify-content: space-between} 위의 경우는 이미지 3개를 가로로 단순 정렬하면 된다. 여기서 포인트는 이미지들의 여백과 우측 이미지가 영역에 꽉차도록 우측 정렬되도록 하는 것이다. 1. html코드 로 3개의 img를 하나로 묶고, 를태그로 감싸서 세부적인 스타일을 적용할 수 있도록한다. 2. style 지정하기 banner 영역 전체의 여백과 크기를 지정한다. {margin-top;} 위의 컨텐츠 요소와의 간격을 지정한다. 를 선택해서 지정하기 a{float: left;} 가로로 일렬로 정렬한다. a{margin-right;} 요소간의 간격을 지.. 2022. 4. 26. CSS border 여러 속성 border-styleborder-radius간단하게 버튼을 만들거나 할 때 border-radius로 모서리에 라운드를 주면 자연스럽다.Q : border-style 중에서 outset이나 ridge랑 함께 border-radius를 쓸 수 있나? A : 쓸 수 있지만 자연스럽진 않다.border 속성이란?border-style : 테두리 스타일 지정border-style은 기본값이 none이기 때문에 테두리 스타일을 지정하지 않으면 다른 속성들을 지정해도 표시되지않는다.주로 사용되는 속성 값은 solid 실선 none테두리 없음. 기본 값. (존재하지않는다는 표현이 더 정확함)hiddennone과 마찬가지로 테두리가 없다. 다만 보이지 않는 상태. none의 경우 테이블끼리 경계가 충돌하면 보이지만.. 2022. 4. 24. 이전 1 다음
