CSS

CSS 기초 3

carrot62 2020. 8. 2. 18:29

CSS Attribute Selectors

  • [attribute]
        예) a[target]
  • [attribute="value"]
  • [attribute~="value"]
  • [attribute|="value"]
  • [attribute^="value"]
  • [attribute$="value"]
  • [attribute*="value]

Forms

input type별로 스타일을 새로 입히는 방법:

input[type=text]

Focused inputs

Input 상자에 focus를 주게 되면 브라우저별로 blue outline을 추가하기도 한다. 이 설정을 없애려면 outline: none; 속성을 추가해주면 된다.

  • :focus

Input icon/image

  • background-image
  • background-position: postion으로 위치 조정을 해줘야 한다(그래야 예쁘게 잘 나온다)

  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

Animate search input

  • transition
input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

Styling Textareas

  • resize: none : prevents textareas from being resized(오른쪽 테두리에 마우스를 갖다대면 글상자의 크기를 조정할 수 있는 grabber가 사라진다)

Form에 스타일 입히기 예제:

CSS 스타일을 입힌 form
width: 100%를 해버리면, 화면을 넘어가버리는 문제가 발생한다. 

위의 문제를 해결하기 위해서는 box-sizing: border-box 속성을 추가해주면 된다.

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<body>

<h3>Using CSS to style an HTML Form</h3>

<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Responsive Form

  • box-sizing: border-box
  • .column
.column { float: left; width: 75%; margin-top: 6px; }
  • .row
.row:after { content: ""; display: table; clear: both; }
  • Resposive layout
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Counters

CSS counter는 CSS가 관리하는 일종의 "변수"이다. CSS rule에 의해 변수의 값을 증가시킬 수 있다. 

  • counter-reset: counter 역할을 할 변수 선언
        예) counter-reset: 변수이름;
  • counter-increment
  • content
  • counter() or counters()
<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

1,2,3을 일일이 적어주지 않고, (위의 코드에서는) section이라는 변수를 두어서 증가 시켜서 같은 element인 <h2>에서 차례대로 숫자가 나타나게 하는 방법이다.

예제) Counter를 이용해서 child 값에도 index번호 나오게 하는 것(더보기 클릭):

더보기 
<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Units

Length-type units에는 두 종류가 있다

  • absolute
    • 참고로 pixel는 화면을 보는 장치에 따라 상대적인 값을 가진다.

  • relative

Specificity

같은 element으 스타일 지정을 다르게 하고 싶을 때 id 또는 class이름으로 구분하게 하는 것이다.

Specificity Hierarchy

Specificity가 큰 순서대로 스타일이 적용된다

  • inline-styles
  • IDs
  • classes, attributes and pseudo-classes(:hover, :focus)
  • elements and pseudo-elements(:before, :after)

Specificity 계산하는 방법:

Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.

  • Equal specificity일때는 제일 마지막 스타일이 적용된다
  • ID selectors have a higher specificity than attribute selectors
Example
div#a {background-color: green;}#a {background-color: yellow;}div[id=a] {background-color: blue;}

  •  * 와  body * 는 거의 0과 동일한 specificity를 가진다