[DF]니니의 킬링벌스

Flex 레이아웃 수평정렬을 하기 위한 속성 display: flex 1. flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않는다. 요소의 너비를 줄여 한 줄에 배치 wrap: 플렉스 요소의 여유공간이 없다면 다음줄로 넘김 wrap-reverse: 플렉스 요소의 여유공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김) 예제코드 플렉스 레이아웃1 1 2 3 2. flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 row: 기본값. 가로로 배치 row-reverse: 가로로 배치(반대로) column: 세로로 배치 column-reverse: 세로로 배치(반대로) 예제코드 플렉스 ..

👩‍💻❌🔫주석 단축키 안될 때 해결 방법: VScode를 사용하다가 주석 단축키인 Ctrl + /  안될 때 가 있는데, 이것은 한국어 입력기가 [한국어 한컴 입력기]로 설정되어있기 때문입니다. 주로 한컴이 설치되어있는 컴퓨터에서 생기는 문제라고 하네요.  1. VS code 활성화 상태에서 2. Ctrl + Shift 를 누른 후3. Shift만 뗍니다4. 한국어 입력기 표시창에서 [한국어 Microsoft입력기] 선택 (선택 따로 안하고 그냥 되기도 함)끗✨

다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-gap: 단과 단 사이의 여백을 설정 column-span: 단과 안에 포함된 요소를 다단편집에서 해제(all) 예제코드 다단 레이아웃 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum nulla dolorem velit aspernatur! Beatae quibusdam distinctio ipsum, iure aut, soluta quae numquam, labore tempo..

CSS position: 요소의 위치를 결정하는 방식을 설정 1. 정적 위치 지정방식 static position. 기본값 HTML 요소의 위치를 결정하는 기본적인 방식 단순히 웹페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2. 상대 위치 지정방식 relative position HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식 top, left, right, bottom 속성값을 사용하여 재설정 예제코드 상대 위치 지정 방식 상대 위치 지정 방식1 상대 위치 지정 방식2 상대 위치 지정 방식3 3. 고정 위치 지정방식 fixed position 웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치한다 뷰포트 기준으로 위치를 설정하는 방식 ..

css 디스플레이 웹페이지의 레이아웃을 결정하는 속성 block, inline, inline-block, none ✔️ visibility: hidden; -> visibility: visible; 예제코드 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성값을 hidden으로 설정 visibility 속성값을 hidden으로 설정 css폼 폼 요소의 스타일 설정 예제코드 폼 아이디: 비밀번호: 직업: 프로그래머 디자이너 학생 유튜버 학생 회원가입

박스 모델(Box Model) 모든 HTML요소는 박스 모양으로 구성된다 박스 모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 1. 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안녕 2. 패딩(padding) 내용과 테두리 사이의 간격 padding-top, padding-right, padding-bottom, padding-left padding: 위 오른쪽 아래 왼쪽 순으로 설정 div#padding { padding: 20px 50px 30px 10px; } 위20 오른쪽50 아래30 왼쪽10 div#padding { padding: 20px 50px; } 위 아래 20 오른쪽 왼쪽50 div#padding { padding: 20px; } 네방향 모두..

1. background 배경 속성을 한꺼번에 적용 background 파일위치 반복여부 위치 사이즈.... 2. background- color HTML 요소의 배경색을 설정 예제코드 css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure odit pariatur quisquam repudiandae at accusamus dignissimos veritatis sed dolor inventore cumque aut dolorum, doloribus cum debitis cupiditate recusandae ipsa repellendus. 3. background-image HTML 요소의 배경으로 나타날 배경이미지..

1. color 텍스트의 색상을 설정 기본값은 검정색 2. letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예) 안녕하세요. 오늘은 화요일.. 아직도? >안 녕 하 세 요 . 오 늘 은 화 요 일 . . 아 직 도 ? 3. word-spacing 텍스트 내에서 단어 사이의 간격을 설정 예) 안녕하세요. 오늘은 화요일.. 아직도? >안녕하세요. 오늘은 화요일.. 아직도? 예제코드 css 텍스트1 letter-spacing CSS의 letter-spacing 속성 테스트 word-spacing CSS의 word-spacing 속성 테스트 4. text-align 텍스트 수평방향 정렬을 설정(left, right, center, justify) 5. text-indent 단락의 첫 줄의 들여..

CSS에서 색을 표현할 수 있는 방법: 1. 색상 이름으로 표현 red, yellow, blue, salmon, ... 2. RGB 색상 값으로 표현 rgb(0~255, 0~255, 0~255) -> rgb(0, 0, 255) RED GREEN BLUE rgba(0~255, 0~255, 0~255, 0~1의 소수) ALPHA 3. 16진수 색상값으로 표현 #0000FF -> 파랑 00 00 FF -> 00F R G B

6. 자식 선택자 부모의 요소 하위의 자식요소의 스타일을 적용 body > p { color: deepskyblue; } 7. 자손 선택자 - 조상요소 하위의 모든 요소의 스타일을 적용 - 자손은 자식을 포함 body p { color: deepskyblue; } 한 칸 띄우면 자손임 예제코드 자식, 자손 선택자 네이버 구글 다음 네이트 8. 인접 형제 선택자 동일한 부모의 요소를 갖는 자식 요소들의 관계 연속된 동생 요소의 스타일을 적용 h2 + p { color: deepskyblue; } 9. 일반 형제 선택자 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용 h2 ~ p { color: deeppink; } 예제코드 형제 선택자 첫째 둘째 셋째 넷째 다섯째 여섯째 ..