div 태그를 이용하여 레이아웃 만들기

Web 프로그램/Layout 2018. 4. 24. 15:43

728x90

<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰인다.
div 태그는 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓴다.
div와 span 요소는 보통 class 속성을 같이 사용한다.

레이아웃(layout)하는 순서
1. 실제 설계도를 그리는 것처럼 메뉴바, 사이드바, 본문, 하단 등의 배치를 그려본다.
2. 그리고 남들이 직관적으로 이해할 수 있는 이름을 붙인다.
   <div id="navbar"></div>
   <div id="sidemenu"></div>
   <div id="contents"></div>
3. 스타일 주기
   - width : 너비 속성(pixel, % 가능)
   - height : 높이 속성(pixel, % 가능)
   - float : 좌우 정렬 속성(left or right)
   - background-color : 배경색 속성

- line-height : 1.2 /* 줄 간격(텍스트를 싸고 있는 라인의 기본 높이를 설정) */

. 숫자 : 현재 글꼴에서 몇 배 크기로 할 지 지정

. % : 현재 글꼴 크기의 백분율로 높이를 지정

. 길이 : em, px, pt, cm 등의 고정된 폭

폰트 사이즈가 12px이고 line-height가 20px 이라면

그 나머지 8px의 반인 4px씩을 그 위와 아래에 더하게 된다.

한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋다.

     참조 : http://www.tiptech.net/lecture/html/css/line-height.html
4. 여백 주기
   - margin : 객체와 객체 사이의 공간
     margin-top (상단 여백)
     margin-right (오른쪽 여백)
     margin-bottom (아래 여백)
     margin-left (왼쪽 여백)
     table {
      margin: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
     }
5. border : 선 굵기
   - border-width : border의 width 값을 지정
     p {border-top: thick solid #ff0000;} // CSS 문법
     object.style.border="3px solid blue" // 자바스크립트 문법

   - border-style : border의 style 값을 지정 (4방향의 테두리에 적용될 선의 스타일을 지정)
     . none : border 스타일을 지정하지 않는다.
     . hidden : none 속성값과 같다.
     . dotted, dashed, solid, double, groove, ridge, inset, outset
     .inherit : 부모 요소로부터 값을 상속 받는다
     object.style.borderStyle="dotted double" // 자바스크립트 문법

   - border-color : border의 color 값을 지정 (4방향의 테두리에 적용될 색상을 지정)
     h4 {border-color: red;} /* all four borders are red */

6. padding : 내용과 border 사이의 공간

7. float 속성

   - float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성이다.
   - float 속성은 left, right, none 만 있다.
   - float 속성의 default 는 none(띄우지 않음)이다.
   - inline 으로 float 속성 설정
     <img src="imags.png" style="float:left;" >
   - css 이용한 float 속성 설정
     <style type="text/css">
     img { float:left; }
     </style>

   - float 속성 값을 right 로 지정하면 첫번째 박스부터 순서대로 오른쪽으로 붙게 된다.
   - 이미지에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 된다.
     이미지 좌우에 글자가 오는 걸 방지하려면 clear 속성을 설정한다.
     이미지가 float:left 상태인데 clear:left를 해 주면 글자가 글자가 이미지 아래로 내려간다.

- clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성이다.

8. div 속성 배우기

- 아무런 설정을 하지 않은 div는 세로 정렬을 한다.

- 가로 정렬을 하려면 div 태그로 감싸고 float, width 속성값을 추가한다.

    <div class="boxA">
    <div class="box1">
         BOX1
    </div>
    <div class="box2">
        BOX2
    </div>
    </div>

       <style>
            .boxA {
                border: solid 1px #00a0e9;
                background-color: #a0e0fe;
                color: #00a0e9
            }
            .boxA:after {
                display: block;
                clear: both; // float 의 영향을 받지 않겠다는 의미
            }

            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:50%; }
            .box2 { float: left; width:50%; }
        </style>

- 가로로 정렬한 div의 너비가 100%를 넘으면 옆으로 빠져나온 div가 아래로 내려가서 출력된다.

- box1 div width를 고정(250px)하고 싶다면 ... (왼쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both
            }
            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:250px; }
            .box2 { float: none; width:auto;margin-left: 250px; }

- box2 div width 를 고정(250px)하고 싶다면.... (오른쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both;
            }

            .box1 {
                float: left;
                width: 100%;
                margin-right: -250px;
                padding-right: 250px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .box2 {
                float: left;
                width: 250px
            }

- 반응형 웹 다지인 : 브라우저 화면의 크기에 따라 가로정렬, 세로정렬 상태를 변경

. 반응형 웹 : Device 가 모바일, 테블릿, PC에 구분없이 이용 가능한 템플릿을 이용하여 개발한다.

. https://startbootstrap.com/ 에서 템플릿을 다운로드 한다.

. 템플릿을 수정하여 화면의 변화를 확인하면서 class 의 내용을 확인한다.

. 직접 작성하는 반응형 웹 디자인은 "모던 웹사이트 디자인의 정석" 책과

홈페이지에서 소스코드를 받아서 직접 테스트하면서 해보면 도움된다.

9. 색상 선택

- https://html-color-codes.info/Korean/ 에서 색상을 선택하면 관련 코드가 나온다.

- 기본적인 활용 코드는 http://www.color-hex.com/ 를 참조하면 좋다.

- https://www.w3schools.com/colors/colors_names.asp 에서 다양한 색상을 참조할 수 있다.

회색	#888888	청록색	#7cbac1
회색	#eeeeee	밝은 하늘색	#94ecf6
흰색	#ffffff	하늘색	#75dbe7
검정색	#000000

10. 스마트폰 레이아웃 주의사항

- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트를 적용할 수 없을 수 있다.

출처: http://link2me.tistory.com/567?category=831192 [소소한 일상 및 업무TIP 다루기]

728x90

저작자표시 비영리

'Web 프로그램 > Layout' 카테고리의 다른 글

CSS 반응형 레이아웃 만들기 (1)	2018.06.02
Layout 만들기 예제 -1 (0)	2018.04.24
bxslider 사용 예제 (폴더내 파일 자동 인식) (0)	2017.04.28
[PHP] 현재 디렉토리 경로 설정 (자동인식) (0)	2017.02.20
모바일, PC 구분하는 코드 (0)	2017.02.12

Link2Me