[Project H4C] 18. CSS 실습 1

[Project H4C] 18. CSS 실습 1

본격적으로 CSS 실습을 시작해보자.

 

UI 모델링으로 그려본 사이트 디자인을 

CSS를 활용하여 만들어보자.

 

우선 빨간 박스부터 시작하다.

제일 위 제목의 JavaScript 는

<header>

    <h1>JavaScript</h1>

</header>

로 표현할 수 있다. 

 

그리고 CSS로 디자인 해야되는 요소는

 하단 테두리, 적절한 여백을 주어서 UI모델링과 비슷한 디자인으로 완성시켜보자

 

---

 

우선 JavaScript는 header 부분에 해당한다.

 

style을 추가하여 header 밑에 아래 테두리 추가하기

 

 

해더 밑에 아래 밑선이 추가되었다.

content와 border 사이의 간격을 

padding으로 조절해보자

 

padding:20px; 추가하기

 

보기 좋은 간견이 되었다.

 

---

 

이제 왼쪽 메뉴바에 있는 nav 부분을 만들어보자.

왼쪽 빨간 박스의 내용은 코드상에서 nav에 해당한다

 

 

<nav>와 <ol>, <li>로 html은 구성된다.

디자인적 요소의 CSS를 보면,

컨텐츠 폭을 200px로, float 속성으로 본문이 오른쪽에 위치하도록, 그리고 오른쪽 테두리로 디자인하면 된다.

 

 

nav에 오른쪽 테두리를 넣기.

 

근데 nav의 오른쪽 테두리가 가장자리에 위치하게 된다.

 

왜냐하면 nav라는 컨텐츠가 실제로 눈에는 안보이지만 왼쪽 빨간박스처럼 화면 전체를 사용하고 있기 때문이다

 

이 때 width:200px 값을 주면

이렇게 오른쪽 테두리가 옆으로 오게 된다.

nav부분에 float를 추가하면

이렇게 nav부분이 윗쪽으로 올라오는 것을 확인할 수 있다

그런데 메뉴바 길이가 너무 짧으니까

nav높이 값을  줘보자.

height:600px; 추가하면

 

nav의 높이 값 만큼 테두리가 쳐진다. 

---

마지막으로 본문 영역을 살펴보자.

 

왼쪽 빨간박스의 '변수와 상수' 저 부분은 본문으로 article로 구성할 수 있겠다.

그리고 float:left 를 적용시켜 보자.

 

아까 nav의 높이 600px 적용 시킨 것을 없애보자

 

article(본문) 부분에 

float:left;를 추가하면

 

float:left가 적용된 article의 모습

article 값에 padding=20px 값을 주자

오...점점 이뻐지고 있다..!

그리고 다시 nav안에 height값을 다시 넣어준다

 

짠!

그리고 마지막으로 

nav 목록에 있는 숫자를 없애보자.

 

nav ol 은

nav라는 태그 밑에 있는 ol 태그를 가리킨다

nav ol 목록을

list-style;none 적용하면

 

nav의 숫자 사라짐

 

 

한 페이지를 CSS 로 꾸며보았다.

이제 링크 클릭 후 뜨는 나머지 페이지들도 똑같이 디자인해보자.! 

-다음 편에서-