안녕쌉사리와용?
SsunDev 입니다리와리가리
정말 바쁘게 살다보니 평일에 글을 쓸 시간이 없군요...
참 인생이라는게 어렵습니다 ㅋㅋ
오늘 배워볼건 float 라는 기능입니다!
정말 설명하기 애매... 하고 뭐 않이궅이 말해보자면 옜날에 유행했던 기능(?) 이라서 잘 안쓰기도 하지만 그래도 알아야 하기때문에 배워야하긴 하고...
흠... 그렇다면 Go!
float 말 그대로 떠있다, 떠다니다 라는 뜻인데
이게 float입니다. 끝!
..
자 농담이고 일단 빠르게
css12.html, css12.css 만들어주시구요!
향상된뼈대랑 @charset 아시죠?
자 그다음에
<body> 테그 안에 <div> 하나 넣고 그 안에 <img> 와 <p> 테그를 넣어보도록 하겠습니다.
조금 복잡하죠?
다시 천천히!
<body> 테그안에
<div id="wrap"> 이건 보통 홈 페이지들을 만들때 전체적인 배경의 크기나 속성등을 정해주기 위해서 전체적으로 감싸는 테그를 쓴다고 앞서 설명드렸습니다.
그 다음 <div> 는 이번에 설명드릴 기능에서 필요하기 때문에 넣고
<img> 테그를 넣고 src경로 는 저번에 사용했던 바이올린을 켜는 집게사장 주소로 해주시면 됩니다.
<p> 문단을 채우는 내용은 즉석해서 글을 만들어주는 http://hangul.thefron.me/ 입숨사이트입니다 알죠?ㅎㅎ
자 float 를 배우기위한 사전 세팅이 완성되었습니다!
그럼 바로 alt + B 를 해볼까요?
자 div 테그와 같이 block 속성의 테그들을 사용할때의 문제점이 하나 있습니다.
바로 block 테그는 가로길이를 전부 다 차지한다는겁니다!
그래서 block 속성인 <img> 테그가 아래 inline 테그의 <p> 테그와 섞이지 못하고 한 줄씩을 차지하게 되는 문제가 있습니다.
보면 <div="wrap"> 도 div 이기 때문에 <body> 속성의 가로를 다 차지하고있고
그 안의 <div> 도 부모테그인 <div="wrap"> 의 가로만큼 다 차지하게되고
<img> 테그도block 속성이기 때문에 부모테그인 <div> 테그의 가로를 다 차지하고있는걸 보실 수 있습니다.
그래서 block 테그는 가로를 전부 다 차지한다 따라서 줄바꿈이 일어난다! 라고 생각하시면 됩니다.
(반면 span 테그와 같이 inline 테그는 각 요소들이 부모테그의 width 넓이를 안넘는다면 옆으로 붙습니다.)
그래서 이 div같은 block 속성의 테그들을 옆으로 붙여서 사용하기 위해서
float 라는 기능을 사용합니다 그러면 해당요소가 띄워져서(?) 다른 테그들과 옆으로 붙일 수 있게됩니다!
자 그래서 css페이지로 가서!
자 이렇게 class로 지정해두었던 f-img 와 f-paragraph를 위와같이 정의해보겠습니다.
이런 class나 id 이름들은 임의로 제가 지은거 아시죠? 이름에 어떤 특수한 기능이 들어간건 아닙니다
하여튼
f-img 에 float를 정의해보겠습니다.
일단 float 는 left right none 3가지가 있습니다. 좌로정렬 우로정렬 정렬안함!
바로 alt + b!
이렇게 block 테그인 <img> 테그가 위로 떠서 500px의 width를 가진 <p> 테그 안으로 섞여들어가게되었습니다.
<p> 테그 위에 <img> 테그가 있게되겠죠?
그래서 띄운다! 라고 하는 float 속성입니다
어렵지 않죠?
자 그런데 이 float 속성을 사용하기위해선 해당 float 를 감싸는 영역을 담당하는 부모코드가 꼭 필요합니다
그래서
img 테그를 감싸기위해 생 div 테그를 사용하였습니다.
이렇게 float 를 사용할 영역을 꼭 감싸주어야한다를 기억해주셔야합니다.
만약 <p> 테그에도 float를 선언해준다면?
<p> 테그도 표면에 떠서(?) div 테그 옆에 붙는걸 보실 수 있습니다!
보통은 옆에 붙지않는 block 속성에 float를 사용하게됩니다.
자 그렇다면 이번엔 float :none;을 알아보도록 하겠습니다.
이미지 속성의 정렬을 none 으로 두고
<p> 테그의 속성을 좌로 정렬하면 어떻게 될까요?
분명 html 코드에서는 <p> 테그가 <img> 테그보다 더 뒤에 써져있는데 화면에선 앞에 정렬되어버렸습니다.
이로 써 알 수 있는건
왼쪽정렬이 붙고 그다음에 none인 집게사장이 오게되었군요! 이렇게 위치가 바뀔수도 있다는겁니다!
이번엔 둘다 right 를 주어볼까요?
자 우측으로 둘 다 붙었습니다!!.... 만? 뭔가 이상하죠?
분명 html에서 img 테그가 먼저 작성이되고 p 테그가 작성이 되었기 때문에 집게사장의 우측에 <p> 테그가 와야 하는데
집게사장이 제일 먼저 우측으로 갔습니다.
그렇습니다 코드는 윗줄부터 순서대로 적용되기 때문에 img p 순서대로 우측정렬이 먼저 먹어서 순서가 바뀌게 된 것입니다!
이런 잔잔한 귀찮은것들이 있어서 다음시간엔 이밖의 다양한 불편한점에 대해서 알아보도록 하겠습니다!
그래서 오늘은 float 라는 속성을 배웠습니다.
그리고 left right none 에 대해서 실습해보았구요
그리고 float 속성은 항상 float 영역을 담당한는 감싸는 block 테그가 필요하다 라는것을 배웠습니다.
css도 거의다 끝났습니다.
물론 아직도 몇화나 더 많이 남긴 했는데 거의다 뭐 기본은 배운거같습니다.
항상 기다려주시는분들(계시다면...) 정말 감사합니다!
'1.비전공에서 취업까지!![HTML,CSS]' 카테고리의 다른 글
| 비전공에서 취업까지!! [27화] css 실기2편 40% 필기40% 태도점수20%!! -입니다.- (0) | 2023.05.14 |
|---|---|
| 비전공에서 취업까지!! [26화] float 의 문제점 -입니다.- (1) | 2023.04.16 |
| 비전공에서 취업까지!! [24화] 마진과 패딩입니다 -입니다.- (0) | 2023.04.02 |
| 비전공에서 취업까지!! [23화] 앞으로 개발에 사용될 유용한 기술 몇가지! -입니다.- (0) | 2023.03.26 |
| 비전공에서 취업까지!! [22화] CSS 빽그라운드를 꾸며보자!! -입니다.- (1) | 2023.03.19 |
