목록개발 공부/CSS (10)

열정 실천

CSS보다 3배 빠르게 개발하기 : Tailwind

Tailwind 란?css 파일 따로 만드는 거 대신 간편한 유틸리티 클래스를 모아 놓은 것이 tailwind이다.   별도 CSS파일 사용 코드.button { background-color: #3b82f6; /* Tailwind의 bg-blue-500 */ color: white; /* Tailwind의 text-white */ padding: 8px 16px; /* Tailwind의 px-4 py-2 */ border-radius: 4px; /* Tailwind의 rounded */ transition: background-color 0.2s; /* Tailwind의 hover 효과 전환 */}.button:hover { background-color: #2563eb; /* Tailwin..
개발 공부/CSS 2024. 11. 21. 19:34
[CSS 009] FLEX 사용법 (여러가지 속성과 속성 값 모음)

가로 배치를 손쉽게 하기 위한 방법으로 Flex (Flexible Box, Flexbox)가 있다. float나 inline-block 을 이용했던 기존 방식보다 훨씬 편리하게 레이아웃을 배치할 수 있다. display: flex; 를 부모 요소에 선언하면 그 안에 있던 자식 요소들은 모두 flex 컨테이너의 item이 된다. 이 flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. 마치 inline 요소로 바뀌는 것과 같다 height는 컨테이너의 높이만큼 늘어난다. Flex container는 여러가지 속성이 있다. justify-content , align-items, flex-direction , flex-wrap , align-content, flex..
개발 공부/CSS 2023. 4. 6. 19:41
[CSS 008] CSS 단위 - px, %, rem/em, vw/vh

스크린 환경에서 크기를 나타내는 적합한 CSS의 단위로 px, %, rem/em, vw/vh 등이 있다. 이들은 크기가 절대 변하지 않는 절대적 단위와 상황에 따라 크기가 변하는 상대적 단위로 나뉜다. 상대적 길이 단위 요소는 상대적인 길이를 지정함으로써 다양한 기기에 적용할 수 있다. 따라서 웹 앱 이나 반응형 웹을 구현하기 위해서는 상대적 단위를 잘 알고 있어야 한다. 절대적 단위 px 스크린을 구성하는 하나의 작은 점 만약 화면의 크기가 1920*1080이면 가로 1920개, 세로 1080개의 px가 있는 것이다. ▶사용 예시 width : 100px height : 100px 상대적 단위 % 부모 요소를 기준으로 비례하여 크기를 설정 ▶사용예시 width : 50% (부모의 width가 100px..
개발 공부/CSS 2023. 3. 23. 21:48
[CSS 007] Box-sizing - 박스에 적용된 사이즈의 기준 정하기

Box-sizing box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다. content-box box-sizing: content-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함x ✔ 콘텐츠만 100px로 최종 너비는 120px(100px+10px+10px)이 된다. ❗❗ 생각했던 요소의 크기 + ( ) border-box box-sizing: border-box; width: 100px; padding: 10px; ✔ 요소 사이즈에 패딩과 테두리 포함o ✔ 테두리와 패딩까지 합해서 최종 너비 100px 기본값은 내용이 차지하는 영역에만 사이즈가 적용되는 content-box로 생각했던 크기보다 최종 크기가 커지게 하지 않기..
개발 공부/CSS 2023. 3. 23. 21:48
[CSS 006] Box Model (margin, border, padding)

Margin 테두리(border) 바깥 쪽 여백 ✔ 상하좌우 모두 margin : 10px ; ✔ 상하, 좌우 margin : 10px 20px ; ✔ 상,우,하,좌 (위쪽부터 시계방향) margin : 10px 20px 10px 20px ; ✔ 각각 지정하기 margin-top : 10px; margin-right : 10px; margin-bottom : 10px; margin-left : 10px; 📌 margin collapsing 마진 상쇄 margin-top과 margin-bottom이 각각 10px로 지정되어있는 두 태그(블록요소)가 20px 이어야하는 둘 사이의 마진이 실제로는 10px로 표현되는 현상이다. 이를 마진 상쇄(margin collapsing) 또는 마진 겹침(margin ov..
개발 공부/CSS 2023. 3. 23. 21:47
[CSS 005] 글자를 표현하는 다양한 스타일

color 색상 변경 font-style 폰트의 스타일 - 주로 기울임꼴 표현을 위해 사용(italic, oblique) font-weight 글자의 두께(100부터 900까지) font-variant:small-caps; 주로 대소문자를 강제로 변환하는 용도로 사용 (대문자는 그대로, 소문자는 크기가 작은 대문자로) font-size 폰트 크기 지정 font-family 글꼴 변경 text-align 글자의 정렬 방향 지정 (left, right, center) font-decoration 글자에 밑줄을 그을 때 사용 (underline, overline, line-through) 💡예시 💡결과 💡예시 💡결과
개발 공부/CSS 2023. 3. 23. 21:16
이전 Prev 1 2 Next 다음