웹브라우저 JavaScript

웹브라우저와 JavaScript

HTML

정보를 표현한다.

<!DOCTYPE html>
<html>
<body>
    <ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</body>
</html>

CSS

정보를 꾸며준다.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
		#selected{
			color:red;
		}
	</style>
</head>
<body>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li id="selected">JavaScript</li>
	</ul>
</body>
</html>

JavaScript

HTML을 프로그래밍적으로 제어한다. 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
		#selected{
			color:red;
		}
		.dark {
			background-color:black;
			color:white;
		}
		.dark #selected{
			color:yellow;
		}
	</style>
</head>
<body>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li id="selected">JavaScript</li>
	</ul>
	<input type="button" onclick="document.body.className='dark'" value="dark" />
</body>
</html>

 

댓글

댓글 본문
  1. Koma Doodugi
    2021/10/13
  2. labis98
    20210815 good!!!
  3. 리탱
    완료
  4. 드림보이
    수강완료했습니다...
  5. 감자먹는넘
    웹브라우저와 JavaScript
  6. 어렵지만 차근차근 배워보겠습니다
  7. Kyung Hee Lee
    20210216, ^^감사합니다.
  8. 라온
    2020.12.08 , 감사합니다.
  9. 박병진
    2020.12.01 완료
  10. 11/5
  11. 마준
    완료
  12. anne
    완료
  13. 흑백영화
    완료
  14. 정승옥
    완료
  15. 한강
    오늘도 감사합니다~~!
    200623
  16. 쑤우
    시작. 감사합니다~
  17. Useok
  18. 쿠카라차
    input 버튼 의 value는 버튼위 올라가는 텍스트
  19. html 정보
    css 다자인
    javascript 웹브라우저 html 동적제어

    예제 onclick="document.body.classname='dark'"
    문서의 body태그에 속성 class(이름)=dark 삽입(추가)

    *css로 .dark명령어, .dark #selected 명령어를 설정해놓은 뒤 body 태그 속성에 없던 classname을 부여해 작동시킴
  20. 얼그레이
    완료
  21. 광주토박이
    완료
  22. Jenny
    완료
  23. 민재현
    완료
  24. 정홍
    완료
  25. 류석현
    다시 시작합니다
  26. 공은지
    코딩에. .. 뼈묻겟어 ... 너무 재밌어요...
  27. 김유진
    자바스크립트 최고^^b
  28. 김유진
    최고최고~
  29. 유이수
    자바스크립트 입문하기에 좋은 것 같아요~
  30. 권연주
    어려웠던 코딩.. 이 사이트를 보고 많이 배워 갑니다!
  31. 박하늘
    안녕하세요. 혼자 웹사이트를 구축 하던 중 이 사이트를 발견 했습니다. 강추입니다.
  32. 박주영
    좋은 강의 감사합니다
  33. 신보경
    교수님께서 이 사이트 추천해주셨어요 많이 배워갑니다 정말 좋네요
  34. 공은지
    교수님께서 강의중에 틀어주셨는데 너무 좋은 영상이네요. 감사합니다.
  35. 우렁코난
    항상 좋은 영상 너무 감사합니다
  36. 리젤린
    시작해요
  37. 미완성
    20190108완료
  38. JuicyFresh
    확인
  39. 헤롱
    2018-12-11 완료
  40. canivas
    2018/11/10 완료!
  41. table
    2018-09-28
    첫번째 수강완료
    감사합니다.
  42. moon
    감사합니다.
  43. 와 감사합니다! 진짜 찾던 정보!
  44. SlowStarter
    감사합니다!
  45. 스페이스몽키
    감사합니다~!
  46. 홍민애
    동영상속에서 보면,
    #selected{
    color:red;
    }
    의 color가 이탤릭체로 나오는데, 에디터 atom에서도 비슷한 기능을 가진 package가 있을까요?
  47. 장평래
    진짜 잘 봤습니다!
  48. An TaeHyeon
    18-01-23 수강완료!
    강의록 공유합니다.
    https://goo.gl/VJZMvt
  49. 박인호
    12-23
    수강완료.
  50. GoldPenguin
    감사합니다,
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기