웹브라우저 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. hwangcoding@naver.com
    첫번째클리어
  2. 유유
    감사합니다.
  3. 감사합니다!
  4. 감사합니다!
  5. thank you^^
  6. tachyon
    감사합니다
  7. 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
          이제 시작합니다 화이팅!
        • 버튼의 보여지는이름 입니다.
          대화보기
          • 첫번째 강의 에서 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 자세히 보기