WEB2 - CSS

혁명적 변화

수업예고

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

 

 

속성의 기본

강의

 

 

소스코드

변경된 내용

 

 

혁명적인 변화

댓글

댓글 본문
작성자
비밀번호
  1. 키보드치는남자
    잘들었습니다
  2. 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;}
          • 제갈량
            스타일 시트는 속성이 다양하기 때문에
            일일이 속성을 다 기억해내기에는 어렵습니다.
            그래서, 에디터는 자동완성을 해줄 수 있는 에디터를 쓰라고 말하고 싶네요.
            브락켓이나 아톰으로 쓰시기를 권해 드립니다.
          • 멜번리디아
            알찬강의 잘 들었습니다. 감사합니다.
          • jayxwoo
            오늘도 강의 잘 듣고 갑니다.
          • 제로스
            <style>
            a{
            color : blue;
            text-decoration : none;
            }
            </style>
          • egoing
            네 맞습니다. 다른 곳에 적어도 작동하지만 약속 위반이랍니다.
            대화보기
            • 코딩초보
              안녕하세요. 공부를 잘하고 있는데 질문이 있습니다.
              원래 style 태그는 head와 body만 적용되는 것인가요?
              p에는 적용이 자동으로 안되서 궁금하더라구요 ㅎㅎ
              구글링을 해보니 약속으로 head랑 body만 적용되도록 했다고 하는데.. 맞나요?
            • Mingi Son
              180209 감사합니다
            • 잘할
              180122 완료입니당! 재밌어옄!! 최소로 배워서 최대로 사용하겠습니당!
            • 180119 감사합니다!
            • PassionOfStudy
              18-01-14 1일차 - 3번째 강의

              수강완료!


              선택자와 속성의 차이를 구분할 수 있게 되었습니다. ^_^
            • goosen
              많이배우고가요 감사합니다^^
            • 감사합니다.
            • 도기맘
              용어들이 낯설지만 잘 따라가겠습니다
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기