3. 선택자 fin ~ 타이포그래피

룰루루 2021. 3. 30. 23:13

2021. 3. 30. 23:13

#1. 가상 클래스 선택자(pseudo class selector)

: class 선택자처럼 여러 대상에 속성을 지정할 수 있지만, class 선택자는 아닌 것을 의미

=> id나 class 또는 태그 지정:pseudo class selector {디자인 속성 지정}

ex) #fancy:hover{background-color:blue}

: id가 fancy인 요소에 마우스가 올려져 있을 때(=hover)->가상클래스선택자 해당 서식을 적용한다는 의미

가상 클래스 선택자에도 여러 종류가 있는데, 그 중 간단하게 몇 가지만 알아보았다.

1) active

: 해당 요소를 클릭하고 있을 때를 의미.

2) visited

: 주로 <a> 태그와 함께 사용. 이미 클릭한 링크에 적용됨

3) link

: visited 와 반대 경우에 사용. 클릭하지 않은 <a> 링크에 적용됨

4) hover

: 해당 부분에 마우스 커서를 올리고 있을 때 디자인 서식이 적용됨

+) 그 외, 지난 시간에 배운 부분도 pseudo class selector로 사용될 수 있음

ex) p i:first-child => <p> 태그 안의 <i> 태그 중 first-child 인 요소에만 디자인 적용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>beta file</title>
    <style>
      #one:hover {background-color:IndianRed}
      #two:hover{background-color:lightSalmon}
      #three:hover{background-color:gold}
      #four:hover{background-color:greenyellow}
      #five:hover{background-color:lightskyblue }
      
      a.stylish:visited{color:green}
      strong.stylish:hover{background-color:lavender}
      a.ping:active{background-color:lightsteelblue ; color:black}
    </style>
  </head>
  <body>
      <p>his article is about the mathematical study of optimizing agents. For the mathematical study of sequential games, see <strong class="stylish">Combinatorial game theory</strong>. For the study of playing games for entertainment, see Game studies. For the YouTube series, see <strong>MatPat</strong>. For other uses, see <strong class="stylish">Game theory</strong> (disambiguation).</p>
      <a href="naver.com"Complex systems organizational map.jpg></a>
      <a href="daum.com"Complex systems></a>
    <ol>
    <li id="one">  Topics </li>
    <li id="two">  Self-organization </li>
    <li id="three">  Collective behaviour </li>
    <li id="four">  Networks </li>
    <li id="five">  Evolution and adaptation </li>
    <li class="stylish">  Pattern formation </li>
    <li class="stylish">  Systems theory </li>
    <li class="stylish">  Nonlinear dynamics </li>
    <li class="stylish">  Game theory </li>
  </ol>

    <h3>Reference Sites</h3><ul>
    <li><a href="https://opentutorials.org/course/1" class="stylish">  Part of a series on </li></a>
    <li><a href="https://youtube.com" class="stylish">  Economics </li></a>
    <li><a href="https://naver.com" class="ping">  IndexOutlineCategory </li></a>
    <li><a href="https://daum.net" class="ping">  HistoryBranchesClassification </li></a>
    <li><a href="https://portal.korea.ac.kr" class="ping">  ConceptsTheoryTechniques </li></a>
    <li><a href="https://blog.naver.com" class="ping">  By application </li></a>
    <li><a href="https://webtoon.naver.com" class="ping">  Notable economists </li></a>
    <li><a href="https://mail.naver.com" class="ping">  Lists </li></a>
    <li><a href="https://google.co.kr" class="ping">  Glossary </li></a>
    <li><a href="https://en.wikipedia.org/wiki/Game_theory" class="stylish">  Emblem-money.svg Business portal </li></a>
    <li><a href="https://tistory.com" class="stylish">  Bills and coins.svg Money portal </li></a></ul>

<br><br>
    <article> <p>Game theory is the study of mathematical models of strategic interaction among rational decision-makers.[1] It has applications in all fields of social science, as well as in logic, systems science and computer science. Originally, it addressed zero-sum games, in which each participant's gains or losses are exactly balanced by those of the other participants. In the 21st century, game theory applies to a wide range of behavioral relations, and is now an umbrella term for the science of logical decision making in humans, animals, and computers.</p>
      <p>Modern game theory began with the idea of mixed-strategy equilibria in two-person zero-sum games and its proof by John von Neumann. Von Neumann's original proof used the Brouwer fixed-point theorem on continuous mappings into compact convex sets, which became a standard method in game theory and mathematical economics. His paper was followed by the 1944 book Theory of Games and Economic Behavior, co-written with Oskar Morgenstern, which considered cooperative games of several players. The second edition of this book provided an axiomatic theory of expected utility, which allowed mathematical statisticians and economists to treat decision-making under uncertainty.</p>
      <p>Game theory was developed extensively in the 1950s by many scholars. It was explicitly applied to evolution in the 1970s, although similar developments go back at least as far as the 1930s. Game theory has been widely recognized as an important tool in many fields. As of 2014, with the Nobel Memorial Prize in Economic Sciences going to game theorist Jean Tirole, eleven game theorists have won the economics Nobel Prize. John Maynard Smith was awarded the Crafoord Prize for his application of evolutionary game theory.</p></article>
  </body>
