생활코딩

Coding Everybody

코스 전체목록

닫기

CSS 기초

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

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

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

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

 CSS 선택자

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 뚠뚠이
    완료
  2. Harry
    감사합니다 완료
  3. 뉴빈
    OK!
  4. Useok
    스킵 완료
  5. moon
    항상 감사합니다.!!
  6. dofvmrhwk
    .= class
    #= id
    css 복습 완료!
  7. Yamto
  8. 춤춤
    완료
  9. 스티븐잡숴
    완료
  10. 만약 class 값을 설정하려는 특정 단어가 1억개라면 어떻게 해야하나요. 한번에 class 값을 동시에 지정해 줄 수 있나요?
  11. 펜펜
    감사합니다! css는 패스하고 지나갈게용!
  12. 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 > 아무것도 안붙은 태그
  13. 김상현
    CSS 복습할때 다시 와서 들으면 좋겠군요!
  14. 릴라야
    완료
  15. Jeremy Jo
    CSS수업을 지난주에 마쳤는데 다 까먹은 듯 다시 들었습니다.
    아직은 왕초보라 듣고 또 들어야 하네요.
  16. csrcomp21
    완료!
  17. hr1004
    패스~
  18. 오오우우얍
    다음!
  19. 완료
  20. 샬롬
    완료
  21. 아빠늑대
    무색 무취의 태그 <div> 하지만 줄바꿈이되므로, <span>으로 감싸준다.
    <span style="[CSS 문법]"> 식으로 디자인을 수정할 수 있다.

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

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

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

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

      css 선택자속성 복습

      id:우선순위 1위, 한페이지에서 한번밖에 사용하지 못한다. #을 써서 적용한다. id=#
      class:우선순위 2위, class뜻은 반이라는 뜻으로 css그룹핑의 개념이다. " . "(마침표)를 써서 적용한다 .=class
      일반태그:우선순위 3위

      <div>태그는 무색무취의 태그로써 개별로 편집하기위해 인위적으로 설정하는 태그이다.
      이러한 기능과 비슷한 <span>이라는 태그가 있는데 두개 태그의 차이점은 "줄바꿈"이 적용되나 안되나이다.
      <div>태그는 전체가 적용받는다. 해서 문단에 편집을 위해 쓰기보다는 grid속성을 편집할때 쓰는것이 더욱 실용적일것이다.


      동시에 효과를 입힐때 우선순위 순서대로 효과가 나타난다.

      <style>태그는 <body>태그 안에있는 다수의 출력정보를 다같이 편집하기 편하게 해주는 또다른 디자인 태그인거같다.
    • 오케이
      완료
    • 동군짱
      감사합니다
    • pangse88@gmail.com
      감사합니다. 사랑합니다
    • 코딩가즈아
      감사합니다
    • eventme
      완료
    • hyegineer
      완료
      css개념은 알고있어서 다음으로 넘기기~
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기