CSS 가로 정렬? inline-block과 float중 어떤 것을 써야 할까? | CSS 갈증해소 프로젝트 OACSS | 빔캠프

[@user-corqkdwndls]

제가 마침 궁금해 하던 float와 display inline-block를 잘 설명해주셨네요. 감사합니다.

[@veamcamp]

도움이 되어 기쁩니다 :)

[@zeroway-m4x]

최고의 강의 입니다.

[@veamcamp]

감사합니다 :)

[@나는도깨비]

초심자가 언제라도 궁금해할 수 있는 내용들을 미리 파악하고 알려주셔서 정말 많은 도움이 됩니다. 감사합니다!

[@veamcamp]

도움이 되어 기쁩니다! 댓글 남겨 주셔서 감사합니다 :)

[@펭옥수수]

초보의 입장에서 궁금할 것 같은 내용들을 잘 정리해서 말씀해 주셔서 보는 내내 감동받았습니다~ !! ㅋㅋㅋ 감사합니다~!

[@veamcamp]

좋게 봐주셔서 감사합니다 :) 힘이 납니다!

[@박금례-d8p]

쌤 강의 최고입니다

[@veamcamp]

감사합니다 :)

[@zzallangee]

최고대박...하나하나 다보는중이에요ㅜㅜ정말 강의가 너무깔끔하고 핵심만 쏙쏙이에요!!

[@veamcamp]

양짤랑 감사합니다 ㅎㅎ

[@handle1136]

차분하다니 동의할 수 없어 ㅋ.. 얼마나 파이팅 넘치시는 분인데! 주말 쉬고 강의 잘 보고 가요^^ 감사합니다.

[@veamcamp]

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 네 그래요! 한낱 픽셀들의 집합(동영상) 따위론 제 열정을 표현 할 수 없지요. 뭐든지 직관이 최고입니다 ㅋㅋㅋㅋ 댓글 감사합니다잉! 화이팅!!

[@ahnmikey]

오랜만에 동영상이 올라왔네요.ㅎ 잘보고있습니다.

[@veamcamp]

네 오랫만입니다 ㅎㅎ 응원 감사합니다!

[@su-lk7gp]

정말 명쾌하네요. 둘의 속성을 이해하고 갑니다. 구독했어요!!

[@veamcamp]

구독 감사합니다! ㅎㅎ

[@Uts3q2]

기가막히네요 무릎을 탁 치고갑니다.

[@veamcamp]

ㅎㅎㅎ 기가 막히게 감사합니다 :)

[@hyunsun9270]

영상 잘봤습니다. 좋아요와 구독 누르고 갑니다^^

[@veamcamp]

감사합니다 :)

[@chans9055]

좋은 영상 너무 감사드립니다, 잘 모르면서 써왔던 부분 확실히 배워서 갑니다. 감사합니다 :)

[@veamcamp]

송찬규 네 요 부분이 가장 아리송하지요 ㅎㅎ 도움이 되어 기쁩니당

[@kthdd1234]

선생님 감사해요ㅎㅎ float 이 기능 가르쳐주셔서 덕분에 css문제 해결했어요!!

[@veamcamp]

댓글 감사합니다 :) 뿌듯하네요 ㅎㅎ

[@jeffrey0208]

감사합니다 🙏

[@veamcamp]

댓글 감사합니다 :) 도움이 되었으면 하네요!

[@nhy2458]

그동안 막혔던 문제가 조금 이해가 되는 강의였습니다.목소리도 차분하시고 강사님이 진짜 앞에서 강의하는 느낌이네요흡연을 안하시는데 목이 걸걸하신거보니 유자차같은거 따듯한거 많이 마시면 좋겠네여

[@veamcamp]

네 목소리가 좀 잠겨있지요 ㅎㅎ 좋은 의견 감사합니다!

[@timtam709]

다른 강의들보다 훨씬 명쾌하게 설명해주신 덕분에 드디어 이해가 갔습니다!!감사합니다 float 때문에 머리 터질것같아요... 맘편히 flexbox로 쓰고싶은데 흑흑

[@veamcamp]

도움이 되어 기쁩니다 ㅎㅎ float 참 재미있는, 이상한 속성이죠 ㅎㅎ그래도 이제 ie지원 종료되면서 반드시 float로 해야하는 상황이 많이 줄어든것 같아요

[@gkgk8481]

