WEB2 - CSS

혁명적 변화

수업예고

이번 시간엔 CSS를 웹페이지에 삽입하고, 선택자와 속성이라는 것을 배웁니다. 쉽기 때문에 안중요해보이지만 사실은 가장 혁명적인 변화가 시작된 것인데...

 

 

속성의 기본

강의

 

 

소스코드

변경된 내용

 

 

혁명적인 변화

댓글

댓글 본문
작성자
비밀번호
  1. Boram
    정확한 명칭에 대해서 배운게 앞으로 공부하는데에 많은 도움이 될것같아요! 감사합니다 ^^
  2. Twinkle
    완료^^
  3. 마레
    완료
  4. 한강
    완료했습니다. :)
  5. 김정훈
    완료
  6. 폭신한남자
    감사합니다!!!!!
  7. HongKyu Lim
    감사합니다:)
  8. June
    HTML 문법 하에서 CSS를 사용하기 위해서는 style 태그나 style 속성을 쓸 수 있다.

    감사합니다.
  9. 엔진이어
    간드앗
  10. Min Sang Shin
    완료
  11. 돼지천재
    감사합니다.
  12. 키보드치는남자
    잘들었습니다
  13. Stephen Lee
    세미콜론 자체가 한 단락의 끝을 의미하는 것으로 저는 알고 있기때문에 붙혀주는 게 좋다고 봅니다. 세미콜론 없이도 실행이 되겠지만 어떤 오류가 발생할지는 후에는 미지수이기 때문에 관례적으로 붙혀준다고 생각해요
    대화보기
    • 지영 강
      저도 아직 css를 배우는 입장이라 자세한건 모르지만, 어떤 언어들은 이 문장이 끝났다는 것을 표현하기위한 세미콜론을 붙일 수도 있고, 붙이지 않을 수도 있습니다.

      예를들어서 java나 c++같은 언어들은 세미콜론을 붙이지 않으면 끝이 어디인지 알 수 없기 때문에 다음 줄을 읽기 시작하고, 그것은 문법적인 오류를 일으키며 컴파일 오류를 내뿜게 됩니다.

      그러므로 java나 c++같은 언어들은 다음과 같은 선택적인 코딩이 가능하죠

      int method_a() {

      int a = 3; int b = 2; a++; b++;

      }

      만약 이런 한줄 코딩이 싫다면 다음과 같이 가능합니다

      int method_a() {

      int a = 3;
      int b = 2;

      a++;
      b++;

      }

      이 둘의 실행 결과는 같습니다 (물론 출력을 안했기 때문에 사용자는 결과가 어떤지 지금 당장 알 수는 없는 노릇이겠지만요)


      하지만 가끔 세미콜론이 옵션인 언어가 있는데요, Python이나 Lua등이 그런 것 같습니다.

      이런 경우에는 더이상 문장이 적혀있지 않는 것 자체가 문장의 끝으로 인식되어 세미콜론이 필요가 없는 경우가 있습니다.

      예를들어

      i = 20
      j = 10
      i++

      를 코드로 사용할 수 있습니다.

      하지만 j = 20 j = 10 i++을 사용하게 될 경우 끝을 알 수 없어 오류가 발생하죠.

      그럴 경우에 선택적으로 세미콜론을 붙여 다음과 같이 끝을 알려줄 수 있는 언어들도 있습니다. 아마 이 경우도 그런 것 같아요.

      i = 20; j = 10; i++;

      아마도 css도 세미콜론이 선택적이기 때문에 한줄만 존재할 경우 세미콜론을 붙이지 않아도 되는 것 같아요.
      대화보기
      • 타나
        감사합니다. ㅎㅎ
      • Yeonhwa An
        감사합니다!
      • 김혜원
        완료
      • 완료
      • 이고잉님 항상 감사합니다
        덕분에 큰 꿈을 가지는 계기가 되었습니다
        언젠가 꼭 한번 뵙고싶네요^-^
        대화보기
        • egoing
          어디에 붙을 것 같은가요?ㅊ ^^;
          대화보기
          • 송민지
            style="color:red;text-decoration:underline" 에는 세미콜론을 붙이지 않은 이유가 있나요?ㅠㅠ
          • 아미쓔
            스타일 태그와 스타일 속성. 최근에 배우면서 조금 헷갈렸는데 이해가 잘 되네요.
          • 진영
            완료
          • 한라봉
            완료
          • Michael
            완료
          • 김재현
            재밌다 진심
            회사 끝나고 이걸 계속 보고 있다니!
          • 필립
            재밌어요.
          • 로버트한
            감사합니다.^^
          • 감사합니다
          • 교육하는 개발자
            완료
          • 코딩하는초딩
            완료
          • 시간속으로
            완료
          • 이시권
            좋은 선생님을 만나니, 수많은 노력들을 통해 최소한으로 정리된 내용을 아주 쉽고 빨리 배울수 있음에 너무 놀랍고 감사합니다^^ 더운 여름 지치지 않으시길 응원합니다.
          • aimerthis(이성민)
            감사합니다
          • 감사합니다.
          • 과천영일
            css style정말 신기합니다.
          • 뫄뫄
            CSS 에서 선택자, 속성 알아가기! 오늘도 좋은 강의 감사합니다.
          • 송진영
            ㅎㅎ
            하나하나 배워가는 재미가 있네욯 ㅎㅎㅎ
          • 홍청
            selector 선택자 a 코드
            {} declaration 선언자
            color: property
            red : value

            어떤것이 어떤지 알면, 질문할 수 있음. 자신이 모르는 것이 어떤 것인지 알 수 있음.
          • 바다의왕자
            잘 듣고 갑니다.
          • 코딩 입문자
            2018-06-09 잘 보고 갑니다!
          • 반자동
            좋습니다 좋아요
          • 솔백아
            2018.05.03 잘 봤습니다 감사합니다~
          • Dani Choi
            Webpage에 CSS삽입방법
            1. style tag (selector, declaration)
            2. style property (selector is not needed because it's within tags)

            Now we can search selectors or properties we want to use
          • 이주현
            감사합니다 더 좋은 강의 부탁해요
          • 스페이스몽키
            감사합니다. 점점 알아가고 발전하는 것 같아서 기분이 너무 좋네요!
          • Dreaming_Joyy
            selector으로 body의 글을 모두 조정하면서 <style> tag를 활용해서 CSS 문법을 도입하고, 선언을 통해 디자인을 만들고; 글에서 직접 html속성으로 css의 효과를 내어 보기도 했네요! 선택자와 선언, 그리고 속성까지... 효율적 디자인!!
          • sc0tty
            다른 방법 소개도 나올까요...?
            인터넷에 찾아보니 아래와 같이도 똑같은 효과를 낼 수 있네요.
            <style type"text/css">
            a:link {text-decoration:none; color: white;}
            a:visited {text-decoration:none; color: white;}
            a:active {text-decoration:none; color: red;}
            a:hover {text-decoration:none; color: red;}
          • 제갈량
            스타일 시트는 속성이 다양하기 때문에
            일일이 속성을 다 기억해내기에는 어렵습니다.
            그래서, 에디터는 자동완성을 해줄 수 있는 에디터를 쓰라고 말하고 싶네요.
            브락켓이나 아톰으로 쓰시기를 권해 드립니다.
          • 멜번리디아
            알찬강의 잘 들었습니다. 감사합니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기