본문 바로가기

전체 글124

[JavaScript] 자바스크립트와 웹 프론트엔드 파트1. Javascript와 web 01. HTML, CSS, JS HTML: 웹 페이지의 구조를 나타냄 CSS: 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS: JS 로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저는 자바스크립트 코드를 실행시키면서 HTML, CSS의 구조와 스타일에 변화가 생기면, 다시 브라우저에 해당 내용을 반영해서 렌더링하여 사용자가 그 변화를 확인할 수 있도록 한다. 02. window 객체 Javascript 실행 시 가장 상위에 존재하는 객체, 변수/함수 선언 시 window 객체 안에 선언됨 표시된 웹 페이지 정보에 접근, 변경 가능 window.location: 현재 브라우저 창의 주소를 나타내는 객체 window.location.href: 브라우저 창에 입력된 주소, 변경 가능 w.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 오버플로우(overflow) index8.html blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah style8.css body{ background-color: #ddd; } .box{ background-color: white; /*float된 left,right는 위에 떠있기 때문에 box는 float된 요소의.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 상속(Inheritance) style7.css /*상속이 되는 color, 상속이 안 되는 border 웹 초창기때부터 a태그의 글씨색은 기본 보라색으로(읽음표시) 노출됨 색을 바꾸려면 지정된 색으로 만들어줌. */ a{ text-decoration: none; /* 밑줄 없애기 */ color: inherit;/* 부모로부터 상속! 주의점: 인터넷 익스플로러 6,7버전에선 호환 안됨*/ } button{ font: inherit; } .box h1{ color: firebrick; } .box h1:before{ content: ' '; display: inline-block; background-color: currentColor;/*주의점: 인터넷 익스플로러 6,7,8버전에선 호환 안됨*/ width: 20px; height.. 2019. 12. 17.
[CSS] 한 걸음 더 CSS: 코딩가나다 버티컬 얼라인(세로 정렬, vertical-align) 예제1. index6.html style6.css body{ background-color: #999; } .wrapper{ background-color: blanchedalmond; width: 960px; height: 400px; line-height: 400px; /*한 줄 height를 전체 height로 잡아주면 vertical-align 세로 middle 성공!*/ text-align: center; /*여기서 text-align으로 좌우 center로도 만들어주기*/ margin: 0 auto; } .box{ display: inline-block; /*inline 속성을 포함해야 vertical-align의 middle이 의미 있어짐*/ background-color: green; wi.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 마진 병합(Margin Collapsing) index5.html Kim Lee Park Section #1 Section #2 Kim Lee Park's Profile style5.css .header h1{ background-color: #999; color: white; } .section { background-color: white; border: 1px solid #999; margin: 20px; padding: 20px; } .footer{ background-color: #eee; text-align: center; padding: 10px; color: #999; } 마진 병합 현상 인접해있는 block 요소끼리만 일어난다. 상하단으로만 일어난다. 문제가 될 수 있는 상황 예시 a b .parents{ background-col.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 라인하이트(줄 간격, line-height) index4.html Let's code! Coding is fantastic. I love it. style4.css .cover{ background-image: url(code.jpg); background-size: cover; background-color: #336699; height: 50vh; } .contents h1 { text-align: center; line-height: normal; /*폰트 종류에 따라 다르다.*/ color: white; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 80px; margin-top: -1em; /*font-size에 따라 맞춰 달라지게 하려면.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 디스플레이(Display Property) index.html 햄버거 (영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style3.css ... /*인라인 블럭 처리를 해서 글자 디자인 처리*/ strong.bold{ background-color: black; color: white; marg.. 2019. 12. 16.
[공부][한 걸음 더 CSS: 코딩가나다] 네거티브 마진(Negative Margins) index2.html A B C NewYork City NewYork는 멋진 도시입니다. 한번 가보고 싶은 곳입니다. 궁금하네요. Map Seoul은 좋은 도시입니다. 구경할 게 많아요. 즐거운 도시입니다. style2.css body{ background-color: antiquewhite; } .header{ height: 300px; background-image: url(city.png); background-position: center; overflow: hidden; /*더 늦게 시작한다*/ margin-bottom: -100px; } .box-wrapper{ } .box{ width: 100px; height: 100px; background-color: yellow; margin: 5px.. 2019. 12. 16.
[CSS] 한 걸음 더 CSS: 코딩가나다 가운데 정렬: Centering in CSS index.html Hamburger 햄버거(영어: hamburger, burger 또는 beefburger, 문화어: 고기겹빵, 다진 고기와 빵, 함버거)는 샌드위치의 일종인 음식이다. 양념, 빵가루 등에 고기를 갈아 넣고 버무린 뒤 구워낸 햄버그 스테이크(패티)와 채소, 양념 등을 두 장 이상의 동그랗거나 길쭉한 빵 사이에 넣어 만들며, 보통 손으로 쥐면서 들고 먹는다. 가정에서 직접 만들어 먹기도 하지만, 일반적으로 패스트푸드 식당에서 판매된다. 수많은 패스트푸드 식당들은 햄버거, 감자 튀김, 콜라를 하나로 묶어서 세트로 판매하기도 한다. style.css body{ background-color:#ddd; } .box{ background-color: white; width: 480px; /*bo.. 2019. 12. 16.