Inline-block 사이에틈 아무영향안끼치고 완벽히 없앨수있는방법 있어요ㅎㅎ

[@veamcamp]

오 방법을 공유해주시면 감사하겠습니다 :)

[@gkgk8481]

맞는방법인진모르겠는데 화면상으로보이기엔 Div사이에 주석넣으면 되더라고요ㅋㅋ

[@gkgk8481]

asdasdasdasd

[@veamcamp]

@@gkgk8481 신박한 방법이네요. 주석으로 여러줄을 한 줄처럼 만든것이네요 ㅎㅎㅎ

[@seungtaekoh87]

돌아오신건가요? ^^ 좋은 강의 감사합니다. 잘 봤습니다.

[@veamcamp]

환영해주셔서 감사합니다 :)

[@MolBiya]

선생님 overflow속성을 공부하고자 들어왔다가 살짝의 이해부족으로 인해 float속성을 들으러 왔습니다 float가 애초에 가로배치를 위한 css가 아니기때문에 예외적인 상황이 발생할 수 있고 이 상황으로 부모태그의 높이가 0이 되는걸 알 수 있었습니다 이때 여러가지 방법으로 이 상황을 해결할 수가 있는것을 알 수있었습니다 그런데 .클래스명:after{content:" ";display:block;clear:both} 이 float해제 구문을 만들어서 부모태그에 넣어줬을때 어떤 원리로 동작하는지에 대해서 따로 알 수 있을까요? 제가 생각한것은 이 클래스의 after 컨텐츠가 들어갈 공간이 display:inline속성이기때문에 display:block을 넣어줌으로써 가로세로 너비설정을 하게 만드는 원리? 라고 생각해보고, 그리고 clear:both는 양쪽으로 붙는 float속성을 취소한다고 알고있는데 여기서부터 생각하다가 무너졌습니다...

[@MolBiya]

display:block을 사용한 이유 : content는 태그가 아니고 css에 적어주는 css속성이기 때문에 display:block를 넣어줌으로써 태그처럼 사용하기 위함 이라는 설명도 있어서 다 맞는소리일까요?

[@veamcamp]

네 말씀하신대로 가상요소는 인라인 요소이기 때문에 clear속성을 적용 시킬 수 없습니다. 그리하여 display: block 이 필요한 것입니다. developer.mozilla.org/ko/docs/Web/CSS/clear 이 주소 아랫쪽을 보시면 "적용대상" 에 block-level elements 라고 명시되어있는 것을 확인 하실 수 있습니다. :)

[@veamcamp]

말씀하신대로 content: 는 CSS의 속성입니다. 그런데 display: block을 넣어서 태그 처럼 사용한다는 말은 이상하게 들리네요. 가상요소는 인라인 요소입니다. 이미 하나의 요소인 상황입니다. 태그와는 관계가 없습니다. "태그"와 "요소" 이 두가지 용어를 별개로 정리하시면 이해하는데 도움이 될 수 있습니다. :)

[@MolBiya]

@@veamcamp 항상 친절한 설명 감사드립니다 css공부하는데 정말 가뭄의 단비같은 존재십니다...

[@힘없는염소]

안녕하세요! 선생님 언제나 좋은 영상 감사합니다. 질문이 하나 생겨서요.. display: grid IE에서 쓰려면 각각의 column 요소를 지정해 줘야 하더라구요..ㅠㅠ column의 갯수를 알수 없기 때문에 각각 nth-child로 지정해줄순 없는 상황인데.. 혹시 float속성으로 grid처럼 쓸수 있는 방법이 있을까요?? 감사합니다. ^^

[@veamcamp]

안녕하세요! float로 만들어진 그리드는 여러 한계가 있긴 하지만 적당히 쓸 만 하답니다 ㅎㅎ 빔캠프 영상에는 아직 없지만 좋은 블로그 글을 찾아서 공유합니다! 아주 친절한 설명이네요 참고하셔요 www.beautifulcss.com/archives/1368

[@이종민-s2j]

브라우저를 고려하지 않고 레이아웃을 잡을 때는 이제 flex나 grid로 해결하면 될까요? 아니면 아직도 레이아웃 부분에서 float과 inline-block을 아직도 사용해야할 때가 있을까요??

[@veamcamp]

네 대부분의 상황에서 flex나 grid를 적극적으로 활용합니다 ㅎㅎ float는 이제 원래의 용도로 활용하시면 되고 (이미지 주위를 흐르는 텍스트 레이아웃) inline-block은 부모요소에게 flex 처리를 안하고 단순히 가로로 설정하고플때 한번씩 쓰게 됩니다.

