c12. CSS 플로우트와 클리어 프로퍼티

CSS 플로우트와 클리어 프로퍼티

플로우트 (float) 의 예

최초의 스노보드는 합판이나 플라스틱을 이용했으나 최근 기술 발달에 따라 얇은 나무 판 위에 유리섬유, 플라스틱 합성수지를 덧 씌워 만들고 있다. 보드의 바닥은 폴리에스틸렌으로 이루어져 있다. 알파인과 프리스타일의 차이점은 구조에 있지 않고 디자인에 있다. 프리스타일 보드는 앞코와 뒤꼬리가 위로 올라갔기 때문에 에지를 덜 사용한다. 반면 알파인 보드는 앞코만 약간 올라가고 꼬리는 올라가지 않았기 때문에 에지 전체를 오랫동안 이용할 수 있다. 길이가 가장 짧은 보드는 하프 파이프 보드, 가장 큰 보드는 다용도 보드이다. 스피드와 카빙의 효과를 높이도록 설계된 레이스보드도 있다.[2] 보드는 종류도 다양하고 수량도 많다. 각부의 폭과 길이, 강도, 휘는 정도의 차이에 따라 용도가 다르다.

• 스노보드의 길이 선택은 제조사에서 제공하는 보드의 사양에 나와있는 한계체중에 따라 선택하는 것이 바람직하다. 단, 보드의 길이에 따라 스텐스를 조절하는데 한계가 있을 수 있으므로 키에 비하여 체중이 많이 나가거나 적게 나가는 경우는 상황에 따라 선택한다.
• 프리스타일계는 보드를차거나 착지하기 위해 안전성이 필요하므로 두껍다. 알파인계 보드는 턴할 때 회전 조작성을 중시하기 때문에 웨스트 폭(보드 중심의 좁은 부분)이 좁다.

clear 사용안한 경우

div1 : 하드 부츠

div2 : 아우터 셸은 플라스틱 제질로 딱딱하고 3~5개의 버클로꽉 조여서 발목의 움직임을 제한한다. 좋은 하드 부츠는 디자인이 비대칭 적이고 부츠 앞부분의 라이너가 뒤쪽 라이너보다 높고 더 뻣뻣해야 한다.

div1 의 float: right; 프로퍼티에 의해 div2 가 div1 을 둘러 싸고 있습니다.

clear 사용 한 경우

div3 : 소프트 부츠

div4 : 아우터 셸은 가죽과 합성섬유 등 부드러운 재질로 되어 있으며 끈으로 당겨 조임으로써 발목이 비교적 자유롭게 움직인다. 하드 부츠보다 움직임의 폭이 넓고 프리스타일의 기교와 하프 파이프 타기를 즐기는 라이더를 위한 시스템이다. 정확한 에징이 덜 중요한 깊은 가루눈에서도 편안하다.

div3 의 float: right; 프로퍼티를 div4 의 clear: right; 프로퍼티가 플로팅을 해제하였으므로 div4 가 div3 을 둘러 싸지 않았습니다.

CSS 레이아웃 프로퍼티에서, 플로우트 프로퍼티 (float property) 는 태그를 플로우트 할 것인지를 지정해 주는데, 플로우트란 텍스트 영역에서 이미지가 텍스트를 밀어내고 자리를 차지 하는 프로퍼티를 말합니다.

클리어 프로퍼티 (clear property) 는 플로우팅 태그의 동작을 제어할 때 사용됩니다.

플로우트 프로퍼티 (float property) 는 가장 단순하게는 이미지 주변에 텍스트가 둘러 싸도록 하는데 사용될 수 있습니다.

---

클리어 프로퍼티 (clear property) 는 플로팅 태그 다음의 태그 들은, 앞의 태그를 둘러 싸게 됩니다. 이렇게 하지 않으려고 할 때 클리어 프로퍼티를 사용합니다.

클리어 프로퍼티는 플로우팅 태그가 어느 방향으로 플로우트 되지 않도록 할 것인지를 지정합니다.

---

<style>
img.float1 {
float: right;
margin: 10px;
}
</style>

<p><img class="float1" src="https://cdn1.iconfinder.com/data/icons/Winter_Olympics/128/snowboard_.png" alt="Snowboard" width="128" height="128">
최초의 스노보드는 합판이나 플라스틱을 이용했으나 최근 기술 발달에 따라 얇은 나무 판 위에 유리섬유, 플라스틱 합성수지를 덧 씌워 만들고 있다. 보드의 바닥은 폴리에스틸렌으로 이루어져 있다.

알파인과 프리스타일의 차이점은 구조에 있지 않고 디자인에 있다. 프리스타일 보드는 앞코와 뒤꼬리가 위로 올라갔기 때문에 에지를 덜 사용한다. 반면 알파인 보드는 앞코만 약간 올라가고 꼬리는 올라가지 않았기 때문에 에지 전체를 오랫동안 이용할 수 있다. 길이가 가장 짧은 보드는 하프 파이프 보드, 가장 큰 보드는 다용도 보드이다. 스피드와 카빙의 효과를 높이도록 설계된 레이스보드도 있다.[2]

보드는 종류도 다양하고 수량도 많다. 각부의 폭과 길이, 강도, 휘는 정도의 차이에 따라 용도가 다르다.</p>

<style>
.div1 {
float: right;
width: 100px;
height: 100px;
margin: 10px;
border: 10px dotted IndianRed;
}

.div2 {
border: 10px dotted Coral;
}
.div3 {
float: right;
width: 100px;
height: 100px;
margin: 10px;
border: 10px dotted Aqua;
}

.div4 {
border: 10px dotted pink;
clear: right;
}
</style>

<h3>clear 사용안한 경우</h3>
<div class="div1">div1 : 하드 부츠</div>
<div class="div2">div2 : 아우터 셸은 플라스틱 제질로 딱딱하고 3~5개의 버클로꽉 조여서 발목의 움직임을 제한한다. 좋은 하드 부츠는 디자인이 비대칭 적이고 부츠 앞부분의 라이너가 뒤쪽 라이너보다 높고 더 뻣뻣해야 한다.</div>
<p>div1 의 float: right; 프로퍼티에 의해 div2 가 div1 을 둘러 싸고 있습니다.</p>

<h3>clear 사용 한 경우</h3>
<div class="div3">div3 : 소프트 부츠</div>
<div class="div4">div4 : 아우터 셸은 가죽과 합성섬유 등 부드러운 재질로 되어 있으며 끈으로 당겨 조임으로써 발목이 비교적 자유롭게 움직인다. 하드 부츠보다 움직임의 폭이 넓고 프리스타일의 기교와 하프 파이프 타기를 즐기는 라이더를 위한 시스템이다. 정확한 에징이 덜 중요한 깊은 가루눈에서도 편안하다.</div>
<p>div3 의 float: right; 프로퍼티를 div4 의 clear: right; 프로퍼티가 플로팅을 해제하였으므로 div4 가 div3 을 둘러 싸지 않았습니다.</p>

---

오버플로우: 오토 (overflow: auto;) 속성은 플로팅 된 태그가 내용이 아주 길어졌을 때 사용하는 속성입니다.

그런데 이것은 플로우팅된 태그가, 자신을 담고 있던 태그(예를들면 div 태그) 의 영역보다도 길어져 밖으로 나가게 될 수 있습니다.

이때 컨테이너 태그에 overflow: auto; 프로퍼티를 지정하여, 내부 태그의 내용에 따라 컨테이너 태그의 크기가 자동으로 커지도록 해줄 때 사용합니다.

---

[광고] Udemy 동영상 강의로 보기