WEB2 - JavaScript

CSS 기초

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

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

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

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

 CSS 선택자

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. Mongsil
    2020-04-01 완료
  2. 악어
    2020-04-01 완료
  3. keicoder
    완료
  4. 야루
    완료
  5. Yohanesty
    완료
  6. 뿡뿡팡야
    완료
  7. 혹등고래
    완료
  8. OneJae EE
    20.03.18 수 / 37세 비전공자 / 완료
  9. 안영우
    완료.
  10. flytodk
    complete
  11. ㅇㅇ
    넹 실수하신거 같습니다. 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 완료!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기