1. display: block; 또는 display: inline-block; 설정한다. 2. 가로 길이 width/max-width를 명시한다. 3. white-space: nowrap; 공백 문자가 포함된 경우 줄바꿈 없이 한 줄 처리한다. 4. overflow: hidden; 해당 가로 길이를 초과하는 텍스트에 대해 잘라낸다. 5. text-overflow: ellipsis; 해당 가로 길이를 초과한 부분에 대해 줄임표(...) 표시한다.
목차 DOM 1-1. 문서 객체 1-2. 노드 요소 노드, 텍스트 노드 DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색 2-1. DOM 컬렉션 NodeList 2-1. DOM 탐색 프로퍼티 , , 2-2. 자식 노드 탐색 2-3. 형제 노드 탐색 2-4. 부모 노드 탐색 DOM 요소 탐색 요소 노드만 탐색 3-1. 자식 요소 탐색 HTMLCollection(숫자) 3-2. 형제 요소 탐색 3-3. 부모 요소 탐색 1. DOM 1-1. 문서 객체 DOM(Document Object Model)은 문서 객체 모델을 의미한다. HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있도록 만든다. 모든 노드 객체에 접근할 수 있는 요소 및 메소드를 제공한다. 1-2. 노드 요소 노드, 텍스트 노드 ❗..
목차 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..
목차 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"... } 연달아 작성할 수 있..
목차 선택자 1-1. 선택자 종류 1-2. 선택자 우선순위 모든 선택자(전체 선택자) 태그 선택자 아이디 선택자 클래스 선택자 속성 선택자 6-1. 속성값=특정값 일치 6-2. 속성값~=특정값 공백 전후 포함 6-3. 속성값|=특정값 - 이전 포함 6-4. 속성값^=특정값 시작 6-5. 속성값$=특정값 끝 6-6. 속성값*=특정값 어디든 포함 자손/후손 선택자 7-1. 자손 선택자 7-2. 후손 선택자 동위 선택자 8-1. 동위선택자A + 바로 뒤에 있는 선택자B 1개 8-2. 동위선택자A ~ 뒤따르는 선택자B 전부 반응 선택자 9-1. 선택자:active 클릭 9-2. 선택자:hover 마우스오버 9-3. cursor 속성 상태 선택자 10-1. input[속성:속성값]:checked 10-2. inp..
✅ 답안과 비교하여 스스로 HTML 문서 작성 개선점 짚어보기 완료(2022.02.10) [실습3]폼 관련 태그1. ✅ 답안에서는 에서 cols="20"을 굳이 작성하지 않은 모습이었다. 실제로 rows="3" 속성만으로 똑같이 출력되는 것을 확인했다. 또, 최상단에 '고객명'과 같은 텍스트들은 에 넣지 않고 그냥 바깥에 고객명 : 처럼 작성한 게 새로웠다. 내 문서에 굳이 바꿔적진 않았고, 이렇게도 작성이 가능하다는 것만 알아두고자 한다. 고객명 : 전화번호 : E-mail : 피자 선택 : 페퍼로니피자 하와이안피자 내인생피자 피자를 선택하세요 피자 사이즈 Small Medium Large 토핑 선택 베이컨 치즈 양파 버섯 희망 배송 시간 : 배송 시 요청사항 : [실습4]폼 관련 태그2. ✅ 중간에 ..