</html>

Q. #one, #two, ... 이렇게 id를 지정하는데 번거로운 부분이 있었다. id 선택자도 <ol> 태그처럼 순서대로 지정할 수 있는 방법이 있을까?

#1-2. 속성을 공부하는 방법

: 속성(property)을 많이 사용하는 순서대로 통계를 보면, 많이 사용되는 속성은 크게 타이포그래피, 색상, 박스 타입 으로 정리된다. 많이 사용되는 것 위주로 공부해 보자.

#2. 타이포그래피

: 웹페이지에 쓰이는 글씨에 대한 디자인 서식을 의미

1. font-size

여러 단위가 있다(px, em, rem). 지금은 rem 을 권장한다. 이유는?

1) px : 글자 크기 고정. 브라우저의 설정을 변경해도 글씨 크기가 고정됨

2) rem : 글자 크기 가변적. 브라우저의 설정을 변경하면 그에 따라 크기가 변함

ex) rem 은 웹페이지의 [검사(inspect)]를 눌렀을 때 <html>의 폰트 크기와 비례해서 크기가 변한다. 그러나 px는 이에 상관없이 고정된다.

<html>
  <head>
    <meta charset="utf-8">
    <title>beta file</title>
    <style>
      .px{
        font-size:32px ; color:limegreen
      }
      .rem{
        font-size:2rem ; color:orchid
      }
    </style>
  </head>
  <body>
    <article> <p><div class="px">Game theory is the study of mathematical models of strategic interaction among rational decision-makers.[1]</div> <br><div class="px">It has applications in all fields of social science, as well as in logic, systems science and computer science.</div><br> <div class="rem">Originally, it addressed zero-sum games, in which each participant's gains or losses are exactly balanced by those of the other participants.</div><br><div class="rem"> In the 21st century, game theory applies to a wide range of behavioral relations, and is now an umbrella term for the science of logical decision making in humans, animals, and computers.</div></p>
      <p>Modern game theory began with the idea of mixed-strategy equilibria in two-person zero-sum games and its proof by John von Neumann. Von Neumann's original proof used the Brouwer fixed-point theorem on continuous mappings into compact convex sets, which became a standard method in game theory and mathematical economics. His paper was followed by the 1944 book Theory of Games and Economic Behavior, co-written with Oskar Morgenstern, which considered cooperative games of several players. The second edition of this book provided an axiomatic theory of expected utility, which allowed mathematical statisticians and economists to treat decision-making under uncertainty.</p>
      <p>Game theory was developed extensively in the 1950s by many scholars. It was explicitly applied to evolution in the 1970s, although similar developments go back at least as far as the 1930s. Game theory has been widely recognized as an important tool in many fields. As of 2014, with the Nobel Memorial Prize in Economic Sciences going to game theorist Jean Tirole, eleven game theorists have won the economics Nobel Prize. John Maynard Smith was awarded the Crafoord Prize for his application of evolutionary game theory.</p></article>
  </body>
</html>

2. font-color

색깔을 지정하는 방법은 세 가지가 있다.

1) 색깔 이름으로 지정

ex) #ping { color : lightgray }

2) HEX 값으로 지정

ex) h1 { color : #ffffff }

3) RGB 값으로 지정

ex) .dobby { color : rgb(60,60,60) }

+) 색깔을 투명하게 지정할 수 있다.

(opacity 라고 표현하기도 함. 0~1의 값. 0 : 투명 <-> 1 : 불투명)

1) 색깔 이름으로 지정 -> 없음(이미 같은 색깔의 다양한 투명도 버전인 색깔들이 많아서 그런 듯)

2) HEX 값으로 지정 -> #RRAAGGBB 형태의 값. (A: alpha(투명도), R : red, G : green, B : blue) 투명도 없는 색상은 AA를 제외한 6자리를 입력하지만, 투명도를 추가하려면 앞에 두 글자를 추가해주면 된다.

ex) #highlight { color : #ff4D6347 } => 4D 가 투명도를 의미, ff6347 은 색깔을 의미.

(-> gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 각 투명도에 따라 어떤 글자를 추가하면 되는지 알려줌)

3) RGB 값일 때 지정

ex) .dobby { color : rgb(50,60,30,0.5) } => 50% 투명한 색깔이 나타남

