일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- Grid
- 가상클래스
- CSS
- sass
- Pseudo
- js
- 코딩테스트
- property
- frontend
- column-gap
- 코드다이어리
- HTML
- tailwindcss
- 코드일기
- 친해지기
- DOM
- Coda
- scss
- vscode
- row-gap
- 선택자
- 코딩일기
- regexp
- CLASS
- JavaScript
- display
- 코딩퀴즈
- 정규식표현
- 코딩문제
- Today
- Total
목록전체 글 (78)
< Code diaries />

1. HTML 코드 입력하기사용방법 : 백틱기호 ```html 로 시작 + 원하는 코드 적기 + ``` 로 마무리하여 끝낸다.( 맥인경우 백틱기호가 한글모드에서는 동작하지 않으니 주의 ) 2. CSS 코드 입력하기사용방법 : 백틱기호 ```css 로 시작 + 원하는 코드 적기 + ``` 로 마무리하여 끝낸다.( 맥인경우 백틱기호가 한글모드에서는 동작하지 않으니 주의 ) 그 외의 다른 언어들도 내가 다 해보진 않았지만, 같은방식으로 시도해 보면 되지 않을까 싶다 ^^ 3. 채팅 글자 숨기기사용방법 : ||원하는글자||퀴즈에 답을 맞추거나 할때 용이하다. 블럭처리된 곳은 다시 클릭하면 보이게 된다. 4. 마크다운 적용하기사용방법 : # 글자#다음에 공백이 꼭 있어야하며, 해시(#)의 개수는..
오늘은 HTML문서에서의 프린트 설정에 대하여 알아볼게요웹 페이지를 디자인 할때 Screen 에서 보이는 모습을 CSS로 스타일링 하게 되는데요,페이지 중 인쇄를 제공해야하는 페이지들은 별도로 인쇄용 CSS를 정의하게 됩니다.그 방법을 몇가지 소개해볼게요 1. CSS 파일 내부에서 @media로 프린트 css 지정하기css 내부에서 사용할때에 할 수 있는 방법입니다.아래 코드를 보면 @media print 구문을 이용하여 프린트할때에 문서의 배경색과 글자색을 변경하고 있습니다. * { margin:0;padding:0}body { background-color:black; color:#fff;}p { line-height:2; max-width:800px; margin:0 auto;}@m..

STEP 1. Extension에서 'Print'라고 검색해서 설치합니다. STEP 2. 인쇄하고싶은 코드화면에서 마우스 우클릭하여 프린트화면을 미리보기합니다.(Print preview) STEP 3. 브라우저에 코드가 보이면 마우스 우클릭하여 'Print'메뉴를 선택하여 설정에 맞게 인쇄합니다.
NodeList와 HTML Collection은 유사배열객체라서 배열의 모든 메소드를 사용할 수는 없다. NodeList우리가 document.querySelectorAll()로 HTML elements를 가져오면 Nodelist로 들어온다. apple mango blueberry HTML Collectionchildren 속성으로 가져온 것은 유사배열객체이다. A B Cconst ul = document.querySelector('ul')const lis = ul.children;console.log(lis)// HTMLCollection(3) [ li, li, li ]
1. 일반적인 수학식으로 계산하기 가능- percentage로 변환하기$size : 100 * 1% // 100%- 일반적인 계산$size : 100 - 3 * 5 // 90- pixel 계산$size : 100 * 2px // 200px 2. 같은단위의 계산식A. 단위가 같더라도 sass 에서는 곱하기 '*' 와 나누기 '/' 연산은 되지 않는다.$size : 100px * 3px- 위와같은 경우 숫자를 먼저 계산후 단위를 문자열로 이어붙인다.- 결과값 : 300px*px$size : 100px / 3- 에러 B. 더하기 '+' 와 빼기 '-'는 정상으로 연산이 가능하다.$size : 100px - 20px- 결과값 : 80px$size : 100px + 20px- 결과값 : 120px 3. ..

궁모닝 에브리원~!! ^^ 오늘은 HTML을 마크업할때 VS code에서 사용하는Emmet 문법을 정리해 볼게요 Emmet HTML 마크업을 조금 손쉽게 해줄 수있는 기능이며 알게모르게 우리가 쓰고있는 것도 있어요.방법 몇가지를 소개 해 봅니다. 맨 하단에 Emmet 단축키를 정리해놓은 사이트를 링크 걸어 두었어요~! 1. VS Code에서 설정하기Emmet 기능이 적용되지 않는다면, 아래의 화면에서 확인한다. - cmd + shift + p 눌러서 emmet을 검색한다.- 첫번째 나오는 Emmet:Balance(inward)을 선택한다.- 사용시 주의할 점은 띄어쓰기를 하지 않는다.- 단축키를 띄어쓰기없이 입력후 Tab키를 눌러 실행한다. 2. 다양한 사용방법을 알아보자. css 선택자..