selfstarter

CSS정리(float, :before, :after, overflow, clear, box-sizing, position) 본문

Web/Html

CSS정리(float, :before, :after, overflow, clear, box-sizing, position)

selfstarter 2020. 6. 10. 14:49

CSS정리

float

float은 띄우다라는 의미. 어떤 요소를 해당위치에 확정적으로 띄우고 싶을 때 사용.
왼쪽 띄우기 : float:left
오른쪽 띄우기 : floatright
어떤 요소를 띄우게 하고 나머지 요소는 빈 공간에다가 넣고 싶을 때 사용한다

<style type="text/css">
.box-style {
    width: 50%;
    margin:0 auto;
    border:4px solid #0099ff;
}
#first-text {
    width:20%;
    margin-right:10px;
    float:left;
}
</style>
</head>
<body>
<div class="box-style">
    <div id="first-text">Australia, officially the Commonwealth of Australia,[12] is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania, and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The population of 26 million[6] is highly urbanised and heavily concentrated on the eastern seaboard.[13] Australia's capital is Canberra, though its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth, and Adelaide.</div>
    <div>The history of Australia from 1788–1850 covers the early colonial period of Australia's history, from the arrival in 1788 of the First Fleet of British ships at Sydney, New South Wales, who established the penal colony, the scientific exploration of the continent and later, establishment of other Australian colonies. European colonisation created a new dominant society in Australia in place of the pre-existing population of Aboriginal Australians.</div>
</div>

:before, :after

:before는 요소의 앞에 내용을 생성함
:after는 요소의 뒤에 내용을 생성함

<style type="text/css">
h1:before {content:"*";color:blue;}
h1:after {content:"*";color:blue;}
</style>
</head>
<body>
<h1>Title</h1>

overflow

자식div가 float 속성을 사용하면 부모인 div가 자식 div에 맞춰서 크기가 달라져야 하는데 그렇게 작동하지 않는다
이 때 overflow 속성을 사용해서 자식 크기에 맞게 수정할 수 있다(clearfix라고 함)
visible : 기본값으로 자식 크기가 더 커도 크기를 그대로 함
hidden : 부모보다 크기가 크다면 큰 부분을 보이지 않도록 함(그런데 내가 했을 땐 안잘라짐)
scroll : 스크롤바를 추가함
auto : 스크롤바를 추가할지 자동으로 결정 

<style type="text/css">
.box-style {
    width: 50%;
    margin:0 auto;
    border:4px solid #0099ff;
    overflow: auto;
}
#first-text {
    width:20%;
    margin-right:10px;
    float:left;
}
</style>
</head>
<body>
<div class="box-style">
    <div id="first-text">Australia, officially the Commonwealth of Australia,[12] is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania, and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The population of 26 million[6] is highly urbanised and heavily concentrated on the eastern seaboard.[13] Australia's capital is Canberra, though its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth, and Adelaide.</div>
    <div>The history of Australia from 1788–1850 covers the early colonial period of Australia's history, from the arrival in 1788 of the First Fleet of British ships at Sydney, New South Wales, who established the penal colony, the scientific exploration of the continent and later, establishment of other Australian colonies. European colonisation created a new dominant society in Australia in place of the pre-existing population of Aboriginal Australians.</div>
</div>

clear

자식div가 float 속성을 사용하면 부모인 div가 자식 div에 맞춰서 크기가 달라져야 하는데 그렇게 작동하지 않을 때
그냥 float의 속성 자체를 없애버릴 수 있다
어떤 요소만 float 속성을 없애버리고 싶다면 clear 속성을 사용한다