[@paulnmk84]

정말 알찬 강의 감사 드립니다! 혹시 강의 진행중에 사용되는 프로그램 (왼쪽 코드 / 오른쪽 디자인) 정보를 알 수 있을까요?

[@veamcamp]

네 Brackets라는 에디터의 실시간 미리보기 기능입니다 ;) veamcamp.com/cookbook/brackets/ 위 포스팅을 참고해 주세요 ㅎㅎ

[@paulnmk84]

와우~ 엄청 빠른 답변 감사드립니다 : ) 좋은 저녁 되시고 항상 건강 하세요!

[@임채민-j3l]

선생님.header .nav_main{ border:10px solid green; text-align:center; } .header .nav_main li{ border:1px solid black; display:inline-block;입력후에 생기는 기본 마진을 기본 마진없이 사용할수 없을까요?

[@veamcamp]

임채민 좌우에 생기는 한칸 공간은 폰트사이즈에 비례하는 크기임으로 부모요소에게 font-size: 0 하는 작업을 하는 방법이 있고 하단에 생기는 공간은 vertical-align을 top으로 올려서 없애는 방법이 있겠습니다

[@임채민-j3l]

감사합니다 nav_main 에게 font-size:0 을 코딩하고 자식태그 li에 font-size를 코딩했더니 잘되네요 구독하고 잘보고있습니다 가끔 궁금증이 있으면 또 답글달아주시면 감사하겠습니다!

[@unoweb4438]

영상 잘봤습니다. 큰 도움이 되었습니다. 구독 좋아요 하고 갑니다. 앞으로도 좋은 강의 부탁드려요!! (_ _)

[@veamcamp]

네 감사합니다! 뿌듯하네요 :)

[@mcs2936]

헤더영역 메뉴링크버튼이나 메뉴만들때는 inline-block만쓰나요?

[@veamcamp]

메뉴 모양이나 특성이 매우 다양하기 때문에 inline-block 만 쓰인다고 보기는 어렵습니다. 최근에는 레이아웃을 위한 새 기술들이 보편화 되고 있는 중이니 flex나 grid 등도 관심가지면 좋겠습니다 :)

[@mcs2936]

@@veamcamp 메뉴만들때도 플렉스를쓸수있나요?

[@veamcamp]

@@mcs2936 네 그렇습니다 물론 자식 요소로는 a나 button을 활용합니다 :)

[@mcs2936]

@@veamcamp ul 안에 li a 이런요소에 속성을주는거죠

[@veamcamp]

@@mcs2936 가로 메뉴라면 ul에 flex를 적용하구요 a는보통 block으로 처리합니당

[@daniellee7119]

잘봤습니다~! 좋은 영상 감사합니다! 궁금한게 있는데 요소에 클래스명이 흰색글씨로 노출되는데 확장프로그램 사용하신건가요~?

[@veamcamp]

설명을 위해 자바스크립트를 이용하여 직접 제작하였습니다.:)

[@YG-qt1eb]

혹시 어떤 프로그램으로 코드쓰신건지 알수있을까요?? 파이참도 아니고 VS도 아니고.. 초보라 처음보는 프로그램인데 너무 편해보여서요!!

[@veamcamp]

브라켓스입니다 :) brackets.io

[@김수-x5v]

선생님 어떤 에디터 쓰고계시나요? 무료 에디터중에 괜찮은 에디터있을까요?

[@veamcamp]

저는 브라켓스 에디터를 쓰고 있습니다 :) brackets.io

[@veamcamp]

vscode가 대세인것 같아요 ㅎㅎㅎ

[@HOONYSOUL]

오........꿀팁

[@veamcamp]

댓글 감사합니다 ㅎㅎ

[@dbxnqm6868]

개성있는 개발자같으네요. 담배줄이시면 더 좋...

[@veamcamp]

담배 안피웁니다

[@sm841004]

@@veamcamp 목소리 때문에 하는 농담 같습니다^^

[@veamcamp]

Bong Song 네 그렇습니다 ㅎㅎ 목 관리 잘 해야겠네요

[@sm841004]

@@veamcamp 좋은 강의 항상 감사합니다(__)

[@veamcamp]

Bong Song 네 좋게 봐주셔서 감사합니다 :)