페이지 레이아웃을 위한 준비

이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.

 

이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.


 

Recap

  • 표 표시 하기 - table, tr, td 태그
  • 표의 속성 조정하기 - width, height
  • 표의 각 칸 (cell) 의 속성 조정하기.

내용을 구조화 한다. - div

우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <div>top</div>
        <div>logo</div>
        <div>main image</div>
        <div>4 squares</div>
    </body>
</html>

결과를 확인하면 예상대로 내용에 큰 영향을 미치지 않고, 하나의 구성 요소로 보인다.


 

구분을 위한 수직적인 관계

위의 이미지를 보면 "4 sqaures" 텍스트 자리에 새로운 사각형 4개가 가로 배치 되어 있는 것을 볼 수 있다. 이를 위해서 div는 하위의 div를 포함하여 수직적인 구조를 가질 수 있게 된다.

        <div>top</div>
        <div>logo</div>
        <div>main image</div>
        <div>
            <div>rectangle 1</div>
            <div>rectangle 2</div>
            <div>rectangle 3</div>
            <div>rectangle 4</div>
        </div>

결과를 보면 역시나 표시되는 것에서는 별다른 변화를 찾을 수 없다. 하지만 html 문서 내부에서는 들여 쓰기로 표현되는 수직적인 부모와 자식의 관계를 이용한 구조화된 모습을 볼 수 있다.


 

표시 방법을 위한 속성 - style

이제 이렇게 구조화된 html에 대하여 보여지는 모습을 변경하기 위해 style 속성을 사용하도록 한다.

        <div style="border: 3px solid red">top</div>
        <div style="border: 3px solid blue">logo</div>

내용을 포함하는 Container(컨테이너)의 크기를 확인하기 위해서 스타일 속성에 "스타일이름: 스타일 값"의 형태로 3픽셀의 다 채워진 각 색상의 외곽선을 추가 하였다.


 

이제 높이를 지정해 보도록 한다.

        <div style="border: 3px solid red; height:30">top</div>
        <div style="border: 3px solid blue; height:70">logo</div>

결과를 확인해 보면 각 영역의 높이가 조정되어 있는 것을 확인 할 수 있다. 하나의 스타일 속성안에 여러개의 스타일을 넣을 수 있고 각각은 ";" 으로 구분 되는것을 잘 살펴보도록 한다.

css로의 출발 - id, class

이런 컨테이너 요소(element) 또는 태그에는 id 와 class 속성을 사용할 수 있다. 이 속성은 각 요소에 어떠한 영향을 미치는 것이 아니라, 이름에서 유추할 수 있듯. 이름 (id), 과 부류 (class) 를 부여하게 된다.

<!DOCTYPE html>
<html>
    <head>
        <title>TITLE</title>
    </head>
    <body>
        <div id="top" style="border: 3px solid red; height:30">top</div>
        <div id="logo" style="border: 3px solid blue; height:70">logo</div>
        <div id="main">main image</div>
        <div id="rec_container">
            <div class="rect">rectangle 1</div>
            <div class="rect">rectangle 2</div>
            <div class="rect">rectangle 3</div>
            <div class="rect">rectangle 4</div>
        </div>
    </body>
</html>

결과는 이전과 동일할 것이지만, 각 div 요소를 구분할 수 있는 이름이 부여되었다. 이는 다음 포스트의 css를 사용하는데 매우 중요한 역할을 한다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기