1. 가시 속성

• 태그가 화면에 보이는 방식을 지정하는 속성

📎 display 속성

• 태그의 출력 방식을 조작

• 태그의 원래 영역도 사라진다.

  키워드	설명
  none	화면에 보이지 않음
  block	block 형식
  inline	inline 형식
  inline-block	inline-block 형식

💭 div태그 block 형식, span태그 inline 형식

• inline 형식 vs inline-block 형식
  • width, height, margin 차이
  • inline 형식 : width, height 적용 안됨, margin 좌우로만 지정 됨
  • inline-block 형식 : width, height 적용 됨, margin 상하좌우로 적용됨

inline 형식

inline-block 형식

💭 inline 태그가 연속으로 나열되면 태그와 태그의 공백때문에 출력 결과에 빈틈이 발생한다. 
	보통은 눈에 안 띄지만, 이미지같은 경우는 눈에 잘 띈다.

💭 이미지를 세로로 출력하기
1. <br> 사용
2. <div> 블럭태그 사용 -> 객체간에 공백이 있음
3. display: block 속성 사용 -> 객체간에 공백이 없음 (블럭태그는 기본 margin값이 0이기 때문)

💭 인접한 inline 태그 사이의 공백을 없애는 방법
1. font-size: 0; 사용

2. float 사용

    #mainmenu > img {
      float: left;
    }

    #mainmenu::after{
      content: '';
      display: block;
      clear: both;
    }
    
💭 한줄로 적는 방법
 - (float: left|right) + (::after|::before) 사용
     
     .box {
      width: 100px;
      height: 100px;
      float: left;
    }
    
     #list::after {
      content: '';
      /* 문자열은 인라인성질*/
      display: block;
      clear: both;
    }

📎 visibility 속성

• 태그를 보이거나 보이지 않게 지정

• 태그의 원래 영역은 그대로 유지된다. (눈에 보이지 않을뿐)

  키워드	설명
  visible	태그 보임
  hidden	태그 안 보임
  collapse	table 태그 안 보임

  collapse 키워드
  

  hidden 키워드
  

💭 table 태그의 collapse vs hidden

• collapse 키워드 : table 태그가 차지하는 영역이 사라짐
• hidden 키워드 : table 태그가 차지하는 영역은 그대로 유지되고 보이지만 않게 됨

📎 opacity 속성

• 태그의 투명도를 조절
• 0 ~ 1 (소수점 가능)
• 0 : 투명
• 1 : 불투명

2. 박스 속성 ⭐

🌈 Box Model(content-box, border-box)

- Box를 이루고 있는 요소

• content : 요소가 담고 있는 내용
• padding : content와 border사이의 간격
• border : 테두리 선
• margin : border와 다른 요소 사이의 간격

📎 width 속성, height 속성

• 너비, 높이
• 글자(content)를 감싸는 영역의 크기를 지정
• 단위 : px(절대값), %(상대값)

📎 margin 속성, padding 속성

• 여백

margin

• 테두리 바깥쪽 여백
• 해당 태그의 테두리와 외부 태그간의 거리
• 객체와 객체 사이의 거리
• 요소 배치용으로 사용

padding

• 테두리 안쪽 여백
• 해당 태그의 테두리와 콘텐츠 영역 사이의 거리

방향

1. padding 방향(위, 오른쪽, 아래, 왼쪽)
- padding-top: 0px;     -> 위
- padding-right: 0px;   -> 오른쪽
- padding-bottom: 0px;  -> 아래
- padding-left: 0px;    -> 왼쪽

2. top -> right -> bottom -> left
- padding: 0px 0px 0px 0px;

3. top -> (right+left) -> bottom
- padding: 0px 0px 0px;

4. top(bottom) - right(left)
- padding: 0px 0px;

5. top(right, left, bottom)
- padding: 0px;

/* margin 속성도 동일함 */

📎 전체 너비와 전체 높이

• 전체 너비 : width + 2 x (margin + border + padding)
• 전체 높이 : height + 2 x (margin + border + padding)

📎 box-sizing 속성

• 글자를 감싸는 영역의 크기를 변경할 수 있다.
• content-box : content 영역의 크기 ( width, height ) - default
• border-box : content + padding + border 영역의 크기 (진짜 눈에 보이는 상자의 크기를 width + height로 지정하는 정책)
  

📎 outline 속성

• 테두리(border)의 바깥쪽에 그려지는 선
• 영향을 주지 않는다. > 주변을 밀어내지 않는다.
• 방향이 없다.
  

