CSS3 Basic

CSS3 : 선택자와 단위

CSS(Cascading Style Sheets, 종속형 스타일 시트) : 웹 페이지의 외형을 결정하는 선언형 언어
특정 HTML 태그를 선택할 때 선택자를 사용
CSS3 선택자 종류

기본 선택자

전체 선택자 : *(아스테리스크) 웹 페이지 전체(모든 요소 포함)
(margin(선 바깥 부분), padding(선 안 부분) 등의 기본 속성을 제거하는 용도)
ex)
```
<head>
  <style>
    * { color: red; }
  </style>
</head>
```
태그 선택자 : 태그
ex)
```
<head>
  <style>
    h1 { color: red; }
  </style>
</head>
```
- 다중 선택(여러 개의 태그를 한번에 정의하여 공통의 속성을 적용시킬 수 있다.(ex. p, h1, h2 { ~~ })

아이디 선택자 : #아이디 (중복 불가)
ex)

<style>
  #myHeader {
    background-color: yellow;
  }
</style>
    
<h1 id="myHeader">My Header</h1>

클래스 선택자 : .클래스 (중복 가능)
ex1) 중복된 클래스를 적용하려면 띄어쓰기로 구분하여 한 개의 태그에 여러 클래스를 입힐 수 있다!!

<style>
  .select{ color: yellow; }
  .spring{ background-color: green; }
  .autumn{ background-color: brown; }
</style>
<body>
  <ul>
    <li class="select spring">딸기</li>  <----------- 클래스와 클래스의 띄어쓰기
    <li>수박</li>
    <li class="select autumn">사과</li>
  </ul>
</body>

ex2) 중복의 클래스 설정 후에도 특정 태그에만 반영하는 방법도 있다.

<style>
  li.select{ color: yellow; }  <----------- 태그와 .클래스의 띄어쓰기 없이
  .spring{ background-color: green; }
  .autumn{ background-color: brown; }
</style>
<body>
  <h1 class="select">제목 글자</h1>
  <ul>
    <li class="select spring">딸기</li>
    <li>수박</li>
    <li class="select autumn">사과</li>
  </ul>
</body>

속성 선택자
- 선택자[속성 = 값]
  ex)
```
<style>
  input[type="text"] { background-color: blue; }
</style>
<body>
  <form>
    <input tpye="text">
  </form>
</body>
```
- 선택자[속성 ~= 값]
  ex) div[data-role ~= row]
- 선택자[속성 |= 값]
  ex) div[data-role |= row]
- 선택자[속성 ^= 값]
  ex) div[data-role ^= row]
- 선택자[속성 $= 값]
  ex) div[data-role $= 9]
- 선택자[속성 *= 값]
  ex) div[data-role *= row]

후손 선택자 : 선택자 선택자
ex)

<style>
  #header h1 { color: red; }
</style>
<body>
  <div id="header">
    <h1 class="title">lorem ipsum</h1>   <------- #header의 h1 태그는 모두 적용
    <div id="nav">
      <h1>navigation</h1>   <-------
    </div>
  </div>
</body>

자손 선택자 : 선택자 > 선택자
ex)

<style>
  #header > h1 { color: red; }
</style>
<body>
  <div id="header">
    <h1 class="title">lorem ipsum</h1>   <------- #header의 자손인 h1이므로 적용 
    <div id="nav">
      <h1>navigation</h1>   <------- #nav의 자손이므로 적용 안됨
    </div>
  </div>
</body>

반응 선택자
- :active : 사용자가 마우스를 클릭한 태그 선택
- :hover : 사용자가 마우스 커서를 올린 태그 선택
상태 선택자
- :checked : check가 된 상태의 input 태그 선택
- :focus : 포커스를 맞춘 input 태그 선택(자판 커서를 활성화한 상태)
- :enabled : 사용 가능한 input 태그 선택
- :disabled : 사용 불가능한 input 태그 선택
```
<body>
  <input value="enabled">
  <input value="disabled" disabled="disabled">
</body>
```
구조 선택자
- :first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택
- :last-child : 형제 관계에서 마지막으로 등장하는 태그 선택
- :nth-child(수열) : 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택
- :nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택
- 주의사항 : 아래 예제의 위 코드는 첫번째 항목만 적용되는 것이 아니라 같은 라인의 a태그 항목은 전부 적용된다. 아래와 같이 작성해야 한다.
```
<style>
  li > a:first-child {} 
  li:first-child > a {}
</style>
```
border-radius 등의 스타일 적용 위치는 시계방향 : 좌상 -> 우상 -> 우하 -> 좌하
단위
- 크기 단위
  - % : 백분율 단위
  - em : 배수 단위
  - px : 픽셀 단위
- CSS font-size 표

CSS3 속성

