웹브라우저 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. moon
    감사합니다.
  2. 와 감사합니다! 진짜 찾던 정보!
  3. SlowStarter
    감사합니다!
  4. 스페이스몽키
    감사합니다~!
  5. 홍민애
    동영상속에서 보면,
    #selected{
    color:red;
    }
    의 color가 이탤릭체로 나오는데, 에디터 atom에서도 비슷한 기능을 가진 package가 있을까요?
  6. 장평래
    진짜 잘 봤습니다!
  7. An TaeHyeon
    18-01-23 수강완료!
    강의록 공유합니다.
    https://goo.gl/VJZMvt
  8. 박인호
    12-23
    수강완료.
  9. GoldPenguin
    감사합니다,
  10. 바람과 나무
    감사합니다.
  11. 이댕댕
    오랜만에 이고잉님 수업 다시 시작합니다!
    완강까지 화이팅!
  12. 수복
    감사합니다.
  13. 이성준
    우왕 감사하니다
  14. NTodTop
    시작합니다.
  15. Sangmook Kim
    170727 완료
  16. 엄정기
    앙잡스 시작
  17. 세븐나이츠
    자바스크립트 시작합니다
  18. crable
    감사합니다.
  19. specialz
    ^^
  20. 코딩왕될래
    가자~!!!!!!!!!!!!!!!!!!
  21. nancylee
    알아듣기 쉽게 설명해주셔서 감사합니다
  22. 회사 때려쳤습니다. 코딩에 올인해볼게요. 강의 감사합니다
  23. matheios
    강의 잘 듣고 시작하려합니다~ 감사합니다~~
  24. jgatsby
    항상 감사드립니다!
  25. hwangcoding@naver.com
    첫번째클리어
  26. 유유
    감사합니다.
  27. 감사합니다!
  28. dhkim
    감사합니다!
  29. hyuna
    thank you^^
  30. tachyon
    감사합니다
  31. meandjava
    2016-08-16
    자바스크립트 1일차 공부~~~

    잘보고갑니다.
    신기하네요^^
    대화보기
    • yihsang
      감사합니다.
    • JustStudy
      2016.07.06수
      고맙습니다 3.
    • JustStudy
      고맙습니다 2.
    • Rhys Jung
      역시 첫강의부터 훌륭합니다.
      이해하기 쉬운 설명^^ 감사합니다.
    • 달고뉴
      value는 버튼에 표시되는 값이에요.
      대화보기
      • 달고뉴
        CSS 수업의 캐스캐이딩과 관련된 내용 같아요. 스타워즈에 비유한 설명에서 아이디만 명시한 것보다 클래스와 아이디를 함께 명시한 것이 우선순위가 높아지는 것이죠.
        대화보기
        • 치돌
          처음에 sellected 로 id값을 지정한 텍스트 스타일이 body태그의 클래스를 바꿀때는 그대로 유지되던데 바디태그의 dark클래스 하위의 selected id를 지정하면 단순하게 selected 로 지정한 css는 무시 되는건가요??
          body를 디자인할땐 안바뀌던 javascript라는 텍스트가 .dark #selected로하면 바뀌게 되는 이유좀 설명해주시면 감사하겠습니다 ㅜㅜ
        • 김성은
          버튼을 누르면 dark 클래스가 적용되는데...

          혹시 클래스가 없는 상태로도 정의가 가능한가요??

          버튼을 누르면 원래 배경색과 글자색으로 돌릴수 있나 해서요 ㅎ
        • JustStudy
          고맙습니다.
        • arachi
          이제 시작합니다 화이팅!
        • cuuy
          버튼의 보여지는이름 입니다.
          대화보기
          • park
            첫번째 강의 에서 value 는 뭘의미하는건가요?
          • 박첩구드
            감사합니다 ㅎㅎ
          • Se-Young Ryu
            시작!
          • 박정호
            이번엔 자바스크립트공부
          • Jaeyoon Kim
            자바스크립트 정주행 시작합니다잉!
          • 코딩!
            각각 정보, 디자인, 제어!

            근데 css는 자바스크립트로 만들어진 건가요!
          • 가넷홍
            너무 재밌습니다. 강의 감사합니다.
          • bom은 브라우저측에서 제공하지만, 동시에 자바스크립트로도 제어할 수 있습니다.
            사용하는 입장에서는 내장객체와 동급으로 취급해도 상관없을 것 같네요
            대화보기
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기