CSS

CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된

CSS는 재활용이 가능하며 나아가 테마, 탬플릿의 형태로 확장할 수 있습니다.

CSS의 문법을 알아보겠습니다.

<h1 class="cc">전체선택자</h1>
   <p>*{html내에 등장하는 모든 형태를 선택하는 선택자.(초기화,기본설정값)</p>


   <br/><br/><br/>

   <h1 id="bb">태그 선택자</h1>
   <p>h1,h2,p,a,img.../html내에 등장하는 특정한 태그를 선택하는 선택자.</p>

   <br/><br/><br/>

   <h1 id="aa">아이디선택자</h1>
   <p class="cc">
    :본문(id="name")/스타일(#) <br/>
    특정한 이름을 부여하여 선택하는 선택자로, html화면 내에서 하나의 이름으로 한번만 사용가능.
    주로 큰 달락,부모에서 사용, 위치이동, 이름
   </p>

   <br/><br/><br/>

   <h1 class="cc">클래스 선택자</h1>
   <P style="color:blue;">
    :본문(class="name")/스타일(.)<br/>
    특정한 이름을 부여하여 선택하는 선택자로,html화면 내에서 하나의 이름으로 여러군대 여러번 사용가능!<br/>
    주로 작은 요소, 작은 단락, 변화가 잦은 스타일
   </P>

.text{
      color:crimson; /*글자색상-단어,hex*/
      font-size:20px;/*글자사이즈-px,em,pt...단위*/
      font-weight:900; /*글자의 굵기- 100~900(100~300가늘게),(400~600중간),(700~900굵게)
      서체마다 굵기가 적용되지 않을 수 있다.*/
      line-height:50px;/*행간,줄간격-px,em,pt,%...단위*/
      font-family:"궁서";/*글꼴 - 내 컴퓨터에 저장된 글자가 표현(웹폰트는 예외)*/
      font-style:italic; /*글자스타일-italic,normal*/
      letter-spacing:10px;/*자간,글자사이의 간격 - 숫자입력(px,%...)*/
      text-align:left; /*문단 정렬(글자 정렬) - left,right,center*/
    }
    a{
      text-decoration:none; /*<<(a태그에 대한 기본값)글자를 꾸며주는 속성*/
      color:crimson; 
    }
    body{
      background-color:aquamarine;  /*배경색상*/
      /*background-image:url(img/bg.png); 배경이미지 속성>url(이미지의 경고)
      이미지의 사이즈가 부모의 사이즈보다 작을떄 반복되는 성격
      공간,내용물이 있는 상태에서 나타남*/
      background-repeat:no-repeat; /*배경이미지의 반복 속성 > no.repeat(반복되지 않는 원본 한장)
      repeat-x(가로반복)  /  repeat-y(세로반복)     repeat(반복,기본값)*/ 
      background-size:100%; /*배경이미지 사이즈 속성 - x(가로폭),y(세로폭)px,%값*/
    }
    h1{
     /* background-color:brown;*/
    }
     p{
      background-image:url(img/bg.png);
    }

 

  block: 박스와 같이 쌓이면서 나타나는 성격 / 화면 전체를 사용하는 태그-
  inline:글자와 같이 옆으로 나열되며 나타는 성격/내용의 폭값, 화면의 일부를 차지하는 태그 
    / width,height,margin-top,margin-bottom= 적용되지 않습니다

  div{
      background-color: aquamarine;
      font-size:30px;
      font-weight:900;
      /*box-size에 영향을 주는 스타일*/
      width:300px;/*넓이,가로폭=px,%,auto*/
      height:300px;/*높이,세로폭=px,%,auto*/
      border:5px solid #000;/*선,선의굵기 선의스타일 선의색상*/
      padding:50px;/*안쪽여백,안쪽으로 내용물과 박스 사이의 틈 (한자리)전체면 적용*/
      margin:50px; /*바깥여백 - 바깥으로 박스혹은 다른 요소와의 틈, 간격(한자리 전체)*/
    }
     div{
      background-color: gray;
      width:300px;
      height:300px;
      color:white;
      font-size:30px;
      font-weight:900px;
      /* padding:30px 0px; 두자리 - 상화,좌우 네자리(시계방향 위쪽 오른쪽 아래쪽 왼쪽)
      개별부여가능*/ 
      padding-top:30px; /*bottom/right/left(margin옵션동일)*/
      margin:50px 100px; /*추가적으로 auto가능 중심배치*/
      /*border:3px solid black; 선-굵기 스타일 색상*/
      /*border-top:5px solid black;*/
      border-width:10px;/*선의 굵기-전체적용*/
      border-color:cadetblue;/*선의 색상-전체적용*/
      border-style: inset;/*선의 스타일-전체적용*/
      border-radius: 50px;/*모서리 둥글게 표현 px,%
                      1자리-4개의 모서리 전체 / 2자리 - 왼쪽 상단 시작 x / 4자리 시계방향(왼쪽 상단)*/


    }

float:박스를 옆으로 나열 할 때 사용/떠다니는 ~/레이아웃을 나열하거나 형성+삽화를 넣을 때사용합니다.

 

 

선택자에는 여러 가지 선택자가 있는데

후손 선택자 & 자손 선택자가 있습니다.

후손선택자 : 해당요소의 하위요소에 있는 특정한 요소를 모두 선택 / 선택자 A 선택자 B

자손선택자 : 해당요소의 바로 밑에 위치하는 특정한 요소를 선택 /선택자 > 선택자B

 

동일 선택자 :동일 관계에 있는 요소 중에 해당요소보다 뒤에 존재하는 특정한 요소를 선택할 때 사용 

선택자 A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자 B를 선택 

선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 모두 선택

 

반응선택자 : 사용자가 마우스를 이용해서 혹은 특정한 행동(반응)을 취했을 때 css속성을 지정할 수 있는 선택자가 있습니다.

 

형태구조선택자: 일반구조선택자와 비슷하지만 태그 형태를 구분

:first-of-type == 부모박스 안에서 형제관계 중에 첫 번째에 위치하는 태그를 선택

:last-of-type == 부모박스 안에서 형제관계 중에 마지막번째에 위치하는 태그를 선택

:nth-of-type == 부모박스 안에서 형제관계 중에 수열번째에 위치하는 태그를 선택

:nth-lat-of-type == 부모박스 안에서 형제관계 중에 뒤에서 수열번째에 위치하는 태그를 선택

 

구조선택자 추가 :nth-last-child() 부모박스 안에서 형제관계 중에 뒤에서 수열번째 위치하는 태그를 선택

 

속성선택자: 특정한 속성값을 가지고 있는 html의 요소를 선택

[속성이름="송성값"]

[속성이름$="속성값"]

[속성이름*="속성값"]

 

가상요소선택자 선택될 요소의 앞 혹은 뒤쪽으로 가상의 요소를 넣어 표현.

::before 특정요소의 앞에 삽입, 내용이나 가상의 요소를 부여

::after 특정요소의 뒤에 삽입, 내용이나 가상의 요소를 부여합니다.

 

 

이외에도 진짜 여러 가지 태그들이 존재한다. 다 외워서 쓰는 건 불가능하고 그때그때 사용방법을 검색해서

적용하는 것이 제일 좋을 것 같다.