C언어 예술가

기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox 가 생겨났다. flex는 flexible의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다.기본 컨셉은 아주 명확하기 때문에 기존의 레이아웃을 만드는데 사용하던 table 태그나 position 또는 float 속성을 사용하는 방법의 복잡함을 고수할 필요가 없어졌다.다만 생각보다 다양한 속성들이 있어서 정리할 필요는 있다. 이 속성을 모두 사용할 필요는 없으므로 대략적인 이해만 해 둔 후에 필요할 때마다 참고하여 레이아웃을 만들면 될 것이다.flexbox의 기본 컨셉container와 item들이 부모와 자식관계일 때 container에 display : flex; 속성을 줌으로서 다음과 같은 모습의 ..

html문서에 문자나 이미지 등의 컨텐츠가 위치될 때 다양한 태그들로 둘러싸인다. 이런 태그들은 display 속성이 갖는 속성값(inline, block)에 따라서 컨텐츠의 표시되는 방식에 차이가 생기게 된다. inline 속성값을 디폴트로 갖는 태그는 a태그가 있고 block 속성값을 디폴트로 갖는 태그는 div, p 등의 태그가 있다. 설명에 앞서 이 태그들을 사용한 간단한 예제를 보자. 코드와 결과를 보면 div 태그로 둘러쌓인 내용(block) 앞뒤로 줄바꿈이 되어 있다. block 속성을 가진 태그는 욕심쟁이라서 한 라인 전체를 혼자서 다 쓰는 성질을 갖기 때문이다. 반면에 a 태그는 한 라인 내에서 다른 컨텐츠들과 어울어져 있다. 이런 기본적인 성질 외에도 inline 속성과 block 속성..