웹개발 프로젝트(CSS/HTML)-#6 미니홈피 프로젝트(1. 기본레이아웃 구성)

오늘부터 드디어 미니홈피 프로젝트를 시작해보겠다.

 

일단 지금까지 배운 css파일 작성법, position속성 사용법 등을 활용하여 기본 레이아웃먼저 배치해보겠다.

 

복습하는 방식으로 글을 써보겠다.

 

이번 포스팅에서는 결과물 먼저 보여주는게 좋을것같다.

이렇게 만들것이다. 거창하게 시작했는데 단촐해 보인다...

 

자일단 배경에 보이는 체크무늬먼저 이미지 파일로 저장해줘야겟지

 

아무거나 이미지파일을 저장한후에

 

static폴더 생성하고 그안에 images 폴더 만들고 그 안에 체크무늬 이미지를 넣어둔다

이렇게 폴더를 만들어주면 되는것이다.

 

그리고 복습하나!!

 

외부 css파일로 적용하는 방법에서 제일 중요한것은 html파일에서태그에 css파일의 경로를 추가해줘야한다는점이다.

 

다시말해서

 

이 코드를 꼭 명시해줘야한다.

 

css파일의 경로(href)와 그것이 stylesheet라는것(rel)을 명시해준것이다.

 

그러면 이제 css파일에 있는 속성들을 다양하게 html에 적용할수 있게 준비과정이 끝났다 봐도 된다.

 

다음

 

html파일에서 body태그를 꾸며보자면 먼저 div태그를 하나 추가한다(최상위 레이아웃이 될 태그(격자무늬))

 

그리고 class로 가져올것을 감안하여 bookcover라는 클래스명을 써준다.

 

그리고 css파일에 bookcover 클래스에 속성을 추가해주면 된다.

 

어떤 속성을 추가해줘야할것 같냐?

 

바로 체크무늬 이미지이다. 그래야 바탕에 위 사진처럼 체크무늬가 들어가겠지

body {
    background-color: #a3a3a3;
    background-image: url("../static/images/pattern.png");
    background-size: 100px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

이렇게 코드가 될텐데

 

이미지 경로를 잘보면 static이라는 부모폴더안에 images라는 폴더 안에 pattern이라는 이미지 파일이 있는것이므로

 

../static으로 시작하는거 주의할것!!

 

그다음 포지션 속성은 fixed가 쓰였다. 무조건 붙어있는 속성이다. 아무리 스크롤을 내려도 고정된것이다.

 

좌우상하 값을 다 0으로 했다->전체화면에 꽉차게 격자무늬를 채우겠다 라는 뜻!!

 

그다음 안에 들어가는 직사각형을 꾸며보자

.bookcover{
    background-color: #b4d1da;
    border-radius: 9px;
    border:1px solid #738186;
    width: 960px;
    height: 660px;
    top: 120px;
    left: 480px;
    position: relative;
}

이렇게 해주면 된다는것이다. 이것은 css파일의 코드 일부이다.

 

하나씩보면 일단 배경색 설정하고 모서리는 9px짜리 둥글게 설정하고

 

경계선(border)는 1px두께에 실선 solid, 색상까지 설정하고

 

가로 960px과 세로660px짜리 직사각형으로 채워주고

 

position속성을 relative로 해준다 relative포지션속성은 어떤 특징이 있었는지 복습해보자

 

static포지션 기준으로 위치가 상대적으로 결정된다고 했다.

 

그래서 top120px, left480px로 해주면

 

static기준으로 했을때의 위치인 왼쪽상단 모서리에서 위로 120px띄우고 왼쪽으로 480px만큼 띄운 위치에 직사각형이

 

생기는것이다.

 

다음으로 그안에있는 점선 테두리 모양을 꾸며보자! 이 역시 클래스로 한번 해보면

.bookdot{
    position: absolute;
    border: 1px dashed white;
    top: 10px;
    left: 10px;
    bottom:10px;
    right: 10px;
    border-radius: 9px;
}

border라는 속성에 dashed라고 하면 점선이 된다. 나머지는 이해하면될것같고

 

absolute라는 포지션 속성을 보자

 

absolute는 상위 레이아웃 속성을 기준으로 위치를 정하는것이라고 했다.

 

상위 레이아웃이 relative로 설정된 bookcover클래스였다.

 

그러므로 bookcover클래스를 기준으로 얼만큼 여백을 두고 위치를 잡을것인지를 생각해야한다.

 

그 여백을 상하좌우 10px씩 한것이다.(맨위 결과물 사진과 함께 보면 이해될것이다.)

 

다음 마지막으로 점선 안에 하얀 박스를 꾸며보자

.page{
    position: absolute;
    background-color: white;
    top: 5px;
    left: 5px;
    bottom:5px;
    right: 5px;
    border-radius: 9px;
}

이건 설명할게 없을것같다. 같은 과정이다

 

정리하자면

 

지금까지 배운 포지션 속성과 외부css파일을 html에 적용하는 방식중 class로 가져오는 방법을 중점적으로 

 

미니홈피 프로젝트의 시작인 기본레이아웃꾸미기를 해보았다.

 

끝!!