CSS

CSS

• HTML 문서를 꾸밀때 사용하는 언어

• 기본적인 사용 방법

  • css 파일에는 @charset "utf-8"; 작성해두는게 좋음.(혹시모르는 영어가 아닌 다른 문자 포함될 시 적용 안될 수 있음.)

<link rel="stylesheet" href="경로">
/* 또는*/
<style>
    @import url(style.css);
</style>

select{
    color : red;
}

CSS 선택자

CSS 는 상속개념이있음. 만약 body 태그를 선택해서 특정값을 지정하면 body 에 존재하는 모든 요소들은 영향을 받음.

• * : 모든 요소를 선택
• id 선택자 : 한페이지에 무조건 동일한 id은 단 하나만 선언 가능 ` #idname `
• class 선택자 : 한페이지에 같은 클래스 이름을 가진 요소 2개이상 선언 가능 .classname
• type 선택자 : 특정 태그 선택 시 사용 p
• 그룹 선택자 : 다수의 태그를 선택할 때 사용 ` , `
• 자식 선택자 : 계층구조 안 바로 아래에 오는 자식요소 선택 ` header > h1 `
• 자손 선택자 : 계층구조에서 하위에 오는 모든 자손요소 선택 ` header p`
• 인접형제 선택자 : 계층구조 하위에 나오는 다음 인접한 요소 선택 ` .list li + li `
• 속성 선택자 : 특정 태그의 속성(<a href="#" title="tit">) 을 선택 a[title]
  • = : 특정값과 동일한지 비교 후 선택하는 옵션 href = "#"
  • ^= : ~로 시작하는 태그만 선택하는 옵션 href ^= "g"
  • $= : ~로 종료하는 태그만 선택하는 옵션 href $= ".pdf"
  • ~= : 해당하는 단어 포함하는 태그 선택 title ~= and
  • *= : 해당하는 문자 포함하는 태그 선택 title *= a
• :link : 선택 시 이동되는 주소가 포함되어있는 태그 선택
• :visited : 주소에 다녀온 뒤 상태 설정
• :hover : 마우스 오버시 상태
• :active : 누른 뒤 상태
• :focus : tab 키 로 포커스가 선택되었을때 상태 설정
• :first-line : 항상 첫줄만 선택
• :first-letter : 첫번째 글자만 선택
• :before : 해당 태그의 컨텐츠가 시작하기 전
• :after : 해당 태그의 컨텐츠가 시작 후

  * {
      font-size: 10px;
  }
  .class {
      font-size : 30px;
  }
  #id{
      background-color: aqua;
  }
  h1, p{
      color: rgba(255,0,0,0.3);
  }
  .list li+li {
      background-color: lightblue;
  }
  a[title]{
      background-color: pink;
  }   
  a[href = "#"]{
      background-color:black;
      color : yellow;
  }
  a[href ^= "g"]{
      background-color:white;
      color : red;
  }
  a[href $= '.pdf']{
      background-color: yellow;
  }
  a[title ~= 'and']{
    font-size : 100px;
  }
  a[title *= 't']{
      color: aqua;
  }

<header>
  <h1>CSS Selector</h1>
  <p>CSS basic</p>
  <p class="class">class</p>
  <h2 class="class">class</h2>
  <p id="id">id</p>
  <ol class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
  <ul>
    <li>
        <a href="google.con">test</a>
        <a href="#" title="a">test</a>
        <a href="#">test</a>
    </li>
  </ul>
</header>

우선순위

• inline style (1000) > ID,Class,tag 를 한꺼번에 선택한 선택자(111) > ID(100) > 클래스(10) > 태그(1)

  우선순위가 같으면 먼저 나중에 작성한 css가 적용됨. !important 는 무조건 적용되는 값

font

font-size, font-family 는 사이트 작성 시 기본값으로 설정 후 시작

• font-style
  • serif : 명조
  • sans-serif : 고딕
  • cursive : 필기
  • monospace : 고정폭
• font-size
  • px 로 기본값 정한 뒤 em(배수) 값으로 세밀히 지정함.
• font-variant : small-caps
  • 소문자의 문자를 크기는 동일하게 대문자의 형태로 변경하는것.
• Letter-spacing
  • 글자간 간격
• line-height : 배수;
  • 문자 열의 간격이 벌어지는 정도

• text-align : left

  center

  right

  justify

  • 문자열 정렬
• text-indent : 배수;
  • 들여쓰기

• text-transform : uppercase

  lowercase

  capitalize

  • 대소문자 지정

• vertical-align : top

  middle

  baseline

  bottom

  • 위아래 정렬, 픽셀값을 줄수도있음.
• white-space: nowrap;
  • 줄바꿈 설정
• word-spacing : 배수;
  • 단어와 단어 사이의 간격

구글웹폰트 적용하기

1. webfont
2. Googlefonts
3. 원하는 특정 굵기,font 선택
4. link 또는 import 예시값 가져오기
5. style 적용

