본문 바로가기
JAVA/HTML, CSS

Web - CSS(boxmodel & 레이아웃)

by 설총이 2018. 7. 2.

★★★박스모델(Box Model)

HTML 요소를 감싸는 가상적인 박스


컨텐츠(Content) : 박스의 내용물

패딩(Padding) : 컨테츠 주위의 영역

경계(Border) : 경계선

마진(Margin) : 박스와 다른 박스간의 여백


margin ="auto" width="길이 지정" -------- 중앙배치

text-align:center; ------ 텍스트 중앙정렬



*요소의 위치

속성 : top, bottom, left, right


정적위치설정(static) :: 블록 요소들은 박스처럼 상하로 쌓이고, 인라인요소들은 한줄에 차례대로

상대위치설정(relative) :: 정상적인 위치에서 상대적으로 요소가 배치

절대위치설정(absolute)

:: 전체 페이지를 기준으로 시작위치에서 top,left,bottom,right만큼 떨어진 위치에 배치

->시작위치란, 기본 태그생성시 왼쪽위상단에서 시작해서 써내려간다.

고정위치설정(fixed) :: 브라우저 윈도우를 기준으로 상대적으로 요소의 위치를 잡는것

-> 스크롤바가 움직여도 화면에 넘어가지않고 고정된다.


*float


float : left; -> 왼쪽에서 오른쪽으로 나열

float : right -> 오른쪽에서 왼쪽으로 나열


float를 사용하고 난뒤에 다른것이 또 나열된다면 그 요소 속성에서 clear : both;를 사용해주어야한다.

clear: both; /* 위에 float속성을 썼기때문에, footer는 content 왼쪽으로 나열된다

그래서 float를 썻던 속성을 말끔히 지워주어야한다.*/



1
2
3
4
5
6
7
8
9
10
11
12
13
#content {
    width: 70%;
    background-color: blue;
    float: right;
    height: 100px;
}
#footer {
    background-color: aqua;
    width: 100%;
    height: 50px;
    clear: both; /* 위에 float속성을 썼기때문에, footer는 content 왼쪽으로 나열된다
                    그래서 float를 썻던 속성을 말끔히 지워주어야한다.*/
cs


1
2
3
4
5
6
7
8
<body>
    <div id="wrapper">
        <div id="header">header</div>
        <div id="nav">nav</div>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
cs



*overflow 속성

자식 요소가 부모 요소의 범위를 벗어났을때, 어떻게 처리할것인지 지정

overflow:hidden : 부모 영역을 벗어나는부분은 보이지않는다

overflow:scroll : 벗어나는부분을 스크롤할 수 있다.

overflow:auto : 자동으로 스크롤바가 생성

부모태그에 overflow:hidden을 지정하면 자식속성(ex)float)도 다 감춘다.


:: 위에 clear:both;보다는 float 속성을 쓴 태그들을 부모태그로 묶어서

부모태그에 overflow를 거는걸 많이쓴다



1
#secondLine { overflow: hidden}
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="wrapper">
    <div id="header">header</div>
 
    <!-- float속성이 있는 nav와 content를 부모태그로 묶어서
        그 부모태그에게 overflow : hidden; 을 건다.
        그러면 속성들이 숨겨져 다른 태그들에게 영향을 미치지 않는다. -->
        
        <div id="secondLine">
            <div id="nav">nav</div>
            <div id="content">content</div>
        </div>
    <div id="footer">footer</div>
    </div>
</body>
cs




*z-index


position이 반드시 지정된 상태로 해야하며,

원하는 태그를 z-index에 숫자를 줘서 높이/우선순위를 정할 수 있다

기본값은0 으로 지정되어있으며, 나중에 쓰이는 태그가 먼저 쓰인 태그위로 덮혀지게된다.


*요소의 크기지정

min-width, min-height : 요소의 최소 크기

max-width, max-height : 요소의 최대 크기


:: 최소나 최대값이 정해지면 그 숫자의 영역을 넘어서지않는다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>
    <!-- p태그에 아무 조건을 걸지 않기때문에 기본값으로 z-index : 0인 상태에서
    p태그가 나중에 오기때문에 p태그를 이루고있는 문자열들이 사진 위로
    덮히게되지만, img태그에서 z-index를 '음수'로 만듦으로써 img가 뒤로가게된다.-->
    <img src="../images/pome.png" width="200" height="200" />
    <p>img 요소의 z-index가 -1이므로 다른 요소의 뒤에 위치한다.</p>
</body>
cs





*opacity(투명도) / visibility(뷰)


opacity - 0~1사이로 투명도 조절.

visibility : hidden / visible

hidden이면 안보인다. 단, 보이지않을뿐 영역은 차지하고있다.

visible이면 보인다



box-sizing : border-box -------- padding,border까지 포함

box-sizing : content-box --------- content영역만 해당



'JAVA > HTML, CSS' 카테고리의 다른 글

CSS - nth-of-type() / white-space  (0) 2018.07.03
Web - CSS(selector)  (0) 2018.07.02
Web -Input 태그  (0) 2018.06.28
Web - <div> 태그  (0) 2018.06.28
Web - list  (0) 2018.06.27