3. 테두리 속성 ⭐

• 모든 태그는 사각형으로 랜더링(출력) 된다.
• 모든 태그는 자신의 영역을 가진다.
• 테두리를 넣을 때는 border-width 속성, border-style 속성과 border-color 속성을 모두 사용해야 한다.
• 일부태그는 추가 작업없이 테두리를 시각적으로 표현한다. (테이블, 폼, 이미지)

📎 border-width 속성

• 테두리의 너비

📎 border-style 속성

• 테두리의 형태
  

• width, style, color 속성을 띄어쓰기로 구분해서 입력하면 된다. (순서는 상관없다)

• 부분 스타일 지정 가능하다.

#box1{
    border-color: pink; 
    border-width: 7px;   
    border-style: solid;
}

#box2 { border: 5px dashed coral; }

#box3 {
	border-top: 2px solid red;
	border-bottom: 2px solid blue;
	border-right: 2px solid green;
	border-left: 2px solid yellow;
}

📎 border-radius 속성

• 테두리 둥글기
• 테두리가 둥근 사각형 또는 원을 만들 수 있다.
• 단위 : px, %
• 최대값 : 단축의 1/2
• % : 타원형으로 나온다.

/*           왼쪽위 오른쪽위 오른쪽아래 왼쪽아래 */
border-radius : 50px 40px 20px 10px;

4. 배경 속성

📎 background-color 속성

• 배경색

📎 background-image 속성

• 배경이미지

 body {
      background-image: url(images/dog01.jpg);
 }

📎 background-size 속성

• 배경 이미지의 크기를 조절
• 속성 |
  • 크기단위
  • contain : 너비 100% (다 보여줘)
  • cover : 높이 100% (잘려도 됨)

💭 이미지 잘림 없음, 여백 있음 - contain

#box2 {
      background-image: url(images/wall01.jpg);
     
      /* background-size: 400px auto; */
      background-size: contain
    }

💭 이미지 잘림, 여백 없음 - cover

#box1 {
      background-image: url(images/cat05.jpg);

      /* background-size: auto 400px; */
      background-size: cover; 
    }

📎 background-repeat 속성

• 배경 이미지 반복 여부
• 속성 |
  • repeat : 이미지가 반복 - default
  • no-repeat : 이미지 반복 없음
  • repeat-x : x축 방향으로 이미지가 반복
  • repeat-y : y축 방향으로 이미지가 반복

📎 background-attachment 속성

• 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정함
• 속성 |
  • scroll : 화면 스크롤에 따라 배경 이미지가 함께 이동함 - default
  • fixed : 화면 스크롤을 내려도 배경 이미지가 고정됨

📎 background-position 속성

• 배경 이미지 위치
• 속성 :
  • 크기단위
    • x축크기
    • x축크기 y축크기
  • 키워드
    • 수평( left | center | right )
    • 수직( top | center | bottom )

background-position: bottom; 
background-position: 50%;
background-position: 0px 50%;

5. 폰트 속성

📎 font-size 속성

• 텍스트 크기
• 속성 |
  • 크기단위
  • 키워드
    • xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller

📎 font-family 속성

• 텍스트의 폰트 설정
• 주의할 점 |
  • 개발하고 있는 우리의 컴퓨터에는 설치되어 있지만 우리가 개발한 웹 페이지를 사용할 사용자에게는 폰트가 설치되어 있지 않을 수 있다.
  • 일반적으로 이러한 문제를 예방하고자 font-family 속성을 여러개 사용한다.
  • 하지만 다국어 웹 페이지를 제공할 경우 사용자에게 무슨 폰트가 있는지 일일이 확인 할 수 없기 때문에, font-family 속성의 가장 마지막 폰트에는 generic-name 폰트를 적용한다.
• generic-name 폰트 |
  • serif 폰트(명조체)
  • sans-serif 폰트(고딕체)
  • monospace 폰트(고정폭 글꼴)
    
• 웹 폰트 |
  • 폰트를 서버로부터 다운로드 받아서 사용하는 기술
  • 사용 기간은 일시적 > 서핑 중에 해당 페이지에서만 적용
  • 자체 제작(*.eof..)
  • 구글폰트, 눈누(한글폰트 많음)

📎 font-style 속성

• 주로 이탤릭체를 사용하기 위해 사용한다.
• 속성 |
  • normal : 텍스트에 어떠한 스타일도 적용하지 않는다.
  • italic : 이탤릭체
  • oblique : 텍스트를 기울인다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없다.