박스모델

요소의 형태를 지정할때 사용됨.

• border : px, 선의 형태, 색상 = 박스모델에 선을 지정할때 사용
• padding = border 와 본문 사이에 있는 공간
• margin = border 기준으로 바깥 공간
• width, height : 컨텐츠의 크기

.box{
  width: 600px;
  margin : 30px;
  background-color: lime;
}
.box2{
  border: 5px solid black;
  padding : 20px;
}
.box3{
  box-sizing: border-box;
}

<div class="box">content</div>
<div class="box box2">content</div>
<div class="box box2 box3">content</div>

동일한 크기의 박스모델에 컨텐츠의 크기를 지정 후 padding, border 등의 값을 추가적으로 설정 시 컨텐츠 외의 값이기때문에 부가적인 크기 부여가 됨. 그런 경우 box-sizing 옵션을 부여하면 컨텐츠 안에 border와 padding 값이 모두 부여되서 보여짐.

• padding

  패딩 또는 마진의 값은 1개부터 4개까지 적용 가능함. 1개는 동서남북 모두 적용 , 2개는 첫번째 부터 북남,동서 적용, 3개는 북,동서,남 으로 지정, 4개는 북동남서 로 적용됨.

  .box{
  padding: 100px; /*4방향 모두적용*/
  padding: 100px 50px; /*2방향씩 그룹 적용(top|bottom , right|left)*/
  padding: 100px 10px 50px; /*3방향 적용(top, right|left, bottom)*/
  padding: 100px 10px 50px 0px; /*4방향 적용(top, right, bottom, left)*/
  }
  

• margin

  margin 값이 위아래가 동일할 경우 겹쳐서 30만 나올수도있음, display의 속성이 inline 일 경우 패딩은 겹쳐지고, 마진은 좌우만 표현됨

• margin : 0 auto 로 지정 시 좌우 가운대 정렬이 됨.

float

• 지정값에 따라 왼쪽 오른쪽에 해당모델이 위치하게됨. 지정 시 다음 컨텐츠의 값이 바로 위치하게 됨.

  img 태그는 vertical-align top 을성정해야 남는 공백이 없어짐.

  float : left | right;
  

• 해지하기

  float 해제 시 감싸고있는 태그의 가장 뒤쪽에 float 해지값을 써야함.

.thumb{
  float: left;
  border: 3px solid black;
}
/*해지하는 코드*/
.wrap:after{
  content: '';
  display: block;
  clear: both;
}
/*IE6 , IE7 의 경우 float 값을 인식하지 못하므로, zoom 옵션을 통해 해지함.*/
.wrap{
  *zoom : 1; 
}
/*overflow 옵션을 사용해 영역에서 넘치는 부분을 감추는 방법도 있으나, 영역 밖에 위치한것들이 모두 안보이므로 사용 시 주의*/
.wrap{
    width: 800px;
    /*영역에서 넘치는 부분*/
    overflow: hidden;
    margin: 0 auto;
    border: 3px dashed red;
    *zoom: 1; /* IE, Chrome 전용*/
}

position

element 를 배치하는 방법을 지정하는 속성, static

relative

absolute

fixed

sticky 5가지의 속성이 존재함.

• static
  • position 값을 지정하지 않았을 때 기본으로 적용되는 값
  • 위치지정(top,right,bottom,z-index) 속성 효과를 받지못함.
• relative
  • 일반적인 흐름에 따라 배치가 되는 값
  • 위치지정 속성에 의한 상대적인 위치에 배치됨
  • 다른 요소들의 위치에 영향을 주지않는 특성을 가짐
• fixed
  • 뷰포트를 기준으로 위치를 설정하는 방식
  • 웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은곳에 위치함.
• absolute
  • 가장 가까운 위치에 있는 조상에 대해 상대적위치로 배치 됨.
  • 조상이 없으면 body 기준으로 삼고 페이지 스크롤에 따라 움직임.
• z-index 속성

  HTML 요소의 위치를 설정 하면 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수 있음. z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정함. 스택의 순서는 음수,양수 모두 설정 가능하고, 크기가 클수록 앞쪽에 위치, 작을수록 뒤쪽에 위치함.

• position 을 이용해 컨텐츠 중앙 지정하기
  • absolute 이용

    .content{
    position: absolute;
    width: 800px;
    height: 400px;
    background-color: khaki;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -200px;
    }
    

  • relative 를 이용한 컨텐츠 중앙 지정

    *{
    margin: 0px;
    padding: 0px;
    }
    html, body{
    width: 100%;
    height: 100%;
    }
    .content{
    position: relative;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 400px;
    background-color: khaki;
    margin-left: -400px;
    margin-top: -200px;
    }
    

  • 크기가 없는 콘텐츠의 중앙 정렬

    .content{
    position: absolute;
    left: 100px;
    right: 100px;
    top: 100px;
    bottom: 100px;
    background-color: khaki;
    }