>> 이 비디오에서는 CC 디자이너의 기능과 Dreamweaver의 CSS 디자이너를 사용하여 CSS를 간편하게 관리하는 방법을 살펴봅니다.
이 Cowboy Concept 페이지 디자인을 사용하여 Dreamweaver 작업 영역을 자세히 살펴보겠습니다.
이 웹 페이지 디자인에는 전체 화면의 배경 이미지, 브랜드와 내비게이션으로 구성된 머리글, 헤드라인, 본문 태그가 포함되어 있습니다.
라이브 뷰의 폭을 변경하면 화면의 크기에 따라 디자인의 레이아웃이 조정됩니다.
이제 미디어 쿼리를 사용하여 이 효과를 만드는 방법을 살펴보겠습니다.
본격적으로 시작해 보죠.
새 사이트를 만든 다음 style-webpage-css 폴더를 선택합니다. index.html 파일을 열고 코드를 살펴보면 이 파일에는 페이지의 HTML 구조가 포함되어 있지만 CSS는 아직 적용되어 있지 않은데요.
CSS 디자이너를 사용하여 이 페이지에 스타일을 추가해 보겠습니다.
기본적으로 CSS 디자이너는 작업 영역의 오른쪽 패널에 고정되어 표시됩니다.
원하는 경우 윈도우 메뉴에서 선택하거나 오른쪽 상단에서 작업 영역을 재설정할 수 있습니다.
먼저 CSS 디자이너를 드래그하여 고정시킵니다.
그러면 오른쪽에서 패널을 간편하게 표시하고 축소할 수 있습니다.
속성을 편집하다가 작업 공간이 더 필요하면 패널을 드래그하여 레이아웃을 변경할 수도 있습니다.
제공된 CSS 파일을 첨부하고 자세히 살펴보죠.
CSS 디자이너의 소스 영역에 있는 + 기호를 클릭합니다.
CSS를 페이지에 추가할 수 있는 세 가지 옵션이 있는데요.
새 CSS 파일을 생성하거나 기존 CSS 파일을 첨부하거나 페이지에 바로 CSS 스타일을 정의할 수 있습니다.
이 시간에는 첨부 옵션을 선택해 보죠. css 폴더에서 main.css 파일을 검색한 다음 확인을 클릭합니다.
코드 뷰를 보면 이 파일이 head 태그에서 HTML 페이지에 첨부되었고 라이브 뷰를 보면 배경 이미지와 스타일 텍스트로 업데이트되었습니다.
그러면 라이브 뷰에서 CSS를 살펴보겠습니다.
CSS 디자이너에서 상단에 있는 전체 또는 현재 탭을 사용하여 코드를 찾고 살펴볼 수 있는데요.
전체를 선택하여 HTML 페이지에 첨부된 모든 스타일을 표시합니다.
이는 CSS가 어떻게 구성되어 있는지 한눈에 확인할 수 있는 탁월한 방법이죠.
요소를 선택하고 현재 탭을 클릭하면 계산된 스타일을 확인할 수 있습니다.
계산된 스타일에서는 현재 선택된 항목의 속성과 선택기가 표시됩니다.
상속된 스타일과 선택된 요소에 바로 첨부된 스타일이 표시되죠.
다시 전체로 전환하여 모든 스타일을 표시해 보면 CSS 디자이너의 미디어 섹션이 미디어 쿼리 영역을 정의하기 위해 사용되고 있습니다.
미디어 쿼리를 사용하면 화면 크기와 같은 특정 조건을 기반으로 디자인을 변경할 수 있습니다.
첨부된 CSS에는 두 개의 미디어 쿼리가 있는데, 이제 스타일을 추가하면 됩니다. h1 텍스트에 스타일을 지정하기 위해 클래스를 추가해 보죠.
라이브 뷰에서 h1 태그를 선택하고 + 버튼을 눌러 .headline이라고 입력하고 클래스를 추가합니다.
Enter 키를 누른 다음 main.css 소스를 선택하고 Enter 키를 다시 눌러 이 클래스를 생성합니다.
라이브 뷰에서 이 클래스를 마우스 오른쪽 버튼으로 클릭하고 코드로 이동을 선택하여 코드 뷰에서 해당 CSS로 이동합니다.
그러면 아래에 해당 클래스가 표시됩니다.
이 클래스를 미디어 쿼리 위로 드래그하여 페이지 상단에 있는 기본 코드에 포함시킨 다음 속성을 추가하여 요소의 서식을 지정해 보겠습니다.
라이브 뷰에서 h1 요소를 선택하고 CSS 디자이너에서 headline 클래스를 선택합니다.
이 클래스는 미디어 전체 아래와 선택기 목록 하단에 있죠.
속성 영역에서는 범주별로 속성을 필터링할 수 있는데요.
텍스트 버튼을 클릭하여 텍스트 속성을 필터링합니다.
글꼴 크기는 64픽셀로 설정하고 줄 높이는 em으로 설정하고 값은 0.95로 설정합니다.
레이아웃 속성 버튼을 클릭하고 아래 여백 속성을 10픽셀로 설정한 다음 세트 표시 옵션을 클릭하여 방금 추가한 속성만 표시하도록 필터링합니다.
다음으로 미디어 쿼리 전체에서 이 클래스를 업데이트해 보죠. headline 클래스를 마우스 오른쪽 버튼으로 클릭하고 미디어 쿼리에 복제를 선택합니다.
768픽셀 미디어 쿼리를 선택하면 해당 코드가 복사됩니다.
미디어 영역에서 768픽셀 미디어 쿼리를 선택하고 선택기 영역에서 headline 선택기를 선택합니다.
세트 표시 옵션을 선택했으므로 세트 속성이 표시되어 있는데요.
글꼴 크기 속성을 90으로 변경하고 줄 높이 속성을 0.85로 변경하고 아래 여백 속성을 30픽셀로 변경합니다.
1,024픽셀 미디어 쿼리에서도 이 과정을 반복하여 글꼴 크기를 변경해 보죠. headline 선택기를 마우스 오른쪽 버튼으로 클릭하고 1,024픽셀 미디어 쿼리에 복제합니다.
미디어 영역에서 해당 미디어 쿼리를 선택한 다음 headline 선택기를 선택합니다.
글꼴 크기를 120으로 변경하고 줄 높이를 0.9로 변경하고 아래 여백은 20픽셀로 변경합니다.
코드 뷰를 보면 이 클래스가 업데이트되어 큰 화면에서 볼 때 큰 텍스트로 표시되고 두 미디어 쿼리에서 모두 headline 클래스의 사본이 생성되었습니다.
[Concept COWBOY CONCEPT] CSS 디자이너가 Dreamweaver 작업 영역과 통합되어 있으므로 CSS 레이아웃을 간편하게 사용할 수 있습니다.
라이브 뷰 또는 DOM 패널에서 요소를 선택하여 선택기를 손쉽게 생성할 수 있습니다.
예를 들어 DOM 패널을 사용하여 단락 태그의 새 선택기를 생성해 보죠.
다시 소스 코드로 전환하여 DOM을 표시하고 DOM 패널에서 단락 태그를 선택합니다.
이와 같이 전체 페이지의 코드 구조를 매우 간편하게 볼 수 있죠.
DOM 패널을 축소하고 CSS 디자이너로 돌아가 소스에서 main.css를 선택한 다음 미디어에서 전체를 선택하고 선택기에 있는 + 기호를 클릭합니다.
그러면 두 레벨로 된 특정 선택기가 생성되는데, 본문과 단락이죠.
이때 위아래 화살표를 사용하여 이 두 레벨을 변경할 수 있습니다.
여러 레벨로 된 특정 선택기의 경우 우선순위가 있죠.
세트 표시에 체크 표시를 해제하여 새 선택기의 모든 옵션을 표시합니다.
텍스트 속성을 편집해 보죠.
글꼴 크기는 15픽셀로 설정하고, 줄 높이 속성은 em으로 설정하고 값은 1.75로 설정합니다.
이 스타일을 768픽셀 미디어 쿼리에 복제합니다.
해당 미디어 쿼리를 선택하고 단락 선택기를 선택하여 해당 속성을 표시합니다.
글꼴 크기를 18로 변경하고, 줄 높이는 1.5로 변경합니다.
[Concept COWBOY CONCEPT] 마지막으로 단락 선택기를 1,024픽셀 미디어 쿼리에 복제합니다.
1,024픽셀 미디어 쿼리를 선택한 다음 선택기를 선택합니다.
글꼴 크기 속성은 24픽셀로 변경한 다음 줄 높이 속성은 휴지통 아이콘을 클릭하여 삭제합니다.
768픽셀 미디어 쿼리에서 사용한 것과 동일한 설정을 사용할 것이므로 줄 높이 속성을 복제하지 않아도 됩니다.
라이브 뷰의 크기를 변경해 보면서 화면 크기에 따라 텍스트 스타일이 조정되는지 확인합니다.
또한 라이브 뷰에서 요소에 첨부된 코드로 손쉽게 이동할 수도 있는데요.
예를 들어 h1 태그를 다시 선택하고 headline 클래스를 마우스 오른쪽 버튼으로 클릭합니다.
코드로 이동을 선택하면 원래 headline 선택기 또는 여러 버전의 미디어 쿼리로 이동할 수 있습니다.
미디어 쿼리 중 하나를 선택하면 업데이트된 코드 뷰와 CSS 디자이너를 확인할 수 있습니다.
또한 미디어 쿼리 막대에서 미디어 쿼리를 마우스 오른쪽 버튼으로 클릭하여 코드로 이동을 선택할 수 있죠.
예를 들어 768픽셀 미디어 쿼리를 마우스 오른쪽 버튼으로 클릭하면 줄 속성이 표시되어 다른 미디어 쿼리와 구별되므로 간편하게 해당 코드로 이동할 수 있습니다.
또한 검사 모드를 사용하여 요소에 첨부된 스타일을 찾을 수 있습니다.
검사 모드 버튼을 클릭하고 커서를 요소 위에 가져가 강조 표시하면 CSS 디자이너에 코드가 표시됩니다.
요소를 두 번 클릭하면 검사 모드가 종료됩니다.
[Concept COWBOY CONCEPT] 지금까지 웹 페이지 디자인을 간편하게 만드는 방법을 살펴보았습니다.
모든 선택기를 동시에 표시하여 원하는 코드로 이동하거나 상황에 맞는 편집 기능을 사용하여 해당 요소에 첨부된 스타일을 조정할 수 있습니다.
[Concept COWBOY CONCEPT] CSS 디자이너를 사용하면 간편하게 코드를 관리하고 코드의 구조를 이해할 수 있습니다.
여러분도 직접 해 보세요.
[Concept COWBOY CONCEPT]
