beepbeep

display 속성은 요소가 block 형태로 표시될지, inline 형태로 표시될지를 결정하며 요소의 배치 방식인 레이아웃을 결정합니다. 1. block block 속성을 가진 요소는 다음과 같은 특징을 가집니다. - 화면을 수직 분할 - 내용이 없거나 한 행을 전부 채우지 않아도, 한 행을 전부 차지함 - width / height를 이용해 크기 조절 가능 block 속성을 가진 대표적인 태그에는 , , , ~ , 가 있습니다. 2. inline inline 속성을 가진 요소는 다음과 같은 특징을 가집니다. - 화면을 수평 분할 - 작성한 만큼만 영역을 차지 - width / height를 사용할 수 없음 inline 속성을 가진 대표적인 태그에는 태그에는 , , , , , 가 있습니다. 3. inl..

html은 모든 요소를 box형태로 표현하며 이를 box model이라고 부릅니다. 각 box는 padding, margin, border, content 네 가지 영역으로 나뉩니다. 태그를 이용해 만든 요소를 통해 각 영역을 살펴보겠습니다. - content : 요소 내부의 내용이 작성되는 공간을 가리킵니다. - border : 요소의 테두리로, content의 바깥에서 content를 두르고 있습니다. - margin : 요소와 다른 요소 사이의 간격을 가리킵니다. - padding : content와 border 사이의 공간을 가리킵니다. 각 영역은 브라우저의 검사 메뉴를 이용해 쉽게 확인할 수 있습니다. css를 이용하면 각 영역의 크기 또는 특징을 결정할 수 있습니다. 1. content 요소 ..

1. float - float: left 요소를 띄워서 왼쪽으로 정렬함 - float: right 요소를 띄워서 오른쪽으로 정렬함 요소를 정렬할 때 사용하는 스타일 중 float 속성이 있습니다. float 속성은 요소를 띄워서 지정한 방향으로 정렬해줍니다. 이 때 요소의 형식이 inline-block 형식으로 바뀌게 됩니다. 요소를 띄운다는 것은 해당 요소를 기본 레이아웃의 흐름에서 벗어나게 만든다는 의미입니다. 2. clear - clear: left float: left를 해제함 - clear: right float: right를 해제함 float 속성을 사용하다 보면 요소가 겹치는 문제가 생길 수 있는데, clear 속성을 사용해 float 속성을 해제함으로써 문제를 해결할 수 있습니다. 3. 활..

position은 요소의 배치와 관련된 스타일입니다. position을 이용하면 요소를 웹 페이지의 특정한 위치에 고정시키거나, 화면 상의 특정 위치에 고정시킬 수 있습니다. 1. :relative - postion을 사용하기 위해서는 기준이 될 요소가 필요합니다. position: relative는 해당 속성을 가진 요소를 기준 요소로 만들어주며, 내부의 자식 / 후손 요소들은 상대적인 위치를 가질 수 있게 됩니다. 2) :absolute - 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치 absolute는 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치하는 속성입니다. 웹페이지의 특정한 좌표에 요소를 고정시킨다고 생각하시면 됩니다. #div1{ position:ab..

1) color - 16진수(#fff, #ffffff) - rgb(255, 255, 255) - rgba(255, 255, 255, 1) 투명도 조절 가능 - hsl : 색조 채도 밝기 - hsl(360, 100%, 100%) - hsla(360, 100%, 100%, 1) 투명도 조절 가능 2) text-decoration : 텍스트에 줄을 긋는 속성 - underline : 밑줄 - line-through : 취소선/삭제선 - overline : 윗줄 - none : 삭제 3) text-align : 내부에 작성된 글 또는 inline 요소를 정렬 * text-align은 display가 inline인 경우 적용되지 않는다. - left - right - justify : 양쪽 정렬(마지막 줄을 제외..

1) 좌우 이동 - transform: translateX(x축 방향 이동거리); 2) 상하이동 - transform: translateY(y축 방향 이동거리); 3) 대각선 이동 - transform: translate(X축 방향, Y축 방향); 4) scale(확대/축소) - transform: scaleX(비율) 2=2배 - transform: scaleY(비율) - transform: scale(X축 비율, Y축 비율) 5) rotate(회전) - transform: rotate(n deg); * 시계방향으로 회전

1) 원근법 transform: perspective(길이) 원근법을 적용하지 않으면 3차원 변형을 해도 제대로 보이지 않음 2) 이동 transform: perspective(원근법 적용 거리) translate3d(X축, Y축, Z축); 3) X축 회전 transform: perspective(원근법 적용 거리) rotateX(n deg); 4) Y축 회전 transform: perspective(원근법 적용 거리) rotateY(n deg); * 활용 예시 ) 좌우반전하기 transform: perspective(원근법 적용 거리) rotateY(180deg); 5) Z축 회전 transform: perspective(원근법 적용 거리) rotateZ(n deg); 6) 동시 사용 transform..

1) transition-duration: n s transition의 시작부터 끝까지 걸리는 시간을 지정 2) transition-delay: n s transition이 시작될때까지의 시간을 지정 3) transition-timing-function : transition의 시간당 변형 속도를 조절 베지어 곡선?을 이용해서 시간당 변형 속도를 조절할 수 있음. * cubic-bezier()의 4개 파라미터는 각각 위의 p0, p1, p2, p3를 의미한다 - linear : 일정하게 / cubic-bezier( 0, 0, 1, 1 - ease(기본값) : 처음과 끝은 느리고 중간은 빠르게 / cubic-bezier( 0.25, 0.1, 0.25, 1 ) - ease-in : 점점 빨라지게 / cubi..

1) order : flex-container 내부의 item이 main-axis방향으로 배치되는 순서를 지정하는 속성 예) order : 1 기본값 0, 정수만 가능함(양수, 음수 가능) 2) flex-grow : item이 flex-container 내부에서 비어있는 공간을 메꿀 수 있도록 팽창하는 정도를 지정하는 속성 예) flex-grow: 4; * 기본값 : 0 * 여러 item에 지정한 경우, 각 item의 크기에 비례해서 팽창함 3) flex-shrink : flex-container가 줄어들 때 내부 item의 수축 정도를 지정하는 속성 예) flex-shrink: 0; * 기본값 : 1 * 여러 item에 지정한 경우, 각 item의 크기에 비례해서 수축함 * flex-wrap: nowa..

flex란? flex-direction flex-wrap justify-content align-items align-content 1. flex란? css의 flex 속성은 html문서의 레이아웃을 만들기 위해 고안된 속성입니다. flex는 크게 부모 요소인 flex-container와 자식 요소인 flex-item으로 구성됩니다. HTML 삽입 미리보기할 수 없는 소스 flex를 사용하기 위해 flex-container로 사용될 부모 요소 하나와 flex-item으로 사용될 자식 요소 다섯개를 준비했습니다. 요소는 기본적으로 block형식이라서 한 행을 전부 차지합니다. 그래서 세로로 배치되게 됩니다. 여기서 flex를 시작하고 싶다면 부모 요소인 flex-container에 display: flex..