CSS Layout

달수·2022년 9월 19일

레이아웃

: 구획을 나누고 적절히 정보를 배치하는 것
1. inline level element : 화면의 일부를 차지하는 태그 ex) a태그
2. block level element : 화면 전체를 사용하는 태그 ex) h1태그

h1 {display:inline;}
a {display:block;} 둘의 속성을 바꿔줄 수도 있음

박스모델

: 각각의 태그들이 웹페이지에 표현될 때 그 태그의 부피감을 결정함 -> 여백, 위치, 크기 등

p { border-width:10px;
    border-style:solid;
    border-color:red; }
p { border:10px solid red; 위 속성들을 이렇게 쓸 수 있음
	padding:20px; 안의 내용과 테두리 사이의 간격
    margin:40px; 테두리와 다른 element 테두리 사이의 간격  }

** inline element는 width와 height값이 무시된다.

box-sizing

: 박스의 크기를 화면에 표시하는 방식을 변경하는 속성, width와 height는 엘리먼트의 컨텐츠의 크기를 지정하는데 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵다.
따라서 box-sizing 속성을 사용해서 예측이 쉽도록 설정할 수 있다.

div { box-sizing:content-size; 기본값
	  box-sizing:border-size; 테두리포함해서 width, height 크기 설정
}

마진 margin

4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정
3개의 margin 속성값을 가질 때는 top, right와 left, bottom 순으로 설정
2개의 margin 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정
1개의 margin 속성값을 가질 때는 모든 마진값을 같게 설정
```
margin : 0 15px; 
```

마진겹침(margin-collapsing) 현상

: 마진값이 어떤 상황에서 사라지는 현상 (마진 영역이 겹침)
-> 두 element 사이의 margin값 중 더 큰 값이 두 요소 사이의 마진값이 된다.
-> 만약 이런 현상이 없었다면 설정한 값의 두 배값이 여백으로 설정되었을 것이다.

부모 엘리먼트가 시각적인 요소가 없는 투명한 상태일 때
부모 엘리먼트의 마진값과 자식 엘리먼트의 마진값 중에
큰 쪽의 마진값이 자식 엘리먼트의 마진값으로 사용된다.
시각적인 요소가 없는 투명한 상태일 때
그 태그의 마진값은 위쪽에 있는 마진값과 아래쪽에 있는 마진값 중에 큰 쪽의 마진값이 그 태그의 마진값으로 사용된다.

포지션

: 엘리먼트들의 위치를 지정하는것
1. static : 기본값, offset값 무시
2. relative : 부모태그 기준 상대적인 값
3. absolute : 페이지 가장자리 기준 절대적인 값, 더이상 자손태그가 아니게됨
만약 부모태그들 중 포지션이 static이 아니라면 페이지 기준이 아닌 부모태그를 기준으로 위치가 설정됨
4. fixed : 특정한 엘리먼트를 화면 어떤 위치에 고정시켜서 스크롤로부터 완전히 독립되게 하는것

 #me{  position: relative;
       left:100px; 
       top:100px;  }

** offset 값의 우선순위
top > bottom
left > right

flex

: 레이아웃을 잡아줄 때 사용
flex를 사용하기 위해서는 컨테이너(부모) 태그에 display:flex 속성을 부여해야 한다.

container<부모태그> 속성
: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
item<자식태그> 속성
: order, flex-grow, flex-shrink, flex-basis, flex, align-self

[속성 참고] https://codepen.io/enxaneta/pen/adLPwv

 <style>
        .container{
            background-color: powderblue;
            height:200px;
            display:flex;
            flex-direction:row; /*(row, column, column-reverse)*/
        }
        .item{
            background-color: tomato;
            color:white;
            border:1px solid white;
            flex-grow: 1; 부모태그 영역에서 자식태그들이 영역을 1의 비율로 나눠가짐
        }
        .item:nth-child(1){
            flex-basis: 150px; 플렉스 방향에 해당되는 크기 지정
            flex-grow: 2; 첫번째 자식태그만 2의 비율로 영역을 가져감
        }
        .item:nth-child(2){
            flex-basis: 150px;
            flex-shrink: 0; 컨테이너가 작아졌을때 여백이 같이 축소되는 비율(0은 축소되지않음)
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</body>

Holy Grail Layout 성배 레이아웃

 <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main> 아무 의미가 없습니다. </main>
            <aside> AD </aside>
        </section>
        <footer>
            <a href="https://www...">홈페이지</a>
        </footer>
    </div>
</body>

-> 여백이 없을 때 main영역만 줄어든다.

Media query

: 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능, 특히 최근 트랜드인 반응형 디자인의 핵심 기술이다. 모바일에서도 불편하지 않도록 크기에 따라 보여지는 화면을 설정할 수 있음.

 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
        @media (max-width:600px){ 600픽셀 이하일때 배경색이 green
            body{
                background-color: green;
            }
        }
        @media (min-width:601px){ 601픽셀 이상일때 배경생이 blue
            body{
                background-color: blue;
            }
        }
 </style>

float

: 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법, 레이아웃 잡을 때도 사용(요즘은 flex)
텍스트와 그림이 합쳐져서 텍스트가 그림을 피해 흘러가는 느낌 -> 신문기사 느낌
특정 태그에 float효과를 주기 싫다면 해당 태그에 style="clear:both;" 설정하기

   img{ width:300px;
        float:left;
        margin:20px; }

다단 (multi column)

: 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃 ex) 신문, 핀터레스트

   <style>
      .column{
        text-align: justify;
        column-count: 4; /*4로 분할(폭을 같이 지정해주면 해당 폭 이하에서 4이하로 줄어들 수 있음)*/
        /*column-width: 200px; 컬럼 크기를 지정해 column-count처럼 단을 나눌 수 있음*/
        column-gap:30px;
        column-rule-style: solid;
        column-rule-width: 5px; /*컬럼 사이 선 두께 */
        column-rule-color: red;
      }
      h1{
        column-span: all; /* 컬럼에 구애받지 않음 */
      }
    </style>