36. CSS

sumin·2023년 8월 23일

아카데미

목록 보기

36/82

CSS

  1. Cascade Style Sheet
  2. HTML 구성 요소에 스타일을 지정하는 언어이다. 
  3. 스타일 지정 방식
    1) internal : <head> 태그 내부에 <style> 태그를 추가하고 CSS 작업하는 방식
    2) external : 별도의 CSS 파일을 만들어서 <link> 태그로 등록하는 방식
    3) inline : HTML 수성 요소에 직접 style 속성을 추가하고 CSS 작업하는 방식
  4. 스타일 우선 순위
      높음                                낮음
      !important > inline > internal = external   
      * important 남발은 하지 말아야 한다. 
  5. 스타일 작성 방식
    선택자 {
      CSS속성: 값; 
      CSS속성: 값;
      ... 
    }    
  6. CSS 주석 : /* 주석 */

Font

font-family: '맑은 고딕', '고딕', sans-serif; /* 맑은 고딕 사용, 없으면 고딕 사용, 그것도 없으면 고딕 계열(sans-serif) 사용 */
font-family: '궁서', '명조',serif; /* 궁서 사용, 없으면 명조 없으면 명조계열(serif) 사용 */
font-size: 32px; /* 디폴트가 16픽셀 */
font-weight: 900; /* 단위 없음, 디폴트 400, 100 ~ 900  */
font-style: italic; /* italic(기울임), nomal(안 기울임) */
color: crimson;
color: rgb(0, 0, 0); /*red(0), green(0),blue(0) -black */
color: rgb(255 , 255, 255); /*red(255), green(255),blue(255) -white */
color: rgba(0, 0, 0, 0); /*red(0), green(0), blue(0), alpha(0 ~ 1) : 투명도(0은 투명, 1은 불투명)*/
color: #000000; /* 16진수 색상코드 : red(0), green(0),blue(0) -black */
color: #FFFFFF; /* 16진수 색상코드 : red(255), green(255),blue(255) -white */
      
letter-spacing: -1px; /* 글자 사이 간격(자간) */
line-height: 64px;   /* 행 높이, 텍스트를 세로 정렬 할때 주로 사용*/

블록 요소는 정렬이 된다. 
 hr,h1~h6, p, pre, ul, ol, il, dl, dt, dd, table, form */
text-align: center; /* 가로 가운데 정렬 */
    }    
 인라인 요소는 정렬이 되지 않는다. 
   br, strong, em, ins, del, mark, img, a, input, select, taxtarea, button, label, audio, video 
text-align: center;
text-decoration: none; /* 밑줄 없음*/

Vender prefix

1. Vendor Prefix
2. CSS 속성 앞에 브라우저 벤더(제공업체)를 작성할 수 있다. 
3. 종류
  1) -webkit- : 크롬, 사파리 
  2) -mox-    : 파이어폭스
  3) -o-      : 오페라 
-webkit-text-stroke-color: crimson;
-webkit-text-stroke-width: 1px;

Icon 가져오기

fontawesome 아이콘
1. https://cdnjs.com/ 접속한다. 
2. "font-awesome"을 조회해서 fontawesome 아이콘을 가져올 수 있는 URL을 알아낸다. 
3. 알아낸 URL을 HTML 문서로 가져온다. 
  1) <link rel = "stylesheet" href="알아낸 URL">
  2) @import url(알아낸 URL) (강사님은 style 에 넣었음)
4. https://fontawesome.com/에 접속한다. 
5. 원하는 아이콘의 <i class="xxx"></i> 태그를 가져 온다.  


<body>
  <P>
    <i class="fa-solid fa-house fa-3x" ></i>    //크기
    <i class="fa-solid fa-hippo fa-6x fa-spin-pulse"></i>  //아이콘 돌아가게 하기 
    <i class="fa-solid fa-piggy-bank fa-8x fa-bounce"></i> // 아이콘 통통뒤게하기 
    <i class="fa-brands fa-github fa-10x"></i>		

  </P>
  <hr>

ID

1. 모든 태그가 가질 수 있는 전역 속성이다. 
2. 문서 내의 모든 요소는 중복된 id를 가질 수 없다.  
3. id 선택자 
  #id

Class 속성

 1. 모든 태그가 가질 수 있는 전역 속성이다. 
 2. 문서 내의 모든 요소는 동일한 class를 가질 수 있다. 
 3. 동일한 특성을 사지는 요소들은 동일한 class 속성을 가진다. 
 4. 하나의 요소가 여러개의 클래스를 가질 수 있다. (각 class를 공백으로 구분해서 작성)
 5. class 선택자 
   .class
 예시
 <style>
    .green_text {
      color: green;
    }
  </style>

  <div class="green_text">
    안녕하세요 
  </div>
  <div class="green_text">
    안녕하세요 
  </div>

선택자

자식 선택자 : 부모 > 자식 
후손 선택자 : 조상 후손
모든 형제 선택자 : 형제 ~ 형제
인접 형제 선택자 : 형제 + 형제      //+는 바로 뒤에 있는 것을 말한다.

구조 선택자

1. 요소:first-of-type  : 첫 번째 요소 
2. 요소:last-of-type   : 마지막 요소 
3. 요소:nth-of-type(n) : n번째 요소

속성 선택자

1. 요소[속성] 속성을 가지고 있는 요소 
2. 요소[속성=값] 속성=값인 요소 
3. 요소[속성^=값] 속성이 값으로 시작하는 요소 
4. 요소[속성$=값] 속성이 값으로 끝나는 요소 
5. 요소[속성*=값] 속성이 값을 포함하는 요소

상태 선택자

1. 요소:focus   포커스를 가질 때( 입력 상지를 선택한 경우)
2. 요소:checked 선택했을 때(radio, checkbox를 선택한 경우)

마우스 반응 선택자

1. 요소:hover   요소에 마우스를 가져다 대고 있는 동안
2. 요소:active  요소를 마우스로 누르고 있는 동안

Pseudo Element(의사요소)

1. 요소::before  요소의 앞에 의사 요소를 추가 
2. 요소::after  요소의 뒤에 의사 요소를 추가 

ABC 사이에 화살표 넣기 
<style>
.chain > strong + strong::before {
      content: "→";
    }
  </style>
  <div class="chain">
    <strong>A</strong>
    <strong>B</strong>
    <strong>C</strong>  
  </div>