Post

CSS 기본 지식

Posted Updated
By 79gun79
7 min read
CSS 기본 지식

데브css

CSS 기본 지식

스타일시트 불러오기

  1. 외부 파일 로드

    • < link > 태그의 href 속성 사용

    • 스타일시트가 긴 경우 사용

    • ex1.html

      1
2
3
4
5
6
7
8
9

      <html>
  <head>
    <link rel="stylesheet" href="ex1.css" />
  </head>

  <body>
    <h1>실습</h1>
  </body>
</html>
    • ex1.css
      1
2
3
4

      h1 {
  color: white;
  background: black;
}

  2. 내부에서 선언

    • < style > 태그 사용

    • 스타일시트가 짧은 경우 사용

    • ex1.html

      1
2
3
4
5
6
7
8
9
10
11
12
13
14

      <html>
  <head>
    <style>
      h1 {
        color: white;
        background: black;
      }
    </style>
  </head>

  <body>
    <h1>실습</h1>
  </body>
</html>

  3. 인라인형식으로 로드 (사용자제!)

    1

    <body style="background-color: #fff;"></body>

스타일시트 적용 우선순위

인라인형식 > id 선택자 > class 선택자 > 태그(요소)

선택자

  1. 구조선택자

    형식설명
    선택자:first-child형제 관계에서 첫번째로 등장하는 태그 선택
    선택자:last-child형제 관계에서 마지막으로 등장하는 태그 선택
    선택자:nth-child(n)형제 관계에서 앞에서 n번째로 등장하는 태그 선택
    선택자:nth-last-child(n)형제 관계에서 뒤에서 n번째로 등장하는 태그 선택

  2. 자손, 후손선택자

    종류형식설명
    후손 선택자선택자1 선택자2선택자1의 후손 태그 선택자2 선택
    자손 선택자선택자1 > 선택자2선택자1의 자손 태그 선택자2 선택

  3. 인접선택자

    종류형식설명
    인접 선택자선택자1 + 선택자2선택자1에 인접한 선택자2 선택

  4. 속성선택자

    종류형식설명
    속성 선택자선택자[속성]선택자 중, 특정 속성의 태그 선택
    속성값 선택자선택자[속성=”값”]선택자 중, 특정 속성의 특정 값을 가진 태그 선택

  5. 이전, 이후 선택자

    종류형식설명
    before 선택자선택자::before선택자의 이전 영역 선택
    after 선택자선택자::after선택자의 이후 영역 선택
    • 반드시 content 속성이 포함되어야 함.
      Image

  6. 반응, 상태 선택자

    형식설명
    선택자:link사이트 링크의 태그 선택
    선택자:active마우스로 클릭한 태그 선택
    선택자:hover마우스 커서를 올린 태그 선택
    선택자:visited사이트를 방문한 태그 선택
    선택자:focus포커스를 맞춘 태그 선택

크기 단위

Image

글꼴 모양

종류설명
font-family글꼴 설정 (앞 순서 차례로 적용됨)
color글꼴 색깔
font-weightbold(두껍게), 숫자값으로도 조정 가능
font-styleitalic(기울임체)
text-indent들여쓰기 (음수값이 오면 내어쓰기)
text-decorationnone(언더라인 제거) & underline(언더라인 생성)

자간 / 단어 / 줄 간격

종류설명
letter-spacing양수는 자간 넓게, 음수는 자간 좁게
word-spacing양수는 자간 넓게, 음수는 자간 좁게
line-height단위값이 다 들어갈 수 있음.

가로 / 세로 정렬

종류설명
text-alignleft, center, right, jusify(양쪽 배분) [블록 형식만 가능!]
vertical-aligntop, middle, bottom, baseline, text-top, text-bottom, sub, super

대소문자 구분

종류설명
text-transformuppercase(대문자), lowercase(소문자), capitalize(첫글자 대문자)
font-variantsmall-caps

여백

바깥 마진(margin), 안 패딩(padding)

  • 전체 너비 = width + 2 x ( margin + border + padding) Image

  • 전체 높이 = height + 2 x ( margin + border + padding) Image

  1. 속성명으로 구분

    margin-left바깥쪽-왼쪽padding-left안쪽-왼쪽
    margin-right바깥쪽-오른쪽padding-right안쪽-오른쪽
    margin-top바깥쪽-위쪽padding-top안쪽-위쪽
    margin-bottom바깥쪽-아래쪽padding-bottom안쪽-아래쪽

  2. 공백으로 구분 (4방향) ⇒ 시계방향!

    margin(or padding): 위쪽 오른쪽 아래쪽 왼쪽;

  3. 공백으로 구분 (3방향)

    margin(or padding): 위쪽 좌우 아래쪽;

  4. 공백으로 구분 (2방향)

    margin(or padding): 상하 좌우;

  • box-sizing: border-box;
    • 테두리까지의 크기를 포함한 크기로 조정됨.
  • 인라인 형식의 태그 적용 범위
    • padding 상하좌우 모두 적용됨
    • margin 좌우만 적용됨!
    • width, height, text-align 적용 안됨!

리스트 스타일

  • list-style: none;
    • 목록 모양이 사라짐.

배경 스타일

background-image배경 이미지
background-size배경 이미지 크기
background-repeat배경 이미지 반복형태
background-attachment배경 이미지 부착형태
background-position배경 이미지 위치

그라이디언트

linear-gradient(각도, 색상 위치, 색상 위치…)선형 그레이디언트 생성
radial-gradient()원형 그레이디언트 생성

그림자

  • 더 쉽게 그림자 스타일 만들기
    CSS3Generator by @RandyJensen

  • 오른쪽 아래에 음수값을 넣으면 반대쪽으로 부여

    text-shadow: 오른쪽 아래 흐림도 흐림도거리 색상글자에 그림자 부여
    text-shadow: 오른쪽 아래 흐림도 흐림도거리 inset 색상(+ 태그 안쪽에 그림자)
    box-shadow: 오른쪽 아래 흐림도 흐림도거리 색상박스에 그림자 부여
    box-shadow: 오른쪽 아래 흐림도 흐림도거리 inset 색상(+ 태그 안쪽에 그림자)
프로그래머스 데브코스, CSS
study programmers css
This post is licensed under CC BY 4.0 by the author.