Flex box layoutflexible box layout은 그리드 레이아웃을 기본으로 하여 플랙스 박스를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있고 화면 크기에 따라 에이아수의 배치나 크기를 조절할 때 편하게 이용 가능하다는 장점이 있다. flexbox를 사용하기 위해서는 부모 요소의 displa
가변 레이아웃과 가변 요소가변 글꼴보통 우리는 텍스트 크기를 px단위로 지정한다. 하지만 px단위로 지정하게 되면 화면에 크기가 고정되기 떄문에 작은 기기에서 매우 작게 표시되는 상황이 발생한다.가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 변해야 하는데 그 때 사용하는 것이 ‘가변 글꼴’이다. em 단위 em단위는 부모 요소에서 지정한 폰
CSS Transform특정 요소의 크기나 형태가 변하는 것을 변형이라고 한다. 웹에서도 마찬가지로 css를 이용하여 텍스트나 이미지 등을 움직이게 할 수 있다. 2차원과 3차원 변형2차원 변형은 x,y 축, 즉 수평 혹은 수직으로 이동하고 회전시키는 것을 말한다. x축은 오른쪽으로 y축은 아래쪽으로 이동한다.3차원 변형은 x,y 축에 z라는 원근감을 주는
시맨틱 태그많은 웹 사이트를 분석하여 웹 문서 레이아웃의 표준화를 하는 태그가 많이 추가되었다. (물론 아직 많이 사용하진 않는다.)‘semantic’은 의미가 통한다는 의미이기 때문에 태그만 보면 ‘아 여기구나’라고 알 수 있다. 우리가 흔히 쓰는 의미 없는 상자 태그인 div 대신에 각 구역의 의미가 담긴 태그를 사용하는 것이다. HTML5의 시맨