웹 어플리케이션 기초

CSS 기초

CSS(Cascading Style Sheet)

HTML에 종속된 스타일 문서를 만드는 언어 

<style>

  선택자(selector) {서술(description)}

  선택자 {속성1:값; 속성2:값; }

</style>

 

선택자 종류

  • 상위엘리먼트 하위엘리먼트 순으로 순차적으로 적용
  1. 선택자명 : tag 명
  2. #선택자 : tag의 id
  3. .선택자 : tag의 class


선택자 심화학습
ex_css_1.html

    
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     h1,h2 {
       color:red;
       font-size:10px
    }
    h2{
      text-decoration:underline;
    }
    header h1{
      border:1px solid red;
    }
   </style>
</head>
<body>
<header>
  <h1>CSS</h1>
</header>
<h2>JavaScript</h2>
<h3>HTML</h3>
<h1>PHP</h1>
</body>
</html>

 
박스모델
ex_css_2.html


<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     #selected {
       border:red 1px solid;
       padding:30px;
       margin:50px;
     }
     #extra {
       border:blue 1px solid;
     }
   </style>
</head>
<body>
  <ul>
    <li>html</li>
    <li id="selected">css</li>
    <li id="extra">javascript</li>
  </ul>
</body>
</html>

 

마진과 패딩

float : 페이지 내의 물체의 흐름식 배치 방식
 ex_css_3.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     img{
       border:1px solid red;
       float:right;
    }
   </style>
</head>

<body>
    <p>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
    생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 것을 목적으로 하는 비영리 활동입니다. 그간 프로그래머들이 이룩한 성취를 일반에 알려서 고독한 프로그래머들의 관객을 모객하는 활동이기도 합니다. 생활코딩은 세 가지로 구성되어 있습니다.
    </p>
    <h2>웹 프로그래밍</h2>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>javascript</li>
        <li>PHP</li>
        <li>mysql</li>
    </ol>

    <h2>공동공부</h2>
    <p>
    공동공부는 온라인의 편리한 접근성에 오프라인의 함께하는 느낌을 하이브리드한 공부방식입니다.공동공부를 통해서 덜 외롭게 공부할 수 있습니다. 아래 동영상은 공동공부에 참여하는 방법입니다.
    </p>
</body>

</html>

댓글

댓글 본문
작성자
비밀번호
버전 관리
휴먼밸
현재 버전
선택 버전
graphittie 자세히 보기