css

CSS 기본

CSS logo

CSS 정리

CSS란?

Cascading Style Sheets
HTML 문서를 꾸밀때 사용하는 스타일 시트 언어

CSS 적용방법

  1. Linking Style Sheet ( 외부 스타일 시트 )
    • 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법
  2. Internal Style Sheet ( 내부 스타일 시트 )
    • HTML 문서 안의 style 태그 안에 CSS 코드를 넣는 방법
  3. Inline Style Sheet ( 인라인 스타일 시트 )
    • HTML 태그의 style 속성에 CSS 코드를 넣는 방법
1
2
3
4
5
6
7
8
<!-- 1번 -->
<link rel="stylesheet" href="style.css">
<!-- 2번 -->
<style>
p { color: red }
</style>
<!-- 3번 -->
<p style="color: red">안녕하세요</p>

일반적으로 1번 이외의 방법은 HTML문서 안에 스타일이 들어가 있는 형태인데,
이는 HTML과 CSS 파일의 분리가 되어있지 않으므로 권장하는 방법이 아님.

만약 1, 2, 3번을 동시에 사용 했다면 적용 우선순위가 높은 순서는 3번이 가장 우선이되고
1, 2번 중에서는 아래쪽에 작성된 것이 우선이 됨.

CSS 구문

1
2
3
4
h1 {
color: blue;
font-size: 10px;
}

Selector/Property+Value=Declaration

CSS Selector

HTML Element의 name, id, class, attribute 등으로 찾을 수 있다.

  1. element
    • element 이름 그대로 작성
    • <p> => p { }
  2. id
    • #idName 으로 작성
    • <p id="hi"> => #hi { }
    • 이때 id값은 고유한 값을 가지며 #다음에 숫자는 작성불가
  3. class
    • .className 으로 작성
    • <p class="hi"> => .hi { }
  4. attribute
    • 대괄호를 통해 attribute를 찾음
    • input[type="text"] { background-color: red }

특징

  1. grouping이 가능
    • 여러개의 태그나, 클래스 등에 같은 속성을 줄때 콤마를 사용
    • h1, h2, p { }
  2. CSS 내에서 주석 작성은 /* 주석 */
  3. 속성값과 단위사이에 공백은 없어야 함
    • 20px => O / 20 px => X

CSS Property

Property 작성 순서는 퍼포먼스에 영향을 미치지 않지만, 규칙이 있어야 보기도 좋음.
CSS3 이전의 Property 작성 권장 순서는 다음과 같다.
가장 바깥쪽부터 안쪽으로 들어간다고 이해하는게 좋을 듯 하다.

  1. display
  2. list-style
  3. position
  4. float
  5. clear
  6. width / height
  7. padding / margin
  8. border / background
  9. color / font
  10. text-decoration
  11. text-align / vertical-align
  12. white-space
  13. other text
  14. content

추가적으로 CSS3에서 overflow, z-index, line-height도 있는데
저는 1번 밑에 overflow, 5번 밑에 z-index, 6번 밑에 line-height를 씁니다.

사실 순서는 크게 중요하지 않기 때문에, 개인차가 있을 것이라 생각됩니다.
더 좋다고 생각되는 순서가 있다면 댓글에 공유해주시면 좋을 것 같습니다!

마무리

CSS는 속성 하나하나 자세히 알아봐야 하기 때문에,
다음 포스팅부터 하나하나 자세히 쓰도록 해야겠다.

개인적으로 공부한 내용을 정리한 것이기 때문에 반말을 사용한 점 양해 부탁드립니다.
잘못된 부분이나 피드백이 있으시다면, 댓글에 남겨주시면 감사하겠습니다!

공유하기