📎 font-weight 속성

• 텍스트의 두께를 조정
• 속성 |
  • lighter, normal, bold, bolder 등..

📎 text-align 속성

• 텍스트 정렬
• 수평 정렬
• inline 형식은 사용할 수 없다. > 여백(공간)이 없어서
• 속성 |
  • left, center, right, justify

📎 line-height 속성

• 줄과 줄 사이의 간격
• 글자를 수직 중앙 정렬할 때 사용한다.

📎 word-spacing 속성

• 단어와 단어 사이의 간격(스페이스 크기)

📎 letter-spacing 속성

• 문자와 문자 사이의 간격(자간)

📎 text-decoration 속성

• none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용한다.
• 속성 |
  • none, underline(밑줄), line-through(가운데 줄)

📎 text-indent 속성

• 문단 들여 쓰기(px, em)

📎 font-variant 속성

• 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경
• 대문자는 기존 크기 그대로 출력
• 작은 대문자(small-caps)란, 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자이다.

📎 text-transform 속성

• 텍스트에 포함된 영문자에 대한 대소문자를 설정
• 속성 |
  • capitalize : 단어의 첫번째 글자를 대문자로 바꾼다.
  • uppercase : 모든 글자를 대문자로 바꾼다.
  • lowercase : 모든 글자를 소문자로 바꾼다.

+ 태그 수평 정렬(Horizontal Align)

1. inline/inline-block 요소

• 정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다.

.container {
  text-align: center;
}

2. block 요소

• 정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다.

• 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다.

• block 태그는 너비가 100%가 아니어도 나머지 공간을 자신의 영역이라고 인식한다.

.item {
  width: 200px;
  margin: 20px auto;
}

3. 복수의 block 요소

• 복수의 block 요소는 기본적으로 수직 정렬된다. 이것을 수평정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정한다.

• 정렬 대상 요소에 width를 지정하지 않으면 콘텐츠에 너비에 맞추어 너비가 결정되므로 명시적으로 너비를 지정한다.

.container {
  text-align: center;
}
.item {
  width: 150px;
  display: inline-block;
}

6. 위치 속성

요소의 위치

1. padding > 부모가 자식의 위치 지정
2. margin > 스스로 위치 지정
3. position > FM(CSS1, CSS2, CSS3)
4. transform > FM(CSS3)

📎 position 속성

• 태그를 어떻게 위치시킬지를 정의
• 좌표값 사용 > 위치 지정
• x(left), y(top)
• 좌표를 지정하는 방식이 여러개 제공(기준점 정책이 다름)
• 속성 |

1. static

   • 기본값
   • 정적 좌표
   • 태그가 코딩 순서대로 출력되는 방식
     • 먼저 코딩 : 위에 배치(출력), 왼쪽에 배치(출력)
     • 나중 코딩 : 아래에 배치(출력), 오른쪽에 배치(출력)
   • 좌표 지정 불가능 : left, top X

2. relative

   • 상대 좌표
   • 초기 위치 상태에서 상하좌우로 위치를 이동
   • 원래 있는 공간은 그대로 유지된다.
   • left, top

3. absolute

   • 절대 좌표
   • 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 원점으로 한다.
   • 하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 된다.
   • 원래 있는 공간은 사라진다.
   • 객체의 위치 포인트 = 객체의 좌측 상단 꼭지점
   • left, top

4. fixed

   • 고정 좌표
   • 화면을 기준으로 절대 위치 좌표를 설정
   • 브라우저 창의 좌측 상단을 원점으로 한다.
   • 원래 있는 공간은 사라진다.
   • left, top

#box1 { position:static }
#box2 { position:absolute }
#box3 { position:relative }
#box4 { position:fixed }

📎 z-index 속성(요소의 쌓임 순서 지정)

💭 기본적인 쌓임 순서
1. 부모 요소의 배경과 테두리
2. 자식 요소들(HTML 코드 등장 순서대로)
3. position이 지정된 자식 요소들

• 기본 흐름을 벗어나 다른 쌓임 순서를 지정하고 싶을 때

• 이때 주의해야할 점은 z-index 속성을 지정하고자 하는 요소에는 반드시 position도 지정해주어야 한다. 

• position이 static인 요소는 z-index 속성을 추가해도 적용이 되지 않는다. 

• z-index를 지정하지 않았을 때의 기본 속성값은 0이다.

