WEB2 - CSS

혁명적 변화

수업예고

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

 

 

속성의 기본

강의

 

 

소스코드

변경된 내용

 

 

혁명적인 변화

댓글

댓글 본문
작성자
비밀번호
  1. 지영 강
    저도 아직 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
            많이배우고가요 감사합니다^^
          • 감사합니다.
          • 도기맘
            용어들이 낯설지만 잘 따라가겠습니다
          • BY Chin
            감사합니다
          • jaehyun2018
            지금 이 수업을 WEB1의 HTML에서 이어서 하면서 굳이 GitHub에 바로바로 수정해보고 있는데, HTML 안에 style=color:red; text:decoration:underline; 에서 띄어쓰기했더니 적용이 안되더라고요.^^;
            조금 느리기는 하지만 따라가고 있습니다.^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기