목록전체 글 (121)

열정 실천

[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
[HTML 004] 블록과 인라인

html의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정하는 display 속성을 가진다. display 속성의 값으로 inline과 block, 그리고 두 가지의 장점을 합친 inline-block이 있다. inline ✔ html 태그의 내용 만큼만 차지 ✔ 태그를 연달아 썼을 때 한 줄에 나타남 ✔ width, height로 크기 조절을 할 수 없음 ✔ 좌우 margin, padding만 적용 가능 (상하는 불가능) 📌인라인 태그 종류 , , , , block ✔ 해당 라인의 모든 너비를 차지 ✔ 태그 요소마다 줄을 바꿈 ✔ width, height, 상하좌우 margin, padding이 모두 가능 -> 레이아웃을 작업하는 요소로 적합 ✔ 내용과 별개로 자신의 영역을 가짐 📌블록 ..
개발 공부/HTML 2023. 3. 23. 14:22
[CSS 004] 색상 속성

CSS가 색상을 표현하는 3가지 방법 1. 색상 이름 ========색상 이름 찾기 사이트======== CSS/Properties/color/keywords - W3C Wiki Color keywords Basic Colors Named Numeric Color name Hex rgb Decimal black #000000 0,0,0 silver #C0C0C0 192,192,192 gray #808080 128,128,128 white #FFFFFF 255,255,255 maroon #800000 128,0,0 red #FF0000 255,0,0 pu www.w3.org ================================= 2. RGB (RGBA) 코드 3. 16진수 색상 코드
개발 공부/CSS 2023. 3. 18. 20:26
이전 Prev 1 ··· 8 9 10 11 12 13 14 ··· 21 Next 다음