자기개발/빅데이터_R과 파이썬

Internal CSS 선택자 사용하기

안박 2022. 11. 8. 19:01

1) p : 태그 선택자

   태그 선택자는 선택자로 태그명을 지정하여 태그의 영역을 선택함으로써 다음에 오는 CSS명령으로 적용

2) #fly: id 선택자

   웹페이지 안에서 단 하나의 영역을 지정하는데 선택하는 선택자 ---- '잠자리'만 빨간색

3) .blue: 클래스 선택자

   웹페이지 안에서 두 군데 이상의 특정 영역을 지정하는데 사용하는 선택자 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  
  <style>
  p{font-size:14pxline-height:180%}

  #fly{color: red; font-weight: bold;}
  .blue{color: blue;}
  </style>
  
  <title>Document</title>
 </head>
 <body>
   <h3> 잠자리란? </h3>
   <p><span id='fly'> 잠자리</span>는 잠자리목에 속하는 곤충으로 전 세계적으로 분포하는 포식성 곤충이며 여러 가지 해충을 잡아먹는 유익한 곤충입니다</p>
   <p>앞머리에 커다란 <span class='blue'>한 쌍의 겹눈</span>을 가지고 있습니다. 또한 <span class='blue'> 날카로운 턱</span>을 가지고 있으며, 이빨이 튼튼합니다. 파리, 모기, 나비 등의 살아있는 곤충을 잡아먹고 삽니다. </p>

 </body>
</html>

* span tag 는 오른쪽 글 읽어가는 방향

* div tag 는 글 아래 방향

 

 

 

<!doctype html>
<html lang="Ko">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <style>
  body {font-family: '돋움';}

  h3{font-family: '맑은고딕'; color: blue;}
  
  p{font-size: 14px; line-height: 150%}

  li{list-style-type: square; font size:16px;}

  span{font-weight: bold;}
  </style>

  <title>Document</title>
 </head>
 <body>
   <h3> 배낭여행이란? </h3>
   <p>여권, 항공권 등 여행 시 필요한 것만을 준비하고 현지에서 숙박, 식사 등을 해결하는 자유여행을 말합니다.</p>

   <h3> 배낭여행의 종류 </h3>
   <p>배낭여행에는 모든 일정을 자신이 정하는 자유배낭, 여러 명이 같이 출발 전 숙소와 교통편 등을 미리 예약하고 여행하는 단체 배낭, 자유 배낭과 단체 배낭의 중간 형태인 패키지 배낭여행이 있습니다</p>

   <h3>배낭여행 준비</h3>
   <ul>
   <li><span>여권 준비</span>: 여권이 없으면 신청하고 여권 유효기간을 반드시 체크. </li>
   <li><span>비행기예약</span>: 항공사 예매 나 예약대행 이용. </li>
   <li><span>여행스케쥴</span>: 세부적으로 잘 짜기. </li>
   <li><span>짐싸기</span>: 간단하게 꼭 필요한 것만. </li>
   </ul>
  
 </body>
</html>

https://www.w3schools.com/css/css_syntax.asp

 

CSS Syntax

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

참고 : External CSS  <link rel="stylesheet" href="mystyle.css"> 

https://www.w3schools.com/css/css_howto.asp

 

How to add CSS

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com