Web/CSS

[ Flexbox (Flexible Box Layout) ]요소들을 한 방향(행 또는 열)으로 정렬하기 위한 레이아웃 방식가로/세로 정렬을 쉽게 구현부모 요소를 flex container, 자식 요소를 flex item이라고 함display:flex;1. 부모요소(Flex Container) 속성.container{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: space-around;}속성설명예시displayflex 레이아웃 적용display: flex;flex-direction배치 방향flex-direction: row;flex-dir..

[ Media Query (미디어 쿼리) ]화면 크기, 해상도, 기기 종류 등 미디어 조건에 따라 다른 CSS를 적용하는 기능반응형 웹(Responsive Web) 구현의 핵심@media 규칙을 사용@media (조건) { /* 조건이 참일 때 적용할 CSS */}1. 미디어 타입타입설명all모든 기기 (기본값)screen화면 (모니터, 스마트폰, 태블릿 등)print인쇄/* default.css 화면 미디어 타입일 때 모든 요소에 sans-serif 폰트 적용 */@media screen { * { font-family: sans-serif; }} 2. 주요 미디어 특성 (조건)특성설명예시width뷰포트 너비(width: 768px)max-width최대 너비 이하(max-width: 768px)m..

1. Transform (변형)요소의 위치 이동, 회전, 크기 변경, 기울이기 등을 수행하는 속성레이아웃에 영향을 주지 않고 시각적으로만 변형여러 변형을 한 줄에 함께 적용 가능함수설명예시translate(x,y)요소 위치 이동translate(100px, 50px)translateX(x)X축 이동translateX(100px)translateY(y)Y축 이동translateY(50px)scale(n)요소 확대 / 축소scale(1.5)scaleX(n)가로 확대scaleX(2)scaleY(n)세로 확대scaleY(0.5)rotate(angle)회전rotate(45deg)skew(angle)기울이기skew(20deg)skewX(angle)X축 기울이기skewX(20deg)skewY(angle)Y축 기울이기..

1. 웹 폰트란?웹 페이지에서 사용하는 글꼴을 서버에서 다운로드하여 화면에 표시하는 기술사용자 PC에 폰트가 없어도 웹사이트에서 폰트를 내려받아 사용웹페이지 접속 → 브라우저가 폰트 파일 다운로드 → 해당 폰트로 화면 출력 2. 웹 폰트 종류요즘 웹에서는 woff / woff2를 가장 많이 사용종류설명풀네임woff웹 표준으로 권장되는 웹 폰트 포맷Web Open Font Formatttf일반적으로 많이 사용하는 TrueType 폰트TrueType FonteotInternet Explorer에서 사용하던 폰트Embedded OpenTypesvg벡터 기반 폰트 (현재 거의 사용 안함)Scalable Vector Graphicswoff2WOFF보다 압축률이 높은 최신 웹 폰트Web Open Font Forma..

[ CSS 치수 단위 (Length Unit)]CSS에서 단위는 무조건 적기단위설명%부모 요소 기준 비율ininch (1 inch = 2.54cm)cmcentimetermmmillimeterem현재 폰트 크기 기준 배수ex폰트의 x-height 기준 (보통 글자 크기의 절반)ptpoint (1pt = 1/72 inch)pcpica (1pc = 12pt)pxpixel (화면의 한 점)p { font-size:16px; margin:10px; width:50%;} [ CSS 색상 표현 방식 (Color) ]방식설명예시color name색 이름 사용color: red;rgb(r,g,b)RGB 값을 10진수로 표현rgb(255,0,0)rgb(r%,g%,b%)RGB 값을 퍼센트로 표현rgb(100%,0%,0..

1. 폰트 (Font)font 속성font-style, font-variant, font-weight, font-size, line-height, font-family, caption, icon, menu, message-box, smallcaption, status-bar 등을 지정,값을 지정할 때 순서를 지켜야함.속성설명font여러 폰트 속성을 한 번에 지정font-family글꼴 지정font-size글자 크기font-style글자 스타일 (italic 등)font-variant작은 대문자 표시font-weight글자 두께p { font: italic small-caps bold 16px Arial;}p { font-family:Arial; font-size:16px; font-weight:b..

[CSS]HTML 문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것선택자 { 속성명1:속성값1; 속성명2:속성값2; ...}속성값에 공백이 포함된 경우 : quote(“”) 사용 [CSS 적용 방법]1. 외부 스타일 시트 (External Style Sheet)별도의 CSS 파일을 만들어 HTML에 연결하는 방식보통 /* /css/default.css */h1 { color: blue;}2. 내부 스타일 시트 (Internal Style Sheet)HTML 문서 안에 CSS 스타일을 직접 작성할 때 사용하는 태그보통 3. 인라인 스타일 (Inline Style)HTML 태그 안에 style 속성으로 직접 스타일 지정해당 요소에만 적용제목⚠️ 스타 우선순위- !important..