박스 속성

margin, border, padding, width, height 속성을 합친 것
태그 전체 크기 구하는 공식
- 전체 너비 = width + 2*(margin + border + padding)
- 전체 높이 = height + 2*(margin + border + padding)
margin / padding 속성 방향 적용
css 속성 통합적용 순서 : 너비(두께), 종류(형태), 색상
*margin: auto* : 가운데 정렬
border-radius 방향 적용 순서 : 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 (시계방향)

가시 속성(display)

웹 페이지에 보이는가, 보이지 않는가 중 화면에 보이는 속성을 칭함
display(가시) 속성의 inline과 inline-block의 차이점
- inline은 width, height 드으이 크기 속정 적용 안됨
- inline은 margin 속성이 왼쪽, 오른쪽만 적용 됨

배경 속성(background)

배경 이미지 2개 삽입 : url('~~.png'), url('!!!.png') 이와 같이 작성하며, 콤마(,)로 구분
- 왼쪽에 위치한 이미지가 오른쪽 이미지보다 상단(전면)에 위치
배경 이미지 화면 고정 : background-attachment 사용

글자 속성(font)

컴퓨터에 설치된 글꼴 사용 : font-family
두께 : font-weight
스타일 : font-style
글자 정렬 : font-align
- text-align : justify : 양 끝 정렬
- span 태그는 inline 형태이므로 너비가 없어 중앙이라는 개념이 없음(text-align: center 불가)
- 글자 수직 중앙 정렬 : 버튼(box)의 수직 사이즈와 동일한 사이즈로 line-height를 준다
a 태그에 자동 밑줄 기능 제거 : text-decoration: none

위치 속성(position)

절대위치(x,y축 좌표값) 이용시
- absolute : 항상 지정한 자리에만 위치, 부모 relative 안에서 특정 위치를 차지
- fixed : 스크롤에 상관없이 항상 그 자리에 위치
상대위치(개체의 상대적 위치, 부모-자식) 이용시
- static : 위에서 아래로, 왼쪽에서 오른쪽으로
- relative : static 기준으로 상하좌우, 자식(absolute)일 때 자식을 케어하기 위해 관계를 유지하기 위한 용도
위치속성 공식
1. 자손의 position 속성에 absolute 키워드를 적용하려면 부모에 height 속성을 입력합니다
2. 자손의 position 속성에 absolute 키워드를 적용하려면 부모의 position 속성에 relative 키워드를 적용합니다.
  ex)
```
  body > div {
 width: 400px; height: 100px;
 border: 3px solid balck;
 position: relative;
  }
```
  유동 속성(float)
float 속성을 여러 개 적용할 때, left와 right의 순서를 잘 알아둬야 함
- float 속성이 2개(1번,2번)가 적용될 경우,
  - left하면 왼쪽부터 오른쪽으로 1번, 2번으로 한 줄 정렬
  - right하면 오른쪽부터 왼쪽으로 1번, 2번으로 한 줄 정렬

그림자 속성(shadow)

글자에 부여하는 text-shadow
박스에 부여하는 box-shadow
그림자 속성 순서
중첩 그림자 만들기
- 위와 같이 연속하여 작성
- 손쉽게 만들어주는 사이트 : css3gen
gradient
- 손쉽게 만들어주는 사이트 : colorzilla
- 선형 gradient 함수

반응형 웹 패턴

반응형 웹 위치 잡을 때 고려해야 할 규칙
- html 태그 구성은 모바일 장치를 기준으로 함
- float 태그의 left와 right를 활용해 적당한 위치에 두어야 함
반응형 웹 / 적응형 웹 차이
- 반응형 웹 : 데스크톱과 모바일에 상관 없이 출력기기 사이즈에 맞춰서 홈페이지 사이즈가 조정되는 것
- 적응형 웹 : 데스크톱 버전과 모바일 버전의 홈페이지가 따로 존재(ex. 네이버, 페이스북)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>패턴1</title>
    <meta name="viewport" content="user-scalalbe=no, initial-scale=1, maximum-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        #menu {
            width: 260px;
            float: left;
        }
        #section {
            width: 700px;
            float: right;
        }
        li {list-style: none;}

        @media screen and (max-width: 767px) {
            body { width: auto }
            #menu { width: auto; float: none; }
            #section { width: auto; float: none;}
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>메뉴A</li>
            <li>메뉴B</li>
            <li>메뉴C</li>
        </ul>
    </div>
    <div id="section">
        <h1>Lorem ipsum</h1>
        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"</p>
    </div>
</body>
</html>

전체화면 사이즈
사이즈 700
- 반응형 태그에 지정한 사이즈 이하로 내려가면 자동으로 위,아래로 조정됨

January 19, 2020 에 작성

Tags: CSS3