반응형 웹 디자인 (Responsive Web Design) 반응형 웹 디자인을 공부하기에 앞서 미디어 쿼리(media query)를 사용하여 예시를 만들어 보았습니다. 왼쪽 그림은 모바일용 (width = 768px 일 때 적용 */ } /* Tablet (row) */ @m..

Variable (변수) 시작하기에 앞서 console.log() / document.write() / document.writeln() 의 기능에 대해 간단히 알아보겠습니다. let fruit_1 = 'apple'; let fruit_2 = 'banana'; console.log(fruit_1); // apple (데이터를 console에서 확인) document.write(fruit_1); // apple (데이터를 web에서 확인) document.writeln(fruit_1, fruit_2); // apple banana // (데이터를 web에서 확인하고, 출력값 이후 공백이 들어감) 우리가 구구단을 만든다고 생각해 봅시다. // 2단 console.log(2 * 1); // 2 console...

Box-sizing Hello1 Hello2 HTML code box-sizing: border-box; 입력 전 & result (content 크기가 150px) (Hello1's row size : 10 + 150 + 10 = 170px) (Hello2's row size : 30 + 150 + 30 = 210px) box-sizing: border-box; 입력 후 & result (box의 border까지 포함한 크기가 150px) (= 남는 크기만큼 content의 크기가 작아진다.) (Hello1's row size : 10 + 130 + 10 = 150px) (Hello2's row size : 30 + 90 + 30 = 150px) box-sizing: border-box; 입력 전 후로..

Box CSS1 CSS2 CSS3 HTML code style.css & result CSS1과 CSS2는 똑같이 tag를 주었지만 style.css로 인해 box의 크기가 다른 것을 알 수 있습니다. CSS1과 비교하기 위해 CSS2를 살펴보면 개발자 검사 page에서 CSS2 box 위에 마우스를 올려두면 해당 box의 영역이 표시되며, 클릭 시 해당 box의 margin, border, padding, content의 입력값이 나타납니다. 오른쪽 이미지는 CSS2에 margin과 padding을 20px씩 주었기에 빨간 줄로 표시한 20px씩 입력되었음을 나타냅니다. 그리고 CSS1 tag는 block level element의 속성을 가지므로 화면의 가로의 크기가 변하더라도 box의 크기가 화면 ..