웹 프로그래밍 기초162 [CSS3] overflow overflow 속성은 요소에 들어있는 콘텐츠가 더 길 때 어떻게 보이지 선택하는 속성입니다. 속성 설명 visible 기본값으로 내용이 더 길어도 그대로 보입니다. hidden 내용이 넘치면 자릅니다. scroll 내용이 넘치지 않아도 항상 스크롤바가 보입니다. auto 내용이 잘릴 때만 스크롤바가 보입니다. visible hidden scroll auto 파블로 루이즈 피카소(스페인어: Pablo Ruiz Picasso, 1881년 10월 25일 ~ 1973년 4월 8일)는 스페인 말라가에서 출생하였고 주로 프랑스에서 미술활동을 한 20세기의 대표적 큐비즘 작가로 널리 알려져 있으며, 대표작으로 《아비뇽의 처녀들》, 《게르니카》 등이 있다. 피카소는 1만 3,500여 점의 그림과 700여 점의 조각품.. 2021. 7. 5. [HTML] Mark Up literal 웹 애플리케이션을 만들다 보면 화면의 구조를 동적으로 생성하는 일이 상당히 많은 걸 알 수 있다. 그래서 나는 DOM API를 이용한 다음과 같은 코드로 동적 생성을 했다. 예를 들어 ul태그 내부의 li들을 동적으로 생성해야 한다면 const root = document.querySelector('#root'); const ul = doucument.createElement('ul'); for(int i = 0; i < 10; i++){ const div = createElement('div'); div.innerHTML = `${i}`; ul.appendChild(div.firstElementChild); } root.appendChild(ul); 내가 원하는 마크업은 다음과 같았다. 0 1 2 3 .. 2021. 6. 6. HTML/CSS 웹 프로그래밍 복습(2) img 태그 HTML 문서에 IMAGE를 정의할 때 사용한다, 이미지가 링크되는 형태로 이미지를 위한 수용공간을 만들어주는 태그이다. img태그는 src인 이미지 소스의 url과 이미지를 불러오지 못했을 때 보여줄 alt속성을 반드시 명시해야 한다. 추가적으로 HTML5에서는 기존 속성들인 align, border, vspace, hspace를 지원하지 않는다. 다음은 usemap속성에 대한 예시이다. The map and area elements Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic: 폰트 관련 css @font-face는 웹브라우저에게 글꼴 이름과 다운.. 2021. 5. 19. HTML/CSS 웹 프로그래밍 복습(1) 1. html 확장자와 htm 확장자 - html과 htm은 서로 같은 형식의 파일이다. htm을 쓰는 이유는 도스(MS-dos), Window3.x 시점부터 확장자의 문자 길이를 3글자로 제한했기 때문에 당시엔 htm확장을 사용했는데 호환성을 위해 남겨 둔 것이다. 2. html 요소의 태그 - html의 태그명은 사실 대소문자를 구분하지 않고 사용할 수 있지만 관례상 소문자를 사용한다. 3. HTML5 , 태그 HTML5에서는 웹브라우저 플러그인 없이 오디오를 재생하거나 비디오를 볼 수 있다. 4. HTML5에 추가된 태그의 download 속성 target으로 연결되지 않고 해당 콘텐츠가 다운로드됨을 명시함 다만 브라우저별 지원 여부가 미 정확함 5. HTML5 추가 속성 1. multiple (b.. 2021. 5. 19. Staging website 간단히 말해서 스테이징 사이트는 라이브 웹 사이트의 복제품입니다. 보안 환경에서 구현하려는 모든 변경 사항이나 주요 새 기능을 테스트할 수 있습니다. 개발자는 일반적으로 실제 운영환경(프로덕션)으로 배포하기 전에 스테이징 사이트를 사용하여 변경 사항을 테스트하고 버그를 수정합니다. 개발 vs. QA vs. 스테이징 vs. 프로덕션 사이트 사용자는 완성 된 제품만을 볼 수 있지만 일반적인 웹 사이트 뒤에서는 많은 작업이 진행됩니다. 개발 중에 사용되는 가장 일반적인 유형의 테스트 환경들입니다. 1. Development website - 이 환경에는 작업 중인 코드의 모든 최신 버전이 포함됩니다. 새로운 기능의 초기 테스트 환경에 적합합니다. 2. Quality Assessment (QA) - QA 프로세.. 2021. 4. 14. 자바기반의 웹&앱 응용 SW개발자 양성과정 78일차 -116 React State //하나의 시계 class Clock extends React.Component{ // 이 render로 전달되었을때 생성자가호출됨 constructor(props){ super(props); this.state = {date : new Date()}; } //DOM의 출력값이 삽입되면(렌더링되면)호출됨 componentDidMount(){ this.timerID = setInterval( //브라우저가 요청 ()=> this.tick(),1000 ) } componentWillUnmount(){ clearInterval(this.timerId); } //요청받아 현재 시각을 포함하는 객체를 호출하여 UI를 업데이트 tick(){ this.setState({ //호출로써 React는.. 2020. 7. 9. 자바기반의 웹&앱 응용 SW개발자 양성과정 77일차 -114 모듈은 외부 js파일의 함수를 import 해서 사용할 수 있도록 도와준다. 이전 js파일은 전부 html에 태그에 넣어서 사용했다. 당연했던 기능이 스크립트에서는 지원되지 않았습니다. 이러한 기능을 제공했는데 그것이 모듈화입니다. 함수에서만 국한되는 것이 아니라 클래스 또한 가능합니다. module.js 에서 외부로 노출시킬 api를 export로 등록해준 뒤. export const test1 = () => { console.log("module1"); } export const test2 = () => { console.log("module2"); } export const test3 = () => { console.log("module3"); } export default test2; 사용하는 j.. 2020. 7. 3. 자바기반의 웹&앱 응용 SW개발자 양성과정 76일차 -113 ECMAScript6에서 클래스를 정의하는 방법 class Exam{ constructor(kor.eng.math){ this.kor = kor || 0; this.eng = eng || 0; this.math = math || 0; } total(){ return this.kor + this.eng + this.math; } } 이전 ES5에서 생성자를 통해 객체를 생성하려면 다음과 같은 방식으로 했다. function Exam(kor, eng, math){ this.kor = kor || 0; this.eng = eng || 0; this.math = math || 0; } Exam.prototype.total = function(){ return this.kor + this.eng + this.ma.. 2020. 7. 2. 자바기반의 웹&앱 응용 SW개발자 양성과정 75일차 -112 ES6 1. Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다. 원시 타입 (primitive data type) Boolean null undefined Number String 객체 타입 (Object type) Object 심벌(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심벌은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 심벌 생성 심벌을 생성하기 위해서는 Symbol()를 사용한다. //s1은 유일한 프로퍼티의 key이다. let s1 = Symbol(); 심벌을 사용하기 위해 두 개의 객체를 만들어 보자. .. 2020. 7. 1. 자바기반의 웹&앱 응용 SW개발자 양성과정 74일차 -111 ES6 KEY : VALUE 값에서 KEY값에 변수를 사용하게 되면 오류가 발생한다. 변수를 변수로 인식하지 않고 KEY로 인식하기 때문에 변수의 값을 넣지 안기 때문이다. 이러한 점을 [] 대괄호를 이용해 KEY값을 감싸게 되면 해당되는 VALUE값을 키값으로 할당할 수 있다. let kor = 30; let eng = 20; let math = 0; let col = "name"; let exam = { kor, eng, math, [col]: 'yu sung il', total() { return this.kor + this.eng + this.math; } }; Destructiring let col = "name"; let exam = { kor: 10, eng: 1, math: 0, [col].. 2020. 6. 30. 이전 1 2 3 4 5 ··· 17 다음
