WEB2 - JavaScript

CSS 기초

아래 질문에 대답할 수 있다면 이 수업은 듣지 말고 다음 수업인 '제어할 태그 선택하기'로 바로 넘어가셔요. 

  • CSS는 어떤 목적의 언어인가요?
  • CSS를 웹페이지에 삽입하는 방법은 무엇인가요?
  • style 속성은 무엇인가요? 
  • 선택자가 무엇인가요?

style 속성을 이용해서 CSS 사용하기

 style 태그를 이용해서 CSS 사용하기

 CSS 선택자

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. Yohanesty
    완료
  2. 뿡뿡팡야
    완료
  3. 혹등고래
    완료
  4. OneJae EE
    20.03.18 수 / 37세 비전공자 / 완료
  5. 안영우
    완료.
  6. flytodk
    complete
  7. ㅇㅇ
    넹 실수하신거 같습니다. color:powderblue는 css코드에요.
    대화보기
    • yuwon_song
      egoing님 'WEB2 JavaScript - 9. CSS 기초 : style 속성' 동영상에서 2:48 에 color:powderblue가 JS코드라고 설명해주신건 실수 하신건가요...? 바로 앞에서 color:powderblue 코드는 CSS라고 하셨으니 아마 그런 것 같은데 제가 너무 생초보라 혹시나 싶어서요ㅠ
    • 스킵
    • 숩숩이
      완료
    • daniellee123456
      스킵
    • eddylee123456
      스킵
    • 규몽
      스킵
    • 뚠뚠이
      완료
    • 감사합니다 완료
    • 뉴빈
      OK!
    • 스킵 완료
    • 항상 감사합니다.!!
    • dofvmrhwk
      .= class
      #= id
      css 복습 완료!
    • 춤춤
      완료
    • 스티븐잡숴
      완료
    • 만약 class 값을 설정하려는 특정 단어가 1억개라면 어떻게 해야하나요. 한번에 class 값을 동시에 지정해 줄 수 있나요?
    • 펜펜
      감사합니다! css는 패스하고 지나갈게용!
    • 1. Style 속성을 이용해서 CSS 사용하기
      -> style이란 속성의 CSS를 넣으면 디자인을 할 수 있다.
      <h2 style="background-color:coral;color:powderblue"> javascript </h2>
      -> 이를 이해하여 다른 속성들 역시 검색하여 디자인할 수 있다.

      2. Style 태그를 이용해서 CSS 사용하기
      -> 특정 단어에 대해 정보를 제어할 수 있고 줄바꿈이 되는 무색무취 태그 : <div>
      -> 줄바꿈이 되지 않는 태그 : <span>

      Style 태그 : script처럼 웹브라우저에게 <style> </style>안에 감싸져 있는 텍스트가 CSS라는 것을 웹브라우저에게 알려주는 부분자.
      <style>
      .js{
               font-weight: bold;
               color:red;
              }
      </style>
      <span class="js">김민아</span>
      여기서 .js가 선택자이다.


      3. 웹페이지에 있는 요소들을 잘 제어하기 위해서는 선택자를 잘 활용해야 한다.
      class 선택자는 이름 앞에 .이 붙고
      id 선택자는 이름 앞에 #이 붙는다는 약속이 있다.
      Class -> 어떤 대상들을 grouping한다. (교실) '.'
      Id -> 특정 대상을 식별한다. (학번) '#'

      태그 앞에 아무것도 안붙었을 경우 해당하는 태그 전체를 대상으로 한다.
       <style>
              .js{
                  font-weight: bold;
                  color:red;
              }
              #first{
                  color:green;
              }
              span{
                  color:blue;
              }
          </style>
      <span id="first" class="js">김민아</span>

      우선순위는 id > class > 아무것도 안붙은 태그
    • 김상현
      CSS 복습할때 다시 와서 들으면 좋겠군요!
    • 릴라야
      완료
    • Jeremy Jo
      CSS수업을 지난주에 마쳤는데 다 까먹은 듯 다시 들었습니다.
      아직은 왕초보라 듣고 또 들어야 하네요.
    • csrcomp21
      완료!
    • hr1004
      패스~
    • 오오우우얍
      다음!
    • 완료
    • 샬롬
      완료
    • 아빠늑대
      무색 무취의 태그 <div> 하지만 줄바꿈이되므로, <span>으로 감싸준다.
      <span style="[CSS 문법]"> 식으로 디자인을 수정할 수 있다.

      <head>부분에 <style> span { CSS } </style> 식으로 더 편하게 디자인을 넣을 수 있다.

      선택자를 이용해 태그 선택자( ), 클래스 선택자(.), id 선택자(#)를 이용해 포괄적 그리고 세부적으로 디자인을 넣을 수 있다.

      tag class id
      좌측일수록 포괄적, 우측 세부적으로 적용. id는 페이지에 여러번 지정하면 규약위반.

      그리고 포괄적용된 후 세부적으로 덮어 씌워지는 작업이 내부적으로 이루어진다.
      예제에서는 빨강 파랑 초록으로 해서 우선순위만 보여줬지만, 실제로는 빨강으로 그린 다음, 파랑으로 그리는 식이다.
      tag를 빨강 class에 font-weight:bold;를 하면, class는 빨강색의 굵은 글씨가 된다.
    • 굼벵이
      완료
    • 홍주호
      20191107 완료
    • sunday
      완료
    • 클래스는 grouping이 가능하며 아이디는 학번처럼 중복이 불가능한 유일한 선택자
    • 은별
      완료
    • 육포
      20191024
    • Bart Lee
      완료
    • 봉가리봉봉
      감사합니다
    • 굼벵이
      완료
    • 박창신
      완료
    • 코딩만이 살길이다
      완료
    • 20190930 Ted 완료!
    • 알베르토
      id는 한번, class는 여러번
      대화보기
      • 건우
        id 랑 class가 뭐가 달라요???
      • 김민재
        강의완료했어요~재밌고 유익한 강의 감사합니다!
      • 현우
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기