안녕하세요.
이 시간에는 CSS를 사용하여 웹 페이지의 레이아웃을 만들어 보겠습니다.
현재 페이지가 열려 있는데 기본 HTML로 되어 있습니다.
이와 같이 내비게이션 목록이 있고 여러 제목과 이미지가 있습니다.
이 시간에는 HTML 텍스트를 추가하는 방법은 살펴보지 않을 텐데요.
이 방법은 다른 튜토리얼을 참조하시기 바랍니다.
이제 흥미로운 시간이 되고 빠르게 진행하기 위해 이미 몇 가지 CSS 레이아웃 요소를 만들어 놓았으므로 바로 시작해 보겠습니다.
Dreamweaver로 이동하여 사전 정의된 CSS 시트를 웹 페이지에 추가해 보죠.
신속하게 시작하기 위해 이 튜토리얼에 사용할 파일이 열려 있습니다.
그러면 먼저 보통 표준이 기본값으로 되어 있는데요.
이 시간에는 표준에서 개발자로 전환해 보겠습니다.
또한 Dreamweaver에서 사이트를 정의해 놓았으므로 이 프로젝트의 파일을 관리할 수 있습니다.
이 튜토리얼을 잘 따라 하시기 바랍니다.
사이트를 만들려면 사이트에서 새 사이트를 선택합니다.
현재 사이트 정의에 대한 다른 튜토리얼이 제공되고 있으므로 도움이 될 것입니다.
이 CSS 시트를 추가해 보겠습니다.
그러면 연결해 보죠.
CSS 시트는 항상 head 안에 있어야 합니다.
이 안에 아무데나 즉, head의 여는 태그와 슬래시가 있는 닫는 태그 사이에 추가하면 됩니다.
여기라면 상관없습니다.
여기에 입력하는 것이 좋을 것 같네요.
CSS 시트의 구문을 추가할 경우 다소 긴데 이때 Dreamweaver의 유용한 팁을 활용할 수 있습니다. link를 입력하고 Return이 아닌 Tab을 누르면 CSS 스타일 시트에 연결하는 데 필요한 모든 구문이 자동으로 채워집니다.
이미 CSS 시트를 생성해 놓았으므로 간편하게 입력할 수 있습니다. s를 입력하면 이미 생성해 놓았으므로 이렇게 표시됩니다.
제가 만들어 놓은 스타일 시트죠.
이렇게 자동으로 채워지므로 매우 유용하고 곧바로 원하는 파일을 찾을 수 있습니다.
Return을 누르고 브라우저에서 확인해 보죠.
좋습니다.
CSS 시트를 연결하기 전과 비교해 큰 변화가 있긴 하지만 동일한 HTML5 요소입니다.
앞서 생성한 목록은 이전에는 파란색의 글머리 기호 목록이었는데 지금은 텍스트에 스타일이 적용되었습니다.
아래를 보면 인트로 텍스트가 있는데 스타일이 지정되어 있지 않죠.
나중에 할 것입니다.
이미지가 이동되고 크기도 조정되었으며 여기에는 소셜 아이콘이 있습니다.
이러한 사항들을 기억해 두고 바로 시작해 보겠습니다.
지금부터 CSS에서 이 요소들을 조정한 다음 직접 요소를 만들어 보겠습니다.
Dreamweaver로 이동하여 HTML 페이지로 돌아가 보죠.
지금 소스 코드 모드로 되어 있습니다.
먼저 스타일을 지정할 요소는 header이며 그런 다음 h1에 스타일을 지정해 보죠. header 요소는 HTML에 구조를 추가하는 태그로 HTML5 언어로 사전 정의되어 있고 머리글 영역으로 설계되어 있습니다.
기본적으로 페이지 상단에 상자로 표시되고 보통 로고와 내비게이션이 포함됩니다.
현재 HTML에 추가되어 있는데요.
스타일을 지정할 경우 배경색을 추가하거나 높이를 설정합니다.
CSS 시트에서 정확하게 이름을 입력한 다음 스타일을 지정해야 합니다. header를 살펴보았으므로 이제 h1을 사용해 보겠습니다. h1 태그는 제목을 설명하는 데 사용되며 페이지에서 가장 중요한 제목입니다.
이제 이 태그에 스타일을 지정해 보죠.
이미 만들어 놓은 CSS 시트로 이동해 볼 텐데요.
상단에 있는 관련 문서 막대로 이동하여 style-start를 클릭해 보겠습니다.
보시다시피 이름이 정확하게 동일합니다. header도 맞고 h1도 맞네요.
이 중괄호 안에 CSS 속성이 추가됩니다.
이미 몇 가지 속성이 입력되어 있습니다.
이제 스타일을 변경해 보죠.
현재 코드 뷰에서 작업하고 있는데 변경할 때마다 브라우저에서 사이트 모습을 확인할 수 있도록 해보죠.
가장 좋은 방법은 실시간 브라우저 미리보기를 사용하는 것인데 Dreamweaver의 하단에 있는 기능입니다.
오른쪽 하단에 이 옵션이 있죠.
Google Chrome에서 미리 보겠습니다.
좋습니다.
Dreamweaver에서 만든 페이지가 Chrome에서 열려 있습니다.
실시간 브라우저 미리보기를 사용하면 Dreamweaver에서 요소를 조정할 때마다 브라우저에서 바로 확인할 수 있어서 좋습니다.
저는 모니터 두 개를 사용하여 작업하는데 이 화면을 선택해서 다른 모니터로 드래그할 수 있죠.
하지만 튜토리얼에서는 이 방식으로 보여드리기가 어려우니 Dreamweaver를 연 상태에서 창 크기를 조정해 브라우저가 나란히 보이도록 설정해 보겠습니다.
먼저 header를 변경해 보겠습니다. header가 화면의 50%에만 맞춰져 있는데요.
여기로 돌아와 header를 보니 폭이 50%로 되어 있습니다.
이 폭을 100으로 변경해 보겠습니다.
100을 입력하면 이 측면에 맞게 이동되었습니다.
훌륭합니다.
다음으로 이 위쪽 부분을 변경해 보겠습니다.
위쪽에 패딩이 100픽셀로 추가되어 있는데 마음에 들지 않으므로 0픽셀로 변경해 보겠습니다.
머리글이 위쪽으로 이동된 것이 보이시죠?
이번에는 패딩을 0에서 1.5로 변경하고 측정 단위로 em을 사용해 보겠습니다.
픽셀과 같은 절대 크기를 사용할 수도 있지만 측정 단위로 em을 사용하면 페이지의 다른 요소와 비교할 수 있으므로 변화하는 화면 크기를 손쉽게 조정할 수 있습니다.
마지막으로 위치 값을 변경해 볼 텐데 absolute로 설정되어 있습니다. absolute는 흥미로운 값인데요.
화면을 아래로 스크롤해 보면 머리글이 절대 위치에 있어 위쪽에 표시되므로 스크롤하면 위쪽에서 사라집니다.
이제 매우 트렌디하게 fixed로 변경하고 스크롤하기 시작하면 위쪽에 표시되지만 고정됩니다.
다음으로 CSS를 사용하여 이 글꼴에 스타일을 지정해 보죠.
지금까지 CSS를 사용하여 레이아웃을 만들고 폭을 설정하며 위쪽에 고정시켜 보았는데요.
이번에도 CSS를 사용하여 글꼴에 크기와 색상을 지정해 보겠습니다.
그러면 시작해 보죠.
Dreamweaver로 이동해 보면 h1에 색상이 설정되어 있는데요.
이 색상을 흰색인 #fff로 변경해 보겠습니다.
그러면 작은 색상 창이 표시되는데 매우 유용합니다.
원하는 색상을 선택하고 Return을 누르면 됩니다.
이 경우 흰색인 #fff를 사용해 보죠. text-transformation의 경우 uppercase로 변경해 볼 텐데요. up을 입력하면 up로 시작하는 단어가 표시되어 자동으로 채울 수 있습니다.
키보드에서 Return을 눌러 보죠.
그러면 시간을 절약하고 정확한 구문을 입력할 수 있습니다. font-size는 2em으로 되어 있는데, 더 크게 8.5em으로 변경해 보겠습니다. letter-spacing의 경우 0.85em으로 설정하여 초안과 일치하도록 글자를 분리시켜 보죠.
지금까지 기존의 CSS에 스타일을 지정해 보았는데요.
이번에는 전에 없던 고유한 속성을 만들어 보겠습니다.
스타일을 지정할 요소는 바로 이 인트로 텍스트입니다.
이 밋밋한 텍스트에 스타일을 적용해 보죠.
우선 해당 코드를 찾아야 하는데요.
소스 코드로 돌아와 HTML로 이동해 보죠.
이것을 클릭하고 찾아 보면 여기에 있네요.
이 텍스트입니다. intro라는 class 이름이 추가되어 있으므로 이 intro에 스타일을 지정해 보겠습니다.
CSS로 이동해 보죠. class를 만들려면 앞에 마침표를 입력해야 하는 것이 class의 규칙입니다.
이 태그에는 앞에 마침표가 없으므로 CSS 시트에서 class와 태그를 손쉽게 구별할 수 있습니다.
이제 class 이름을 입력하는데 intro를 입력해 보죠.
여러분은 원하는 이름으로 지정하면 됩니다.
두 단어를 사용할 경우 사이에 빈 칸을 둘 수 없고 하이픈이나 밑줄을 사용해야 합니다.
HTML에서 생성한 것과 동일하게 intro라고 지정해 보겠습니다.
구문의 나머지는 위의 태그와 유사합니다.
중괄호를 입력하면 두 번째 중괄호가 자동으로 입력됩니다.
이제 Return을 입력하면 class에 스타일을 적용할 수 있고 이 중괄호 안의 모든 요소는 CSS 속성으로 간주됩니다.
먼저 위치를 조정해 보겠습니다. padding을 사용해 보죠. padding을 끝까지 입력하기 전에 자동으로 채울 수 있으므로 이때 Return을 누릅니다.
그러면 padding 다음에 콜론이 입력되죠.
크기는 위쪽의 경우 12em으로 설정하고 위쪽부터 시계 방향으로 설정되므로 12em을 입력한 다음 6em을 입력하고 아래쪽은 12em을, 왼쪽은 6em을 입력합니다.
CSS 속성을 작성할 때마다 세미콜론을 입력하여 끝내야 합니다.
이제 브라우저에서 확인해 보죠.
바뀌었네요.
CSS를 직접 작성하여 만들어 보았는데요.
CSS 파일에서 class 이름과 동일하게 입력하고 패딩을 추가해 보았습니다.
위쪽과 아래쪽에 패딩이 많고 왼쪽과 오른쪽에는 약간 패딩이 있네요.
이때 깔끔하게 정리할 방법이 있는데요.
위쪽과 오른쪽만을 설정하게 되면 상자 모델이 표시되어 아래쪽과 왼쪽에도 동일한 측정 값을 사용한다고 간주합니다.
이 방식으로 CSS를 깔끔하게 정리할 수 있습니다.
지금까지 첫 번째 새로운 CSS 즉, class를 생성해 보았는데요.
이번에는 안에 있는 텍스트에 스타일을 지정해 보겠습니다.
다시 소스 코드로 이동해 보죠.
HTML을 보면 p 태그가 intro라는 class에 있는데요.
이 안에 있는 텍스트에 스타일을 지정해 보죠.
글꼴을 변경하고 색상과 크기도 변경해 보죠.
이때 CSS로 이동하여 p에 스타일을 적용할 수도 있는데요. p 태그는 일반적으로 사용되는 태그로 페이지에서 반복적으로 사용됩니다.
따라서 이 첫 번째 p 태그에 스타일을 지정하면 페이지에 있는 다른 p 태그에도 적용되는데 이 설정은 원하지 않으므로 다소 구체적으로 설정해 보겠습니다.
복합 선택기를 사용해 볼 텐데요.
그럼 해 보죠. p 태그에 스타일을 지정하지만 intro 안에 있는 p 태그만 적용해 보겠습니다.
어떤 모양으로 만들지 Photoshop 초안을 확인해 보죠.
이 글꼴로 지정하고 색상도 변경하고 크기도 변경하고 줄 간격을 넓히고 텍스트의 글자 간격도 늘려야겠습니다.
그러면 CSS에서 이 속성을 작성하는 방법을 살펴보겠습니다. p 태그에 스타일을 지정해 볼 텐데요. intro 안에 있는 p 태그를 입력했는데 이를 복합 선택기라고 합니다.
이제 중괄호를 추가하고 먼저 font를 입력해 보죠. font-f를 입력하면 family를 자동으로 채울 수 있도록 도와주죠.
이 글꼴을 사용해 보겠습니다.
CSS 속성을 끝낼 때는 꼭 세미콜론을 입력해야 합니다.
브라우저를 확인해 보죠.
새로운 글꼴로 바뀌었네요.
스타일 지정을 위해 먼저 색상을 사용해 볼 텐데요. color는 글꼴 색상을 의미합니다.
#를 입력하면 색상 피커를 사용할 수 있습니다.
제가 미리 정해놓은 색상 값인 #343144를 입력하고 반드시 세미콜론으로 끝냅니다. text-align의 경우 맨 위에 있는 옵션을 선택해 보죠. center를 선택하고 세미콜론을 입력합니다. text-transform은 이전과 동일하게 설정해 보죠. uppercase를 선택합니다.
거의 커서만을 사용하여 스타일을 지정했는데요.
Dreamweaver에서는 다양한 옵션을 제공하여 간편하게 설정하도록 도와주므로 모든 것을 직접 작성하는 것보다 빠르게 생성할 수 있습니다.
화살표 키를 사용하여 목록을 아래로 스크롤하고 uppercase를 선택한 다음 Return을 누르면 되죠.
끝에 세미콜론을 입력하는 것을 잊지 마십시오.
다음으로 font-size의 경우 이전처럼 측정 단위를 em으로 사용해 볼 텐데 2.5em을 입력하고 세미콜론을 입력합니다.
또한 line-height를 입력하고 1.8em으로 설정한 다음 letter-spacing을 0.325em으로 설정해 보죠.
좋습니다.
이제 브라우저에서 확인해 보겠습니다.
훨씬 나아졌네요.
이 텍스트의 경우 복합 선택기를 사용하여 특별하게 지정해 보았는데요.
이 intro 섹션 안에 있는 p 태그에만 적용되고 다른 p 태그에는 적용되지 않습니다.
지금까지 Dreamweaver에서 CSS를 다양하게 실험해 보았는데요.
기존의 속성을 조정한 다음 간단한 class를 생성해 보았습니다.
이때 앞에 마침표를 입력해야 하죠.
또한 복합 선택기도 생성해 보았습니다.
고급 기능이지만 그렇게 어렵지는 않습니다.
이 페이지에 직접 CSS를 생성해 보았는데요.
아시다시피 이 프로젝트를 위해 이전에 만들어 놓은 CSS가 있으므로 처음부터 시작하지 않아도 됩니다.
그러면 Dreamweaver에서 이미 작성된 코드를 보여드리죠.
이것은 지금까지 작성한 코드이고 아래로 내려가면 이미 다른 코드가 많이 작성되어 있으므로 다른 부분부터 시작할 수 있습니다.
계속해서 다른 코드가 작성되어 있고 이와 같이 사이트를 상속하고 사용할 경우와 이러한 CSS 속성에 대해 잘 모르는 경우 예를 들어 "display: block"의 의미를 모르는 경우 마우스 오른쪽 버튼으로 클릭하면 아래에 빠른 문서가 표시됩니다.
이것은 새로운 기능으로 display 요소의 의미와 이와 함께 사용할 수 있는 다양한 속성이 제공됩니다. display는 float와 함께 CSS 레이아웃의 기본적인 개념이며 이러한 의미를 이해하는 것이 매우 중요합니다.
처음 사용하거나 이러한 CSS 속성에 대해 모르는 경우 마우스 오른쪽 버튼을 클릭하고 빠른 문서를 사용하면 됩니다.
이번에는 자주 사용하게 될 빠른 편집에 대해 설명해 드리겠습니다.
소스 코드로 이동하여 바닥글 섹션을 사용해 보죠.
브라우저에서 미리 보겠습니다.
바닥글을 보면 모든 것이 왼쪽에 정렬되어 있는데요.
초안을 확인해 보죠.
초안을 보면 왼쪽에 일부가 있고 오른쪽에 일부가 있습니다.
그러면 변경해 보죠.
빠른 편집을 통해 float를 설정해 보겠습니다. footer를 보면 credit이 추가되어 있는데요. website design by를 오른쪽으로 흐르도록 해 보겠습니다.
상단에서 intro 상자에 대해 한 것과 같이 작성할 수도 있는데요.
CSS 시트로 이동하여 intro를 보면 마침표를 입력한 다음 intro를 입력하고 자동으로 채웠습니다.
이번에는 더 빠르게 해 보죠. footer-credit을 마우스 오른쪽 버튼으로 클릭하고 빠른 편집을 선택하면 새 규칙이 표시되고 스타일을 지정할 수 있습니다.
새 규칙을 만들 경우 버튼을 누르면 실제 CSS 시트가 표시됩니다.
이는 간단한 게이트웨이를 여는 것과 같으며 .footer-credit {가 자동으로 채워져 있습니다.
따라서 매우 빠르게 시작할 수 있죠.
이것이 바로 빠른 편집 기능입니다.
그러면 오른쪽으로 옮기기 위해 float를 사용해 보겠습니다.
오른쪽에 떠있도록 right를 입력하고 끝에는 반드시 세미콜론을 입력합니다.
또한 폭도 설정해 보겠습니다.
40%를 입력하고 float를 설정할 때 오른쪽에 배치하도록 하는 경우 보통 position을 relative로 변경해야 올바르게 설정됩니다.
브라우저에서 확인해 보죠.
오른쪽에 표시되어 잘 배치되었습니다.
정말 멋지고 탁월한 기능입니다.
빠른 편집도 살펴보았는데요.
소스 코드에서 확인할 수 있습니다.
현재 HTML에서 보고 있지만 실제로 스타일 시트에서 작성한 것이죠.
그러면 CSS 스타일로 이동하고 아래로 내려가면 footer-credit이 있습니다.
이렇게 두 파일을 전환할 필요 없이 빠른 편집을 사용하면 됩니다.
브라우저로 이동해 보죠.
여기 있네요.
지금까지 float를 살펴보고 강력한 빠른 편집을 사용하는 방법을 살펴보고 CSS를 사용하여 footer뿐만 아니라 상단에 있는 내비게이션이 포함된 레이아웃에 스타일을 지정해 보았습니다.
위쪽에 고정시키고 패딩을 추가하여 상단에 보이도록 설정해 보았습니다.
또한 h1과 단락 텍스트에도 CSS를 사용하여 텍스트 서식을 지정해 보았습니다.
마치기 전에 CSS 스타일 시트 전부를 제거해 보겠습니다.
이 튜토리얼을 시작했을 때 CSS 시트를 연결했는데요.
처음에는 밋밋한 HTML이었습니다.
HTML에서 스타일 시트를 찾아 모두 선택하고 제거한 다음 브라우저에서 확인해 보겠습니다.
CSS의 기능은 정말 탁월합니다.
이 튜토리얼을 진행하는 동안 HTML은 하나도 변경하지 않았는데요.
시작했을 때와 동일한 모양입니다.
내비게이션, 제목, 이미지가 그대로 있죠.
하지만 기존의 CSS를 사용하여 크게 변경하고 새롭게 설정해 볼 수 있었습니다.
지금까지 CSS를 간략하게 소개해 드렸는데요.
더 많은 튜토리얼이 제공되므로 더욱 심도 있는 내용을 살펴보시기 바랍니다.
지금 Dreamweaver를 통해 새로운 CSS 웹 스킬을 사용하여 매력적인 웹 페이지를 만들어 보시기 바랍니다.
