WEB2 - CSS

CSS의 등장

수업예고

웹이 태어난 직후에 HTML에는 디자인을 위한 코드가 대거 추가됩니다. 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시킵니다. 이를 극복하기 위해서 웹을 만드는 사람들은 디지털 정보의 세계를 완전히 바꿔놓을 기술을 궁리하기 시작하는데...

 

 

강의

 

 

 

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. JN87
    p 태그에 style 속성을 주시면 모든 단락에 동일하게 적용되구요.
    단락 중 '일부'만 바꾸시려면, 그 바꾸시려는 일부를 <span> 태그로 감싸시면 될거예요.


    예를들어 p 태그의 모든 폰트를 파란색으로 했지만, 그 중 '가나다라' 라는 폰트만 붉은색으로 하고싶다면?

    1. style 속성을 사용하여 적용하기

    <p style="color:blue">
      <span style="color:red">가나다라</span>마바사아자차카타파하
    </p>

    ----------------------------------------------------------------------------------

    2. CSS로 적용하기
    .
    .
    <style>
      p { color:blue; }
      span { color:red; }
    </style>
    .
    .
    <body>
      <p>
        <span>가나다라</span>마바사아자차카타파하
      </p>
    </body>

    ==================================

    이런식으로요.
    근데 style 속성을 사용하는 방법은 별로 추천하는 방법이 아니라고들 하네요.
    대화보기
    • 한재민
      첫번째 질문은 다음 강의를 보고 답을 찾았습니다. 두번째 질문의 뜻은, <p>태그 안에 있는 단락 중, 제가 색을 바꾸고 싶은 것이 있다면 어떻게 바꾸어야 하는지가 궁금했습니다. 똑같이 style = color : red를 넣으면 되나요??
    • 한재민
      혹시 a태그 뒤에 있는 모든 글이 아닌, 단일한 글의 색만 바꾸고 싶거나, a태그 뒤에 있지 않은 문장의 색을 바꿀 수 있는 방법도 있나요??
    • 김진수
      감사합니다
    • PassionOfStudy
      18-01-14 1일차 - 2번째 강의

      수강완료!

      --------------------------------------------------------------------------------
      CSS 사용방법

      <style>
      a {
      color: red;
      }
      </style>
    • goosen
      많이 배우고가요 감사합니다^^
    • Fiat
      감사합니다.
    • BY Chin
      감사합니다
    • 포카리40932
      감사합니다!
    • 임찬
      저도 같은 실수를 하고 헤매다가 곰곰이 생각해보니 htdocs안의 코드를 바꿔야 했더라구요 ㅋㅋ
      바로 안되길래 github에 올린 코드를 수정하고 실행해보고나서야 깨달았어요
      대화보기
      • 서영훈
        ctrl+o 를 통해서 파일을 열먼 css 코드를 통해서 색깔변화가 가능한데,

        왜 bitnami 서버를 통해서 index를 들어가면 왜 저장해도 변화가 적용이 안될까요?ㅠㅠ


        =========================================================
        이해했습니다!

        htdoc 파일에 있는 index를 수정해야 서버에서 업데이트가 되는군요 실수로 서버가 연결되어있지않은 web폴더를 수정시켜놓고 헷갈려햇네요

        항상 좋은수업감사드립니다!
      • 별밤
        CSS 수업예고 글귀가 스타워즈 인트로급이네요. 늘 감사합니다.
      • 이주형
        감사합니다~!^_^
      • SongD
        감사합니다 ^^
        대화보기
        • 김현태
          감사합니다!!
        • nevertoolate
          감사합니다
        • 사람
          참고로 주석 <!--
          이고잉
          -->
          이런식으로 하는게 귀찮으시다면 아톰 에디터 기준으로 주석하고싶은 코드를 드래그 하신다음
          윈도우:ctrl + /
          맥: 커맨드 + /
          하면 자동으로 주석이 됩니다 풀고싶으면 다시 드래그 하고 ctrl + /
        • Wallace Lee
          고맙습니다.
        • GoldPenguin
          좋은 강의 감사합니다 !!
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기