1. display: block; 또는 display: inline-block; 설정한다. 2. 가로 길이 width/max-width를 명시한다. 3. white-space: nowrap; 공백 문자가 포함된 경우 줄바꿈 없이 한 줄 처리한다. 4. overflow: hidden; 해당 가로 길이를 초과하는 텍스트에 대해 잘라낸다. 5. text-overflow: ellipsis; 해당 가로 길이를 초과한 부분에 대해 줄임표(...) 표시한다.
수업시간에 CSS 선택자(Selector) 연습용으로 추천해주신 게임이었다. 총 32단계 레벨로 구성돼 있어 입문자 입장에서 게임 통해 자연스럽게 접하고 정리하기에 좋았다. CSS Diner CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io
💡 HTML5/CSS3 활용해 개인 홈페이지 제작하기 제작기간 2.14(월)~2.15(화) 양일간 발표일 2.16(수) 오후 3시 💻 홈페이지 구성 HOME : 메인 ABOUT : 관심사(favorites) 소개 BLOG : 그리드(grid) 형식의 게시글 목록
목차 transition 1-1. transition-property 1-2. transition-duration 1-3. transition-timing-function 1-4. transition-delay 1-5. transition transform @keyframes 3-1. from~to 시작 지점-종료 지점 두 개만 있는 경우 3-2. 0%~100% 중간 작업이 있는 경우 1. transition transition-property 적용할 속성 선택 transition-duration 진행시간 선택 transition-timing-function 순차적 속도 선택 transition-delay 트랜지션 지연시간 선택 transition 트랜지션 속성값 일괄 설정 트랜지션(transition)..
목차 width/height 블럭/인라인 2-1. display 속성 2-2. 블럭 레벨 요소 2-3. 인라인 레벨 요소 여백 3-1. padding border-content 사이 간격 3-2. margin 요소들간 간격 포지셔닝 4-1. box-sizing 4-2. position 4-3. visibility 4-4. z-index 4-5. float flex 5-1. display: flex; 5-2. flex-direction 5-3. flex-wrap 5-4. justify-content 수평 방향 맞춤 5-5. align-items 수직 방향 맞춤 grid 6-1. display: grid; 6-2. grid-template-columns 6-3. gap 6-4. grid-template-ro..
목차 border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: double; border-style: groove; border-style: inset; border-style: outset; border-style: ridge; border-style: solid; 두께 스타일 색상값; ✅ MDN Web Docs 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style 1. border-style: none; .border-test { border-style:none; } 2. border-style: hidden; .bord..
목차 CSS 색상 표현 1-1. 영문 색상 이름 1-2. RGB값 기준 16진수 1-3. RGB/RGBA 1-4. HSL/HSLA 배경 스타일 2-1. background-color 2-2. background-clip 2-3. background-image 2-4. background-repeat 2-5. background-size 2-6. background-position 2-7. background-origin 2-8. background-attachment 2-9. background 1. CSS 색상 표현 1-1. 영문 색상 이름 영문으로 정의된 색상 이름으로 표현한다. 표현 방법 : red, black, blue 등 1-2. RGB값 기준 16진수 RGB값 기준으로 생성된 16진수 헥스 코..
목차 list-style-type 1-1. 원 모양 불릿(기본) disc; 1-2. 빈 원 모양 불릿 circle; 1-3. 채운 사각형 모양 불릿 square; 1-4. 불릿 없애기 none; list-style-type 2-1. 숫자 1로 시작하는 10진수 decimal; 2-2. 앞에 0이 붙는 10진수 decimal-leading-zero; 2-3. 소문자 로마 숫자 lower-roman; 2-4. 대문자 로마 숫자 upper-roman; 2-5. 알파벳 소문자 lower-alpha; 2-6. 알파벳 대문자 upper-alpha; list-style-position 불릿/숫자 위치 지정 3-1. 목록 기호 들여쓰기 inside; 3-2. 목록 기호 내어쓰기 outside; list-style-im..
목차 글꼴 속성 1-1. font-family 1-2. font-size 1-3. font-weight 1-4. font-variant 1-5. font-style 1-6. font 텍스트 스타일 2-1. color 2-2. text-decoration 밑줄, 윗줄, 취소선 2-3. text-transform 영문자 대소문자 변환 2-4. text-shadow 텍스트 그림자 2-5. white-space, letter-spacing, word-spacing 공백 처리, 장평 조정, 자간 조정 문단 스타일 3-1. direction 출력 방향 3-2. text-align 텍스트 정렬 3-3. text-justify 양쪽 정렬 중 자간 조정 3-4. text-indent 문장 들여쓰기 3-5. text-ov..
목차 1-1. 외부 스타일시트 1-2. 웹 폰트 추가 CSS 단위 구성 2-1. 상대 크기 2-2. 절대 크기 1. 1-1. 외부 스타일시트 ❗ 앞서 개발을 완료한 시점에는 반드시 '외부 스타일시트'로 분리해야 함을 강조해왔다: [CSS3] 스타일 | 스타일시트 | CSS 개요 .html의 font style test #web-font { font-family : "Festive", cursive; } 웹폰트추가①. 사이트에서 제공하는 태그 그대로 가져와 .html 문서의 에 작성한다. 웹폰트추가②. .css 파일에 선택자 { font-family : 폰트이름; } 형식에 맞춰 스타일을 반영한다. font-family 속성은 { "폰트이름A", "폰트이름B", "폰트이름C"... } 연달아 작성할 수 있..
