[ CSS란 무엇인가? ]
CSS??!
CSS 란 ‘ Cascading Style Sheet ’ 로 HTML로 만들어진 문서의 텍스트 색상이나 크기, 이미지 크기나 위치, 표의 색상, 배치방법 등 웹 문서의 디자인 요소를 담당하는 언어입니다. 이는 HTML이 문서의 구조의 역할이라면, CSS는 문서의 디자인 및 배치의 역할을 한다고 생각하시면 편합니다. 이러한 CSS는 기술방식에 따라 ' 내부 CSS ' 와 ' 외부 CSS '로 나눠질수 있으며, 다양한 방식이 연구되고 있는 요즘 CSS는 더욱 더 화려하고 유여한 디자인을 추구하는 형태로 발전해 가고 있습니다.
CSS 에 대한 기술방식 중 먼저 내부 기술에 대해 살펴보면
HTML 문서 내 태그에 style 을 이용하여 나타내는 inline 기술방식이 있으며, <style> 태그를 활용하여 기술하는 방식이 있습니다.
( inline 기술 방식 )
( <style>태그 기술 방식 )
내부 기술 방식에 이어 외부에 있는 CSS 파일을 로드하는 방법이 있는데 이는 아래와 같이 <link>태그를 활용하여 불러오게 됩니다.
( <link>태그를 활용한 외부 CSS 파일 로드 )
CSS 사용 방법
CSS를 기술하는 법으로 나누어본 ' 내부 CSS ' 와 ' 외부 CSS ' 에서 직접적으로 CSS 를 사용하는 방법을 살펴 보도록 하겠습니다. CSS는 문법적인 요소가 강한 언어가 아니며, 어떻게 보면 HTML과 함께 프로그래밍에 있어 배우기 쉬운 언어중 하나이기에 사용하는 방법 또한 간단합니다.
( 출처 : 생활코딩 웹 사이트 )
먼저, 셀러터 ( 요소 ) 가 있으며, 그 안에 부여하고자 하는 속성과 속성에 대한 값이 들어있으며, 하나의 속성부여는 ' ; (세미콜론) ' 으로 나타냅니다.
즉, 위와 같은 속성 부여는 <h1> 태그에 폰트 색은 ' blue ' 를 부여하며, 폰트 크기는 ' 12px ' 로 지정하겠다 라는 의미입니다.
여기서, 셀렉터 안에는 다양하게 들어갈 수 있으며 ' 태그명 ' , ' ID 명 ' , ' Class 명' 이 기본적이며, 예외로 몇개의 셀럭터들이 존재합니다.
또한 기본적인 셀렉터를 활용하는 방법 이외에 하위선택자, 자식 선택자가 있으며 또한 ',(쉼표)' 를 활용하여 여러개를 한번에 CSS를 할 수도 있습니다.
( 하위 선택자 예시 )
위는 하위 선택자를 사용한 예시 입니다. 아이디 값을 가지고 있는 <ul> 태그와 그 하위요소인 <li> 태그를 CSS를 통해 폰트 색을 지정하는 방법이며, 셀렉터의 아이디 값과 한칸의 공백을 두고 하위요소를 선택하는 부분입니다.
( ' ,(쉼표) ' 을 활용한 여러개의 선택자 지정 예시 )
이는 쉼표를 활용하여 여러개의 선택자를 지정하는 방법이며, navigation 과 navigation2 에 같은 CSS를 지정한 것입니다.
( 자식 선택자 예시 )
위의 예시는 자식선택자를 지정하는 방법이며 하위 선택자와의 차이점은 ' > ' 를 이용한 부분이며, 이는 navigation 이라는 아이디를 가진 바로 아래의 자식요소에게만 테두리를 지정하겠다 라는 의미입니다.
-- 본 포스팅은 스터디의 목적으로 포스팅 되었습니다. 잘못된 정보가 있을시 댓글로 남겨주세요^^ --
(불펌을 금지 합니다)