웹브라우저 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. 바람과 나무
    감사합니다.
  2. 이댕댕
    오랜만에 이고잉님 수업 다시 시작합니다!
    완강까지 화이팅!
  3. 수복
    감사합니다.
  4. 이성준
    우왕 감사하니다
  5. NTodTop
    시작합니다.
  6. Sangmook Kim
    170727 완료
  7. 엄정기
    앙잡스 시작
  8. 세븐나이츠
    자바스크립트 시작합니다
  9. crable
    감사합니다.
  10. specialz
    ^^
  11. 코딩왕될래
    가자~!!!!!!!!!!!!!!!!!!
  12. nancylee
    알아듣기 쉽게 설명해주셔서 감사합니다
  13. 회사 때려쳤습니다. 코딩에 올인해볼게요. 강의 감사합니다
  14. matheios
    강의 잘 듣고 시작하려합니다~ 감사합니다~~
  15. jgatsby
    항상 감사드립니다!
  16. hwangcoding@naver.com
    첫번째클리어
  17. 유유
    감사합니다.
  18. 감사합니다!
  19. dhkim
    감사합니다!
  20. hyuna
    thank you^^
  21. tachyon
    감사합니다
  22. 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은 브라우저측에서 제공하지만, 동시에 자바스크립트로도 제어할 수 있습니다.
            사용하는 입장에서는 내장객체와 동급으로 취급해도 상관없을 것 같네요
            대화보기
            • 안인기
              질문있습니다

              BOM 하위에있는 window,location,navigator 객체는 보통 브라우저객체라고 하던데요
              이 객체들을 자바스크립트 코드들로 제어하던데 그렇다고 자바스크립트 내장객체는아닌거죠?
              그냥 브라우저의 내장객체를 제어할수있게 자바스크립트가 짜여져있어서 자바스크립트로 브라우저객체를 통제하는것뿐인가요?

              브라우저객체가 자바스크립트 객체인지헷갈립니다 ㅜㅜ
            • //구리
              자바 스크립트 버튼을 누르면 class가 정의가 되면서(dark라는 이름으로) 최종적으로 css가 적용이 되는 것입니다.
              <input type="button" onclick="document.body.className='dark'" value="dark" /> 이 버튼을 누르는 순간 'dark'라는 class명을 갖게 되고,
              <head>
              .dark //이 부분이 'dark'라는 class명을 갖는 태그를 호출하여 꾸미는(검은색 배경으로)부분입니다.
              </head>
              대화보기
              • 구리
                body class가 정의되지않았는데 어떻게 body에 css가 적용이 되는지 궁금하네용
              • gujunmo
                잘봤습니다 감사합니다~
              • line88
                강의 정말 잘 보고 있습니다.
                감사합니다.
              • 휘빈a
                헐 웹브라우저 강의도 있다니 ...
                짱이다 생활코딩강좌!~!
                항상 감사하며 듣습니다 !
              • 연구1본부
                20시간 강의 듣다가 ~ 자바스크립트로 이동!
              • 환글
                좋은 강의 고맙습니다
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기