끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 섹션5. float (1) - 기본 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 섹션5. float (1) - 기본

쓰리별 2021. 3. 4. 21:08

CSS에서 float란 속성은 본문 안에서 이미지를 삽입할 때, 좀 더 자연스럽게 삽입할 때 사용하는 기법. 많이 사용되는 곳은 삽화 삽입뿐 아니라, 레이아웃을 잡을 때도 많이 사용됨!! 전에 배운 flex란 기능이 최근엔 레이아웃을 잡는 것의 주가 되었지만, 기존에 floating이라는 기능을 통해 레이아웃을 잡는 형태가 있었기에 굳이 flex가 아니더라도 float로 레이아웃을 잡을 수 있기에 알아만두자는 것이다! 일단 다음과 같이 아무런 사진과 아무런 내용을 넣어보자

 

<!DOCTYPE html>

<html>

<head>

  <style>

    img{

      width: 300px;

    }

  </style>

</head>

<body>

  <img src="unsplash.com에 있는 아무거나 주소를 넣은 상태." alt="">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore    magna aliqua. </p>

</body>

</html>

★ VS CODE에서 확장자 Live server를 통해, 코드를 변경 후 저장하면 새로고침 없이 바로 적용되는 확장자를 설치했다.

 

위와 같이 이미지가 있으면 그 이미지 밑에 텍스트가 이렇게 위치하는 것이 아니라,

사진 오른쪽으로 쓱! 하고 올라오는 경우가 많이 있다. (뭐 템플릿 같은 것들이나 잡지들 보면)

 

그렇게 하기 위해선, img{}에 추가로 float:left; 값을 주게 되면, 다음과 그림과 같이 <p> 태그는 변형되면서 왼쪽에 있는 이미지를 피해서 적용되게 되는 효과가 ‘float’효과이다. 삽화를 표현할 때 이렇게 표현하는 게 더 자연스럽다는 것.

img{float:left;}

근데, 텍스트랑 이미지랑 너무 딱 달라붙어있응게 엘리먼트와 엘리먼트의 간격 즉, margin 속성 활용! 이때, img의 CSS 영역에다 margin-right값 부여. (그때 배웠듯, left나 top이라는 offset 값은 left, top의 부분에 ~px만큼 여백을 주겠다.라는 의미였다.) ex) margin-right:20px; 추가. 그러면 img엘리먼트의 오른쪽에 여백을 두겠다. 라는 의미

img{margin-right:20px;}

만약 이 이미지를 오른쪽에 두고 싶으면 float값을 right로 바꿔주면 된다.

텍스트가 더 추가가 되어서 지저분해 보인다면 margin-bottom값 추가!

img{margin-bottom:20px;}

근데 굳이, margin-right, bottom등으로 나눠서 표현하지 않아도 되고 margin:20px;로 줘도 된다. 이렇게 주도록 하자. 

이 상황에서 <p>태그를 하나 더 추가해 보자. 그럼 다음처럼 된다.

<p>태그 추가

이 상태에서 <p>에 CSS 속성값을 다음과 같이 추가해보자.

 

p{

  border: 10px solid gray;

}

 

그 결과는 다음처럼 사진이 두 <p>의 영역을 침범하는 것처럼 보인다.

p{   border: 10px solid gray; }

여기서, 첫 번째 <p>태그는 그대로 두고, 2번째 <p> 태그를 오른쪽에 있는 이미지를 피해가지 않고 그냥 자기의 원래 위치를 고수하도록 만들고 싶다면?

 

먼저, 일반적으로 이미지에 floating 효과가 적용되면 뒤에 오는 엘리먼트들은 모두 이 이미지를 피해가도록 되어있다.

그럼 피해가지 않도록 하고 싶은 엘리먼트는 우째해야하냐?

ex) <p style="clear: both;"> 이러면 그 결과 값은 다음과 같다.

2번째 <p style="clear: both;">

즉, 저런 값을 주면 2번째 <p>가 이미지를 피해가지 않는다!

 

이 ‘clear’에 올 수 있는 값은 both, left, right 등이 있는데, 이때, left로 하면 clear 속성이 먹히질 않는다. 왜?? img에 적용된 floating의 효과가 right로 되어있을 때에만 clear도 right일때만 작용한다! 라는 의미이다. ★ 마찬가지로 img의 floating값이 left인 경우, <p>태그에 clear:right;라고 하면 clear가 작동하지 않는다.

 

저작자표시

'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글

flex box / vh(단위)  (0) 2021.03.15
[인프런/생활코딩] 섹션5. float (2) - holy grail layout  (0) 2021.03.04
[인프런/생활코딩] 섹션5. Multi column(다단) 기능  (0) 2021.03.04
[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인  (0) 2021.03.04
[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들?  (0) 2021.03.02
'프로그래밍 언어/CSS 공부' Related Articles more
Comments