본문 바로가기

전체 글313

[부스트코스] 8 미디어 쿼리 8. 미디어쿼리 1)미디어쿼리 소개 반응형 웹 사이트 제작에 반드시 필요한 기술 각 미디어 매체(screen, print)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 2) 미디어 타입 & 미디어 특성 @media(at media) 미디어 타입(Media Types) 미디어 특성(Media Features) @media mediaqueries { ... } /* 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됨 */ Media Types (미디어 타입) all, braille, embossed, handheld, print, projection, screen, speech, tty, tv all, print, screen 을 현업에서 많이 사용하.. 2022. 3. 22.
[부스트코스] 7 CSS 레이아웃 7. 레이아웃 1) 속성-display DISPLAY display: none; display: inline; display: block; display: inline-block; display: list-item; display: flex; display: inline-flex; display: table; display: table-cell; box box box inline-box는 배치는 인라인처럼 되고, 속성은 box 속성 2) 속성-visibility 요소를 어떻게 숨길 것인지 결정 visibility: visible|hidden|collapse|initial|inherit; visibility: visible; /* 보임 기본값 */ visibility: hidden; /* 숨김, 자신의 박.. 2022. 3. 21.
[JS] JavaScript 객체 기본 1. 수업소개 객체: 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것 2. 실습준비 editor 준비 VSCode 사용 3-1 객체의 기본 object.js let memberArray = ['egoing', 'graphittie', 'leezhce']; console.log(memberArray[1]); //input let memberObject = { manager: 'egoing', developer: 'graphittie', designer: 'leezhce', }; memberObject.designer = 'leezche'; //update console.log('memberObject.designer', memberObject.designer); console.log("memberOb.. 2022. 3. 20.
[부스트코스] 6-2 CSS 폰트, 텍스트 6. 폰트, 텍스트 8) 속성-font font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; /* size | family */ font: 2em "돋움", dotum, sans-serif; /* style | size | family */ font: oblique 2em "돋움", dotum, sans-serif; /* style | variant | weight | size/line-height | family */ font: oblique small-caps bold 16px/1.5 '돋움'.. 2022. 3. 20.
[JS] JavaScript 활용 34. 파일로 쪼개서 정리 정돈하기 WEB HTML CSS JavaScript WEB Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium quibusdam voluptatem consequuntur asperiores, dolores quam odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium quibusdam voluptatem.. 2022. 3. 19.
[부스트코스] 6-1 CSS 폰트, 텍스트 6. 폰트, 텍스트 1) 속성-typography em: 폰트 전체 높이 ex(=x-height): 해당 폰트의 영문 소문자 x의 높이 Baseline: 소문자 x를 기준으로 하단의 라인을 의미 Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미 (g, j, p, q, y) Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역 (b, d, h, l) 2) 속성-font-family (글꼴) font-family: family-name|generic-family|initial|ingerit; /* 맨 마지막 선언은 generic-family */ font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; fami.. 2022. 3. 19.