3. text-align

텍스트를 어떻게 정렬할지를 지정. 총 4가지 방법이 있다.

1) 왼쪽 정렬 : text-align:left

2) 가운데 정렬 : text-align:center

3) 오른쪽 정렬 : text-align:right

4) 좌우 간격 동일하게 정렬 : text-align:justify (border 보이게 하면 좌측 우측의 공백이 동일하게 나옴)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
    <style>
      h2 { color:limegreen ; font-size : 2rem ; text-align:center }
      #left{text-align:left ; border:1px solid lightgreen}
      #center{text-align:center ; background-color:lavenderblush}
      #right{text-align:right ; color:blue}
    </style>
  </head>
  <body>
      <h2>Consierei</h2>
      <p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada id nulla vitae consectetur. Quisque pharetra massa vitae enim lobortis, in finibus nibh finibus. Nam laoreet id est quis scelerisque. Etiam fringilla ullamcorper lectus eu scelerisque. In rhoncus convallis posuere. Curabitur sagittis accumsan tellus et interdum. Praesent molestie eros elit, nec rutrum dolor pharetra non. Nulla purus lacus, ultrices sit amet venenatis non, tempor vel enim. Ut fringilla elementum orci, quis auctor tellus ultrices ut. Praesent ut dui sodales, feugiat leo hendrerit, lobortis elit. Donec erat neque, maximus non hendrerit sit amet, scelerisque sagittis arcu. Maecenas sodales in arcu sed lacinia. Maecenas molestie dui ut elit sodales, nec lobortis justo tristique. Nullam pulvinar sapien vitae magna pretium, nec consectetur odio hendrerit.</p>

      <p id="center">Suspendisse vitae nibh pretium, dictum odio vel, laoreet neque. In hac habitasse platea dictumst. Aliquam rhoncus turpis arcu, sed rhoncus eros posuere vel. Integer fermentum vel augue quis auctor. Nunc tellus ante, posuere sodales dignissim vel, bibendum vel libero. Pellentesque imperdiet pellentesque congue. Vivamus ac euismod velit, sodales fringilla risus. Curabitur nunc odio, finibus non dapibus aliquam, molestie et ligula.</p>

      <p id="right">Phasellus eget nulla tellus. Integer eget justo vitae nibh tempor porttitor. Morbi viverra lorem in tellus aliquet, vitae scelerisque tellus luctus. Praesent orci tortor, vestibulum id molestie at, blandit eu nisi. Fusce aliquam orci tellus, in congue sem tempor vitae. Vivamus eget tortor venenatis, venenatis eros nec, dignissim sem. Vestibulum porta tellus orci, sed pharetra ipsum placerat a. Curabitur in justo ex. Nunc commodo, ante quis mattis fermentum, nibh ante dictum orci, at pulvinar eros orci ac massa.</p>

      <p>In ullamcorper lectus in nunc eleifend, vitae laoreet neque dapibus. Sed non leo ut est dapibus tincidunt. Nam vel metus aliquam metus posuere vestibulum et eget ex. Ut tincidunt vulputate risus, id posuere massa faucibus non. Aenean mollis urna non urna volutpat, ut lobortis risus posuere. Sed elementum porta sapien, non pharetra arcu porta sit amet. Sed ultricies nisl accumsan sapien ornare auctor. Nulla commodo tincidunt urna.</p>

      <p>Praesent nec accumsan urna, a cursus urna. Fusce orci felis, maximus ac urna a, vulputate volutpat nulla. Nulla aliquam sem id nisi molestie, vel maximus leo viverra. Mauris id convallis odio, ultrices molestie sem. Aenean sit amet ultricies felis. Vivamus et pharetra turpis, in efficitur metus. Mauris elit diam, mollis ut iaculis sed, lobortis non orci. Vestibulum tempus cursus egestas. Nunc pretium molestie ex. Praesent justo mauris, pharetra sit amet ipsum rhoncus, molestie tempus arcu.</p>
  </body>
</html>

+) 웹 프로그래밍 경우, 연습용 텍스트가 많이 필요한 경우가 종종 있다.

이럴 때 사용하면 좋은 사이트: www.lipsum.com/

Lorem Ipsum - All the facts - Lipsum generator

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec

www.lipsum.com

의미 없는 텍스트를 대량으로 만들어주는 사이트라 유용하다.

'front-side > CSS' 카테고리의 다른 글

6. 레이아웃 추가(심화)내용 (0)	2021.04.05
5. brackets ~ 레이아웃 기초 내용 (0)	2021.04.02
4. 타이포그래피-font ~ 조화 (0)	2021.04.01
2. 선택자 (0)	2021.03.29
CSS Tutorial: (1)	2021.03.24

아스