$$config title: New Title keywords: - IT - ... $$ # display : block - block 속성은 무조건 한 줄을 점유하고, 다음에 오는 태그에 줄바꿈이 적용되어 수직정렬로 나열된다. - 높이는 최소화, 너비는 최대화 - 텍스트를 block 태그로 감싸면 텍스트의 크기의 크기가 어떻든 무조건 한 줄을 점유한다. - block의 속성을 가지고 있는 태그는 div, section, article 등의 태그가 있다. # block 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/WNjLbqz?default-tab=html%2Cresult&theme-id=dark $$ # display : inline - inline 속성은 공간을 최소화하여 공간 만큼만 점유하며, 줄바꿈을 하지 않고 수평정렬로 나열된다. - 텍스트를 inline 태그로 감싸면 텍스트의 크기 만큼만 공간을 점유한다. - inline의 속성을 가지고 있는 태그는 a, img, span 등의 태그가 있다. - width, height, line-height 적용이 불가능하다. - margin-top,bottom, padding-top,bottom 적용이 불가능하다. # inline 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/XWRoJLQ?default-tab=html%2Cresult&theme-id=dark $$ # display : inline-block - inline-block 속성은 block과 inline의 속성의 특징 모두를 가지고 있는 속성이다. - inline 속성처럼 공간을 최소화하여 한 줄로 나열되지만, block처럼 width, height, margin, padding 적용이 가능하다. - ※ 어떤 태그든 css에서 display 속성을 변경할 수 있다. # inline-block 코드펜 예시 $$codepen https://codepen.io/minicoding/embed/preview/NWjePZy?default-tab=html%2Cresult&theme-id=dark $$ # 관련영상 $$youtube x_i2gga-sYg $$ # 여기서 부터 지워서 사용해주세요. - 깔끔하게 지우는 방법 - 에디터의 7번째 줄 클릭 - Ctrl + Shift + End - Delete # 보기페이지 단축키 - 현재문서 수정하기 : Ctrl + E - 새 문서 작성하기 : Ctrl + Alt + E # 위캔 단축키(윈도우/MAC) - 뷰페이지로 이동 : Ctrl + E - 미리보기 모드 토글 : Ctrl-P / Ctrl-P - 앞에서 찾기 : Ctrl-F / Cmd-F - 뒤에서 찾기 : Shift-Ctrl-G / Shift-Cmd-G - 찾기상태에서 다음단어로 이동 : Ctrl-G / Cmd-G - 찾기상태에서 이전단어로 이동 : Shift-Ctrl-G / Shift-Cmd-G - 단어찾은 후 특정단어로 교체 : Shift-Ctrl-F / Cmd-Option-F - 단어찾은 후 특정단어로 교체(일괄) : Shift-Ctrl-R / Shift-Cmd-Option-F - 특정줄로 이동 : Alt-G # 차트 예시 $$chart ,20대,30대 2020년,200,210 2022년,300,310 type: column title: 한국 직장인 월소득 평균 x.title: 연도 y.title: 금액 y.min: 100 y.max: 2000 $$ # 밑줄 예시 --- # 글자 꾸미기 예시 **Select** *some* text and ~~choose a~~ color from the toolbar. # 테이블 예시 | 칼럼1 | 칼럼2 | | -- | -- | | 내용1-1 | 내용2-1 | | 내용2-1 | 내용2-2 | # 테이블 가로셀병합 예시 | 칼럼1 | 칼럼2 | 칼럼3 | | -- | -- | -- | | @cols=2: 내용1-1와 1-2 병합 | 내용1-3 | | 내용2-1 | 내용2-1 | 내용2-3 | # 테이블 세로셀병합 예시 | 칼럼1 | 칼럼2 | | -- | -- | | @rows=2: 내용1-1와 2-1 병합 | 내용1-2 | | 내용2-1 | # 테이블 가로세로셀병합 예시 | 칼럼1 | 칼럼2 | 칼럼3 | | -- | -- | -- | | @cols=2:@rows=2:내용1-1 | 내용1-3 | | 내용2-3 | # 코드 하이라이팅 예시 ```js const a = 10; ``` # 유튜브 예시 $$youtube HUO1bI1X_dA $$ # UML 예시 $$uml 영희 -> 철수: Authentication Request 철수--> 영희: Authentication Response 영희 -> 철수: Another authentication Request 영희 <-- 철수: another authentication Response $$ - [UML 문법](https://plantuml.com/ko/) # CODEPEN 예시 $$codepen https://codepen.io/jangka44/embed/yLzybep?default-tab=html%2Cresult&editable=true $$ # CODEPEN 예시, 자바스크립트 콘솔 예시 $$codepen https://codepen.io/jangka44/embed/PoEWgWd?default-tab=js%2Cresult&editable=true $$ - [코드팬의 한계때문에, 콘솔화면을 임베드 하고싶다면, 이 URL에서 포크해서 진행, to2.kr/bXA](https://to2.kr/bXA) # 이미지 예시 ![원본이미지](https://i.imgur.com/PAanfDK.jpg) # PPT 예시 1 $$ppt title: PPT 제목을 적어주세요. # 제목 템플릿 1--o--t=1 # 안녕하세요.--o--t=1 # 반갑습니다.--o--t=1 # 줄바꿈[br /]예시--o--t=1 $$ # PPT 예시 2 $$ppt title: PPT 제목을 적어주세요. # 슬라이드 1 제목 - 내용 1 - 내용 2 - 내용 3 # 슬라이드 2 제목 - 내용 1 - 내용 2 - 내용 3 # 슬라이드 3 제목 - 내용 1 - 내용 2 - 내용 3 $$ # PPT 예시 3 $$ppt title: PPT 제목을 적어주세요. # 슬라이드 1 제목 $$youtube HUO1bI1X_dA $$end # 슬라이드 2 제목 ```js const a 20; ``` # 슬라이드 3 제목 | 칼럼1 | 칼럼2 | | -- | -- | | 내용1-1 | 내용2-1 | | 내용1-2 | 내용2-1 | $$ # PPT 예시 4 $$ppt title: PPT 제목을 적어주세요. # 슬라이드 1 제목--o--CLASS=h1-border-none - 내용 1 - 내용 2 - 내용 3 # 슬라이드 2 제목--o--CLASS=h1-top - 내용 1 - 내용 2 - 내용 3 # 슬라이드 3 제목--o--CLASS=h1-top h1-border-none - 내용 1 - 내용 2 - 내용 3 # 슬라이드 4 제목--o--CLASS=h1-border-none text-center # 슬라이드 5 제목--o--CLASS=box-w-full # 슬라이드 6-1 제목--o--CLASS=box-w-full box-mx-10 # 슬라이드 6-2 제목--o--CLASS=box-w-full box-mx-20 # 슬라이드 6-3 제목--o--CLASS=box-w-full box-mx-30 # 슬라이드 6-4 제목--o--CLASS=box-w-full box-mx-40 # 슬라이드 6-5 제목--o--CLASS=box-w-full box-mx-50 # 슬라이드 7-1 제목--o--CLASS=box-w-full box-max-w-screen-sm # 슬라이드 7-2 제목--o--CLASS=box-w-full box-max-w-screen-md # 슬라이드 7-3 제목--o--CLASS=box-w-full box-max-w-screen-lg # 슬라이드 7-4 제목--o--CLASS=box-w-full box-max-w-screen-xl # 슬라이드 7-5 제목--o--CLASS=box-w-full box-max-w-screen-2xl $$