이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
css에서 원을 만들어보자.
사실 삼각형을 만드는 것보다는 비교도 안되게 쉬운 난이도다.
물론 삼각형은 만드는것도 엄청 어렵거나 하진 않지만 원이 더 쉽다는 것이다.
사실 코드가 간단해서 전문을 담을 필요는 없지만 그냥 복붙하는 사람들을 위해서 준비했다.
솔직히 codpen 좀 귀찮다고 생각하는 사람도 있지 않은가?
원 만들기 참 쉽지 않은가?
항상 명심할것은 border-radius를 반드시 width와 height의 절반으로 해야한다는 점이다.
이만 지키면 원은 아주 쉽게 만들 수 있다.
과녁처럼 원에 원을 넣고 싶으면 flex display와 margin auto를 사용하면 또 손쉽게 만들 수 있다.
display와 amrgin auto를 이용하는게 왜 가운데 정렬이 되는지 궁금하다면 이 포스팅을 참조하도록 하자.
'Usage > WEB-HTML-CSS' 카테고리의 다른 글
| css지옥에서 탈출하자(13) - table에서 문자열 조정하기(word-break , word-wrap, white-space) (0) | 2019.05.08 |
|---|---|
| css지옥에서 탈출하자(12) - 반응형과 미디어 쿼리 완전 기초 (0) | 2019.04.18 |
| css지옥에서 탈출하자(10) - 현재 내가 얼마나 스크롤(scroll)했는지 부여주고 싶을 때, 진행도(progressed) 표시 (1) | 2019.02.19 |
| css지옥에서 탈출하자(9) - 스크롤바가 없는 스크롤을 만든다? (0) | 2019.02.17 |
| css지옥에서 탈출하자(8) - div에 transition을 줘서 부드럽게 애니메이션 효과로 움직이기 (0) | 2019.02.14 |