여러 div를 몽땅! 가로 가운데 정렬 | CSS 가운데 정렬 특집 | 빔캠프
Вставка
- Опубліковано 10 лют 2025
- 가운데 정렬 두번째 시간입니다!
display: inline-block으로 가운데 정렬 구현하기!
영상에는 설명이 빠졌지만 inline-block을 IE6~7에서 쓰려면
그냥 display: inline하면 됩니다 :)
잘못된 정보는 꼭 알려주세요! 더불어 같이 공부하면 좋겠습니다 :)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
빔캠프는 다양한 온/오프라인 컨텐츠를 제공하고 있습니다 :)
🔥 CSS 첫걸음 온라인 | Live Streaming + Discord
veamcamp.com/c...
"CSS 첫걸음 온라인"
CSS에 집중한 온라인 라이브 스트리밍 강의입니다.
CSS는 누구든지 쉽게 입문할 수 있는 개념이지만, 실제 마음에 드는 웹페이지를 디자인 하려면 생각보다 많은 난관이 기다리고 있습니다! 부분 부분 알고 있거나 기초부터 제대로 접근하고 싶은 모든 분들을 위한 입문 캠프입니다.
🎉 CSS에 특히나 진심입니다.
✔ CSS의 본질 이해로부터 시작하는 웹디자인
✔ 화려한 웹디자인을 위한 작고 단단한 핵심 아이디어
✔ 단순 이론 설명이 아닌 다양한 실용 예시들을 통해 다각도로 접근
🎉 왜 라이브 스트리밍 방식인가요?
✔ 온라인 방식만으로도 충분히 집중도를 유지 시키기 위해.
✔ 여러분들의 동기부여를 최대한 유지 시키기 위해.
✔ 빠른 질문과 답변을 위해.
🔥 CSS 첫걸음 온라인 | Live Streaming + Discord
veamcamp.com/c...
![[ㄱ] 가운데정렬 centering in css | 코딩가나다 | 빔캠프](http://i.ytimg.com/vi/iP8CqsSdXT0/mqdefault.jpg)
와....백엔드 공부중이라
css를 잘 몰라 가운데 정렬방법이 막연하게만 느껴졌는데
이 신비한 유튭 알고리즘이 나를 이곳으로 이끌었다.
와....레알 소름
선 구독, 후 시청 ㅋㅋ
@@Dddd-be9jq 도움이 되어 아주 좋습니다 ㅎㅎ
막힌부분 모두 해소시켜주는 영상이에요 최고🙌 선생님 강의 얼른 다 보겠습니다!!!
도움이 되어 기쁘네요 ㅎㅎ 가로 배치에 관해서는 최신 플렉스박스도 추천합니다 ㅎㅎ
항상 프론트엔드 짤 때마다 정렬때문에 헤맸는데... 정말 유용하고 깔끔한 설명입니다! 감사해요
감사합니다 :) 도움이 되어 기쁘네요 ㅎㅎ
진짜 저를 살리셨어요
ㅎㅎ 다행입니다! 요즘은 가로배치에 플렉스 박스도 많이 사용하고 있으니 공부 또 추천 드립니다 ㅎㅎ
최고입니다. 정주행 할게요!!
화이팅입니다!!! 댓글 감사합니다 :)
시간이 없는 중요한 순간이었는데 덕분에 가운데 정렬을 할 수 있었습니다 ㅠㅠ
Heejeong Kim 아 그런순간이 어떤 순간인지 공감합니다 ㅎㅎㅎ 뿌듯하네요
프로젝트하다 헷갈렸던 부분 찾아서 왔는데 감사합니다 :)
도움이 되어 기쁩니다 :)
좋은 강의 감사합니다
응원해주셔서 감사합니다 :)
css에 배우면서 위치 배정을 잘 몰랐는데 유튜브영상 순서대로 보고있으면서 많이 배우네요 감사합니다
네 댓글 감사합니다 :)
우와…인라인블록할때 4px씩 왜 떨어지는지 원리까지 설명해주셔서 감사합니다! 넘나리 강의내용 알차구 좋아요 ㅠㅠ
도움이 되었다니 기쁘네요 :)
늘 유익한 정보 감사합니다~~
아유 시청해주셔서 제가 감사하죠 ㅎㅎ
정말 감사합니다. 과제중에 계속 이미지들이 가운데 정렬이 돼있으면 수직으로 나열되있고, float 을 써버리면 왼쪽에 붙어서 죽어도 가운데로 안가더라구요..
여태 못찾아서 고생했는데 빔캠프님 덕분에 해결했습니다.
Eric Hobin Yoo 네 댓글 감사합니다 :) 도움이 되었다니 기쁘네요
강의 감사 합니다^^
도움이 되었으면 하네요 :)
가운데 정렬이 안되서 엄청 삽질하고 있었는데 단번에 해결이 되었습니다ㅎㅎ 감사합니다!
도움이 되어서 기쁘네요 :) 댓글 감사합니다!
삽질이란 표현이 너무 와닿네여^^
저도 그랬습니다^^
독학하다가 막혔던 부분을 속시원히 알아갑니다 감사합니다ㅠㅠ
+김극비 도움이 되었다니 기쁩니다 ㅎㅎ
정말 실용적인 내용이라고 생각합니다. 잘 배워갑니다.
댓글 감사합니다 :)
좋은 강의 영상 감사합니다ㅠㅠ잘 보고 가요~!
네 댓글 남겨 주셔서 감사합니다 :)
하루종일 낑낑대고 있었는데 감사합니당....
yu yu 도움이 되어 기쁘네요 :)
제가 짜본 코드인데 실제로 하려니 안 되네요 ㅠㅠㅠㅠ 어떤 문제인지 알 수 있을까요??
.wrap {
width: 600px;
height: 200px;
margin: 0 auto;
background: red;
}
.box {
width: 100px;
height: 100px;
line-height: 100px;
background: green;
color: #fff;
text-align: center;
float: left;
margin: 0 10px;
}
box1
box2
box3
어떤 결과를 얻고 싶으신건지 알려주세요 ㅎㅎ
Wrap 하고 box를 바디 중앙으로 정렬하려고 합니다 !! 빔캠프님하고 같은 결과가 나오면 좋겠는데 뭐가 문제인 건지 모르겠어요 ㅜㅜ
float로 되어있으면 왼쪽 또는 오른쪽으로만 정렬 됩니다. float를 지우고 display:inline-block으로 적용해야하겠네요. 부모에게 text-align: center도 필요하구요
Parabéns, ótimo trabalho!
Obrigado por assistir!
Vou divulgar seu trabalho para os desenvolvedores que eu conheço. Muito bom!
Muito obrigado!
감사합니다 만드면서 스트레스받은 게 풀렸습니다.. ㅜㅜ
다행입니다! 최근에는 flexbox가 더 자주 쓰이니 추가 공부를 추천 드립니다 :)
10:00
16px 기준해서 띄어쓰기가 4px 이라는 계산은 어떻게 해서 나오는 값인건가요?
기준 폰트사이즈가 달라지면 띄어쓰기 px도 달라지기 때문에 유지보수에 어려움이 있겠죠?....
그렇다면 선생님은 어떤 방법으로 간격을 붙이시는 걸 추구하시나요?
통상적으로 폰트사이즈의 1/4 크기로 보는데요. 생각해보면 한칸 띄어쓰기의 크기는 폰트 종류에 따라 제각각일 수 밖에 없습니다. 어떤 폰트는 글자의 폭이 좁고, 어떤 폰트는 넓기 때문에 그에 맞춰 한칸 띄어쓰기의 크기도 결정되어야 자연스럽겠지요. 여러 이유로 한칸 띄어쓰기의 크기를 단정 짓는 것은 좋은 방법이 아니며, 붙이려는 시도도 그다지 좋은 방법이라고 보지 않습니다 :) 저 같은 경우는 그러한 간격이 있어도 자연스러울법한 디자인에만 inline-block을 활용합니다!
@@veamcamp 선생님의 모든 CSS강의 정주행중입니다:) 굉장히 이해가 쉽고 해서, 너무 좋네요!! 답변도 빨라서 너무 감사합니다!!ㅎㅎ
감사합니다!
김나율 저도 감사합니다! 화이팅!!
div에 float:left 줬더니 계속 가운데 정렬이 안됐는데 이 영상보고 해결했습니다 ㅠ 감사합니다 ㅠㅠ
네 도움이 되었다니 기쁩니다 ㅎㅎ
Div 가운데 정렬을 적용 시킨 후
그 아랫칸에다가 사진을 쭉 나열하고 싶은데
Div 영역이라 가운데 정렬밖에 안되는데 방법이 있을까요?
아랫칸은 별도의 div로 시작해야할 듯 합니다 ㅎㅎ
@@veamcamp 그러면 css 없이 div만 써도 되나요?
새로운 div에 css작업을 또 하셔야겠지요. :)
박스를 플롯으로 가로배열했을경우 패딩으로 박스의 좌우 공간이 안떨어지는데 박스는 마진으로 좌우간격 띄워줘야하나요ㅠㅠ?
네 공간이 떨어지려면 margin을 이용합니다!
감사합니다!
이런 방법이 ㅜㅜ
그동안 너무 힘들게 살았네여
제발 수업 시간에 기억나얄텐데
응원합니다!!
컨테이너 안에 있는 div 상하 좌우 가운데로 하고 싶은데 top이 중복이 돼서 자식과 부모가 붙어있어요ㅠㅠ이런 건 어떻게 해결 하나요...
top이 중복되었다는 상황이 잘 이해가 안가는데요. 좀 더 구체적인 상황을 알려주시면 좋겠습니다 :)
margin 0 auto : 가운데정렬 ㄷㄷ
감사합니다.
댓글 감사합니다🤗
감사합니다
댓글 감사합니다 :)