css (6) 썸네일형 리스트형 CSS word-break로 줄 바꿈 제어하기 💬 CSS word-break - 줄 바꿈 제어하기 웹페이지에서 텍스트 줄 바꿈은 UI/UX에 큰 영향을 줍니다. 특히 한글, 일본어, 중국어처럼 단어 경계가 명확하지 않은 언어에서는 더욱 그렇죠. ✅ word-break란? word-break: normal | break-all | keep-all | break-word; 🧩 속성값 설명 속성값 설명 normal 기본값. 브라우저 기본 규칙 사용. 영어는 띄어쓰기 기준, 한중일은 글자 단위 줄 바꿈 허용. break-all 단어 중간이라도 줄 바꿈. 영어, 한글, 일본어 등 모두 강제 줄 바꿈. keep-all .. 부드러운 애니메이션 효과를 주는 transition ✨ CSS transition과 :hover 같이 쓰는 법 transition은 CSS에서 스타일 변화에 부드러운 애니메이션 효과를 주는 속성이에요. 보통 :hover와 함께 써서, 마우스를 올렸을 때 자연스럽게 바뀌도록 만들죠! 🧠 기본 개념 transition: 변화 줄 스타일 지정 background-color: 어떤 속성을 변화시킬지 0.3s: 변화에 걸리는 시간 (0.3초) ease: 부드러운 속도 곡선 (처음 느리게 → 점점 빨라짐 → 다시 느리게) ❌ transition 없는 경우 button { background-color: #d1bfa7;}button:hover { background-color: #b9a68e;} → 변화가.. 미디어 쿼리 (반응형 웹 디자인) 미디어 쿼리(Media Query)는 CSS3에서 도입된 기능으로, 사용자의 디바이스 환경(화면 크기, 해상도, 방향 등)에 따라 서로 다른 스타일을 적용할 수 있도록 도와줍니다. 주로 반응형 웹 디자인(Responsive Web Design, RWD)을 구현할 때 사용. 미디어 쿼리 기본 문법 @media (조건) { /* 적용할 스타일 */ } 1. @media 키워드를 사용하여 미디어 쿼리를 선언 2. 조건에는 화면 크기, 해상도, 디바이스 유형 등의 조건을 입력 3. 조건이 충족될 경우 해당 스타일이 적용됨. 예제 1. 화면 크기에 따른 반응형 스타일 적용 /* 화면 너비가 768px 이하일 때 적용 */ @media (max-width: 768px) { body { backgrou.. 그리드 그리드 기본 개념 2차원(행과 열) 레이아웃을 동시에 제어할 수 있음 그리드는 부모 요소(그리드 컨테이너)와 자식 요소(그리드 아이템)로 구성됨. .grid-container { display: grid; /* 그리드 활성화 */ grid-template-columns: 1fr 2fr 1fr; /* 3개의 열 */ grid-template-rows: auto auto; /* 2개의 행 */ } display: grid → 그리드 컨테이너 활성화 grid-template-columns → 열(column)의 크기 설정 grid-template-rows → 행(row)의 크기 설정 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 그리드의 주요 속성 1. 행 / 열 정의 grid-template-columns & grid-t.. 컨테이닝 블록과 포지션 컨테이닝 블록 요소의 위치를 지정하는 기준임 absolute면 static을 제외한 가장 가까운 조상(부모 태그) 모든 태그들은 기본적으로 static 속성임 정적임. (배치가 위에서 아래로 왼쪽에서 오른쪽으로 흘러감) 이걸 포지션으로 바꿀 수 있는거임 1. position relative 상대적인거임 비교대상이 있어야됨. 내 원래 위치를 기준으로 함. top bottom left right로 움직임 2. position absolute 절대적인거임 화면을 기준으로 위치함 단 한가지 규칙이 있음. position 속성값이 static이 아닌 fixed, absolute, relative, sticky 인 조상에 붙음 부모 태그들에 static인지 쭉 묻다가 끝까지 없으면 body까지 감. 그래서 화면 끝.. css 기초 메모 a { color:red; } 여기서 a 는 Selector 선택자라고 칭함. Declaration 선언함 색깔이라는 Property 속성을 빨강이라는 Value 값으로 css 검색 팁 텍스트 크기를 어떻게 하고 싶을 때. - css text size property 결과 = font-size: 20px; 텍스트 가운데 정렬하고 싶을 때. - css text center property 결과 = text-align: center class 선택자 . id 선택자 # css 선언의 중복이 일어났을 때 선택자의 우선 순위 id class 그냥 태그 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 박스모델 이 태그들을 하나의 박스라고 생각하면 편함. 화면 전체를 쓰는 태그들은 블럭태그 block level eleme.. 이전 1 다음