css code structure(css 코드 구조)

 css 문법은 html의 style 태그 안에 들어간다. (<style>~ </style> ) 에서 ~부분이다.

css가 단독으로 쓰일 일은 없다. 항상 html의 특정 태그를 위해 존재한다. 프론트엔드 개발시 html과 css를 혼용해서 사용하기 때문에 초반에는 구분할 필요가 있다. 그렇지 않으면 수 많은 태그가 쏟아져 나와 과부하가 걸릴 것이다. 

 

 css의 신택스는 selector {(css 속성: 값)+}과 같은 형식이다. 즉, 특정 태그를 지칭하고 그 태그에 css 속성을 하나 이상 부여하는 것이다. 그렇다면 앞으로 공부할 것은 특정 태그를 지칭하는 방법과 그 태그에 적용할 css 속성이다.

 

 html5에서 div가 레이아웃을 나눈다고 하였는데 이 때 레이아웃은 논리적인 것이다. 따라서 css없이 html만을 사용하여 코딩하면 원하는 위치에 가거나 정렬이 되거나 하지는 않는다. 물리적인 배치는 css을 사용해야 한다. 정리하면, html5를 통해 논리적인 배치를 하고 css를 통해 물리적인 배치를 하여 페이지를 완성하는 작업인 것이다.

 

 이 때, css3에서는 html5의 태그들을 두 가지 종류로 바라본다. block이거나 inline이다. 물리적인 배치를 할 때 block인 경우는 부모 태그의 영역을 최대한 사용한다. 즉 <1><2></2></1>인 경우에 2태그가 block 종류에 속한다면 1의 영역을 전부 사용하려고 한다고 보면 된다.

 반대로 inline인 경우에는 해당 태그의 내용을 표현하는 부분만을 사용하게 된다. <1>안녕하세요</1>를 쓰면 안녕하세요는 1태그의 부분을 최대한 사용하는 것이 아닌 '안녕하세요'가 화면에 표현되는 부분만 사용한다. 

 

 특정 태그를 지칭하는 방법을 익힌 후 block, inline에 따라서 물리적인 배치(위치 선정, 정렬 등)를 하고 색상, 글자크기, 선명도 등을 변경하게 되면 css를 사용할 수 있게 되는 것이다. 디테일한 내용은 이후 글에서 설명하도록 한다.