• z-index값은 정수로 지정할 수 있는데, 값이 클수록 위쪽에 렌더링 되어 사용자로부터 가까워지고 값이 작을수록 아래쪽에 렌더링 되어 사용자로부터 멀어진다. 

📎 위치 속성과 관련된 공식

• 위의 실행 결과에 2가지 문제가 있다.
  문제1) h1 태그 2개가 붙어 있다. (div 태그가 영역을 차지하지 않는다)
  문제2) 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않는다.

• 자손의 position 속성에 absolute 키워드를 적용할 경우는 부모 태그에 몇 가지 처리를 해야 한다.

문제1 해결) 
자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용한다.

문제2 해결)
자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드를 적용한다.

📎 overflow 속성

💭 크기
1. 기본: 너비는 100%, 높이는 내용물만큼
2. 너비만: 너비는 px고정, 높이는 내용물만큼 
3. 높이만: 상황에 따라 'overflow' 
          why? 브라우저 창크기에 따라 다름 
4. 너비 + 높이 : heigth 넘으면 'overflow' 

• 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정
• 속성 |
  • hidden : 영역을 벗어나는 부분을 보이지 않게 만든다.
  • scroll : 영역을 벗어나는 부분을 스크롤로 만든다.

7. float 속성 ⭐

• 기존의 출력 방식을 따르지 않고, 혼자 자신의 위치에서 벗어나 현재 라인의 좌측(우측) 끝으로 이동한다.

• 속성 키워드 |

  • left : 태그를 왼쪽에 붙인다.
  • right : 태그를 오른쪽에 붙인다.

📎 수평 정렬

left

right

💭 주의
- 첫 번째에 위치한 div 태그가 오른쪽에 붙고 두 번째에 위치한 div 태그가 오른쪽에 이어서 붙는다.

📎 레이아웃 구성

방법1) overflow: hidden;

• 자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용한다.

방법2) clear: both;

• 방법1과 차이점은 #aside태그와 #section 태그를 따로 감싸주지 않았다.
• clear: both는 float으로 일그러진 레이아웃을 초기화할 때 사용한다.
• float을 적용할 대상들 뒤에만 적어주면 된다.

8. 그림자 속성

📎 text-shadow 속성

• text-shadow : 오른쪽 아래 흐림도 색상

#box1 {
      text-shadow: 3px 3px 1px #999;
}

📎 box-shadow 속성

• box-shadow : 오른쪽 아래 흐림도 색상

#box1 {
      box-shadow: 3px 3px 1px #999;
}

💭 흐림도와 색상 사이에 inset 키워드를 적용하면 태그 안쪽에 생성된다.

9. 그레이디언트(Gradient)

• 2가지 이상의 색상을 혼합해서 채색하는 기능

📎 선형 그래디언트(linear gradients)

• linear-gradient(진행방향, 색상지정점1, 색상지정점2, ...)

• 진행방향 |

  • to bottom : 위 → 아래 - defalut
  • to top : 아래 → 위
  • to left : 오른쪽 → 왼쪽
  • to right : 왼쪽 → 오른쪽
  • ndeg : n도 방향으로
    

📎 원형 그래디언트(radial gradients)

• radial-gradient(모양 크기 at 중심점, 색상지정점1, 색상지정점2, ...)

• 기본적으로 모양은 ellipse(타원), 크기는 farthest-corner, 중심좌표는 center로 설정된다.

• 모양 : 타원 모양 ellipse, 원 모양 circle
  

10. 벤더 프리픽스 (Vendor Prefix)

• 벤더 프리픽스(vendor prefix)는 웹 브라우저 공급 업체(익스플로러, 크롬, 파이어폭스, 사파리, 오페라)에서 제공하며, 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.

• 과거에는 CSS3 자체가 매우 실험적인 기능이라 벤더 프리픽스를 굉장히 많이 사용해야 했다. 하지만 현재는 대부분의 실험적인 기능이 실제 표준으로 들어가면서 벤더 프리픽스를 많이 사용하지 않아도 되게 바뀌었다.

• 하지만 현재도 추가되고 있는 새로운 실험적인 기능들에는 벤더 프리픽스를 사용해야 한다. .

📎 주요 웹 브라우저의 벤더 프리픽스(vendor prefix)

• 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용한다.
  

.button {
background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
background: -moz-linear-gradient(red, yellow);    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
background: -ms-linear-gradient(red, yellow);     <!-- 익스플로러 10.0 이상을 위한 코드 -->
background: -o-linear-gradient(red, yellow);      <!-- 오페라 10.0 이상을 위한 코드 -->
}