7l log

0530 CSS 본문

2022

0530 CSS

HAPAGO 2022. 5. 30. 18:30

 

css의 역할 : 웹 꾸미기

같은 내용의 페이지라도 css에 따라 아래와 같이 달라짐

CSS Zen Garden: The Beauty of CSS Design

 

 

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

 

 

 

내부스타일 시트 만드는 방법

<head> </head>안에 <style></style> 만들기

<style>

h1{color: blue;

}

</style>

 외부스타일 시트 만드는 방법

스타일 정보만 따로 모아서 별도의 문서로 저장한 다음, 웹문서에 연결

.css 파일 형식으로 저장.

<style></style>태그는 들어가지 않고, 선택자하고 스타일 규칙만 들어감

<link href="css/ex.css" (css파일 경로 확인) rel="stylesheet">

 

선택자

타입선택자

p{

color: blue;

}

p태그인 부분 모두 파란색으로 됨

class 선택자

문서안에서 여러번 사용 가능, 고유성을 가짐

. (쩜으로 접근)

.redtext(임의로 알아보기 쉬운 이름){

color: red;

}

사용방법 ex)

<p class= "redtext"

<p> <span xlass="redtext">레드향 이라 불린다.</p>

id 선택자

문서 안에서 그 요소 하나를 유일하게 만드는 것이기 때문에 , 한 번만 사용하여야 함

#container{

border:1px solid #222;

padding:10px;

}

 그룹선택자

선택자를 쉼표로 묶을 수 있음

h1, p{

color: blue;

}

 

id > class  >  태그 선택자 순으로, 가중치가 같을 땐 나중에 나오는 걸로 적용됨

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <!-- 2. <style></style> 안에 css 코드롤 넣어서 사용. html 문서안에 작성 !! -->

  <style>
/* 선택자{속성: 속성값} */
p{color:red}

  </style>
</head>
<body>
  <!--1. inline style sheet: html 태그의 속성 style을 이용 !! -->
  <h1 style="color:blue">레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

 

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title> css사용해보기!! </title>
</head>
<body>
    <h1> css사용해보기</h1>
    <p> test1111111</p>
    <p>test22222222</p>
    <p>test33333333</p>
    <p>test4444444444</p>
    <p>test55555555<strong> 이렇게 사용하면 ~~~</strong>아무거나 </p>
    <h2>이런 태그도 써봐요</h2>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title> css사용해보기!! </title>
</head>
<body>
    <h1> css사용해보기</h1>
    <p style="color: rgb(54, 255, 47)"> test111111111111</p>
    <p> test1111111</p>
    <p>test22222222</p>
    <p>test33333333</p>
    <p>test4444444444</p>
    <p>test55555555<strong> 이렇게 사용하면 ~~~</strong>아무거나 </p>
    <h2>이런 태그도 써봐요</h2>
</body>
</html>

 

 

캐스케이딩 스타일 시트

우선순위에 따라 적용할 스타일을 결정함

1. 얼마나 중요한가

사용자스타일 (시스템상 정해져 있음)-> 제작자 스타일 (css로 만든) -> 브라우저 스타일 

2. 얼마나 한정지을 수 있는가

!important -> 인라인 스타일 -> id스타일 -> 클래스 스타일 -> 타입 스타일

3. 자식요소에서 별도로 스타일을 지정하지 않으면 부모요소에 있는 스타일 속성들이 자식요소로 전달됨

단, 모든 속성이 상속되는 것은 아님(예:  글자색은 상속되지만 배경색은 상속되지 않음)

<!DOCTYPE html>
 
 

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 폰트 사용하기</title>
    <style>
      @font-face {
        font-family: 'abc';  /* 폰트 이름 */
        src: local('Ostrich Sans'),
              url('fonts/ostrich-sans-bold.woff') format('woff'),
              url('fonts/ostrich-sans-bold.ttf') format('truetype'),
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }
     
      .wfont{
        font-family: abc;
      }
    </style>
</head>
<body>
  <p>Using Default Fonts</p>
  <p class="wfont">Using Web Fonts</p>
</body>
</html>

 

 

 

주석처리 방법: ctrl + /(슬러시)

또는 ctrl+ ?(물음표) 

블럭레벨, 인라인레벨, 포지션, 플로트, 박스

저작자표시 비영리 변경금지 (새창열림)

'2022' 카테고리의 다른 글

0602  (0) 2022.06.02
0531  (0) 2022.06.02
0527 HTML  (0) 2022.05.27
[R데이터분석] 날짜와 시간 관련함수(package: lubridate)  (0) 2022.04.24
[R데이터분석] 리스트, 데이터프레임  (0) 2022.04.24
'2022' Related Articles more
Comments