display 속성 inline: 인라인이 아닌 요소에 인라인 속성 부여 inline속성: 본인 크기만큼만 공간 차지 block: 블록이 아닌 요소에 블록 속성 부여 block속성: 크기 부여 가능 inline-block: 인라인 속성이지만 블록 속성처럼 크기 부여 가능 none: 화면에서 요소를 사라지게 함(크기도 차지하지 않음) flex: 자식에게 크기를 부여할 수 있는 인라인 속성 # 쉽게 레이아웃 구조를 잡을 수 있음 # flex container(부모요소) 속성 justify-content: 가로 정렬 space-between: 자식 요소들에게 동일한 크기를 부여하며 자식 요소 배열 space-around: 양 끝에 여백을 주면서 자식 요소 배열 align-items: 세로 정렬 부모요소의 세로..

transform 속성 skew(deg): 기울기 rotate(deg): 회전(시계 방향) rotate x축 회전: x축이 회전 rotate y축 회전: y축이 회전 rotate 회전: 평면 회전 scale: 확대 translate(px): 이동(위에서 아래로) translate z축 이동: 뒤로 이동(요소가 작아지는 것처럼 보임) # tramsform 속성은 inline요소에 적용되지 않음. inline요소에 transform속성을 적요하고 싶다면 inline-block(display속성)요소로 변경하고 사용해야 함. transform-origin 속성 : transform 속성과 함께 사용되는 속성, 회전 중심(원점·기준점)을 지정 # 속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있음 백분율..

CSS(Cascading Style Sheet=연속적인 스타일시트) : 웹 페이지를 디자인하기 위해 사용하는 언어 CSS를 사용하는 이유? 시각적 표현을 위해 CSS 참조 방식 1) 외부 스타일 시트(External Style Sheet) : CSS확장자를 가진 스타일시트 파일을 생성, html문서에 연결해 사용 2) 내부 스타일 시트(Internal Style Sheet) : html문서 내에서 태그 내부에 태그를 사용해 CSS를 정의하는 방식 ▼ style태그를 head태그에 저장하는 이유? 더보기 html 문서는 위에서 부터 아래 순서로 읽음 따라서 style 태그를 우선적으로 읽게 하여 속성이 빠르게 적용되도록 하기 위해 head태그에 위치시킴 3) html태그 내의 스타일 지정(Inline St..