<style type="text/css">
.box-style {
    width: 50%;
    margin:0 auto;
    border:4px solid #0099ff;
    overflow: auto;
}
#first-text {
    width:20%;
    margin-right:10px;
    float:left;
}
#second-text {
    clear:left;
}
</style>
</head>
<body>
<div class="box-style">
    <div id="first-text">Australia, officially the Commonwealth of Australia,[12] is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania, and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The population of 26 million[6] is highly urbanised and heavily concentrated on the eastern seaboard.[13] Australia's capital is Canberra, though its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth, and Adelaide.</div>
    <div id="second-text">The history of Australia from 1788–1850 covers the early colonial period of Australia's history, from the arrival in 1788 of the First Fleet of British ships at Sydney, New South Wales, who established the penal colony, the scientific exploration of the continent and later, establishment of other Australian colonies. European colonisation created a new dominant society in Australia in place of the pre-existing population of Aboriginal Australians.</div>
</div>

box-sizing

같은 너비와 margin을 가지고 있어도 padding에 따라 box너비가 달라 보일 수 있다
box-sizing 프로퍼티는 padding과 border가 size를 늘리지 않도록 해줌
-webkit-box-sizing: border-box;, -moz-box-sizing: border-box;, box-sizing: border-box;를 추가하면 두 div는 같은 size를 가지게 되고 아니면 padding과 border에 의해 다른 size를 가지게 됨

<style type="text/css">
.box-style {
    border:4px solid #0099ff;
}
#first-text {
    width: 10%;
    margin: 10px auto;
    float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#second-text {
    width: 10%;
    margin: 10px auto;
    padding: 50px;
    border-width:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
</style>
</head>
<body>
<div>
    <div id="first-text" class="box-style">Australia, officially the Commonwealth of Australia,[12] is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania, and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The population of 26 million[6] is highly urbanised and heavily concentrated on the eastern seaboard.[13] Australia's capital is Canberra, though its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth, and Adelaide.</div>
    <div id="second-text" class="box-style">The history of Australia from 1788–1850 covers the early colonial period of Australia's history, from the arrival in 1788 of the First Fleet of British ships at Sydney, New South Wales, who established the penal colony, the scientific exploration of the continent and later, establishment of other Australian colonies. European colonisation created a new dominant society in Australia in place of the pre-existing population of Aboriginal Australians.</div>
</div>

position

static은 기본값으로 무언가 설정하는 값이 아님
relative는 static과 동일하게 동작됨. top,right, bottom, left 프로퍼티 사용 가능. 위치값은 browser 왼쪽 상단부터 0,0 이고 아래나 오른쪽으로 좌표가 이동하면 값이 커진다
fix는 고정으로 페이지가 스크롤되더라도 같은 위치에 두는 것. top,right, bottom, left 프로퍼티 사용 가능. 모바일의 경우 적용이 될 수도 있고 안될수도 있음
absolute는 자신의 조상 중에 position이 static이 아닌 엘리먼트를 기준으로 position을 설정함

<style type="text/css">
body {
    overflow: scroll;
    height:2000px;
}
.relative {
    position:relative;
    left:200px;
    right:200px;
    top:200px;
    bottom:200px;
}
.fixed {
    position:relative;
    left:200px;
    right:200px;
    top:200px;
    bottom:200px;
}
.absolute {
    position:absolute;
    left:100px;
    right:100px;
    top:100px;
    bottom:100px;
}
</style>
</head>
<body>
<div class="relative">
relative 테스트 테스트
<div class="absolute">
absolute 테스트 테스트
</div>
</div>
<!--<div class="fixed">테스트 테스트</div>-->
<div class="absolute">
position을 가진 조상이 없는 absolute 테스트 테스트
</div>

'Web > Html' 카테고리의 다른 글

기본 HTML 구조  (0) 2020.05.22
CSS header 부분 정리  (0) 2019.12.30
리베하얀님 HTML4, CSS1,2, 전체 초기화 CSS파일 정리  (0) 2019.12.29
line-height 줄의 높이를 지정하는 속성  (0) 2019.11.26
Html Table 구조  (0) 2019.11.01
'Web/Html' Related Articles more
Comments