본문 바로가기
FRONT-END/CSS

[CSS] 0916 4일차(의사요소 ::,background,font,width,height,position,padding,margin)

by codechu 2025. 9. 16.

의사요소

  • 의사요소(Pseudo Element)는 요소의 앞이나 뒤에 가상의 요소를 만들거나, 내용에 간단한 번화를 주기 위해 사용한다.(예를들어 요소의 일부분(예: 첫 줄, 첫 글자)이나 요소의 앞/뒤(content inserted) 같은 것을 스타일링할 때 사용)
  • 의사요소는 어떠한 선택자 뒤에 콜론 두 개 ( :: ) 와 의사 요소 이름을 붙여 사용한다.
  • 의사요소의 종류는 다음과 같다.
    • ::after : 선택한 요소의 맨 마지막 자식으로 의사 요소를 생성한다. 이때 content 속성이 표시할 내용으로 존재해야 한다.
    • :: before : 선택한 요소의 첫번째 자식이로 의사요소를  생성한다. 이때  content속성이 표시할 내용으로 존재해야 한다.
  <style>
        #degree::before{

            content:' 섭씨'
        }
        #degree::after{
            content:'도'
        }



    </style>
</head>
<body>
<span id = "degree">31</span>
</body>

#는 id 생성자


<사용예시>

<p> 요소의 첫 글자를 빨간색, 글씨 크기 키우고 싶으면:
p::first-letter { color: red; font-size: 2em; }

문단(<p>) 바로 앞에 따옴표 아이콘 삽입하려면:
p::before { content: "“"; }

사용자가 텍스트 드래그로 선택했을 때 배경 노란색 + 글자 검정색으로 보이게 하려면:
p::selection { background‑color: yellow; color: black; }

 

 

우선순위

  •  CSS에서 작성하는 선택자는 우선  순위를 가리기 위해 아래 명시된 조건에 따라 점수를 메기고,(겹치는 속성이 있는 경우) 점수가 가장 높은 선택자가 가지는 속성이 적용을 받는다.
  • 점수가 동일한 경우 보다 아래쪽에 작성된 선택자가 우선순위를 가진다.
  • 배점
    • !important : 키워드를 활용한 우선순위 부여 ( 10,000점 )
    • style : 속성을 통한 인라인 css적용 ( 1,000점 )
    • 아이디 선택자 (100점 )
    • 클래스 선택자 (10점 ) 
    • 의사 클래스 (10점,단 not은 제외)
    • 유형 선택자 (0점)
    • :not(0점)
    <style>
        .bravo {
            color: red;
        }
        .alpha {
            color: blue;
        }


    </style>
</head>
<body>
<span class="alpha bravo">31</span>


.은 클래스 생성자
이럴때는 .alpha가 적용됨 아랫쪽에 작성된게 우선순위를가짐
 <style>

        .alpha.bravo { //우선순위 20 점 
            color: blue;
        }
        .bravo { //1개라서 10점
            color: red;
        }

    </style>
</head>
<body>
<span class="alpha bravo" style = "color: aqua">31</span>
   <style>

        .alpha.bravo {
            color: blue;
        }
        .bravo {
            color: red; !important;
        }

    </style>
</head>
<body>
<span class="alpha bravo" style = "color: aqua">31</span> // 스타일 우선순위로 인라인적용 1000점

 

 

 

color 

  • color 속성은 텍스트의 색상을 지정하기 위해 사용한다.
  • 형태
    • [색상 값]

 

backgroud 

  • background - color 속성은 배경 색상을 지정하기 위해 사용한다.
  • 형태
    • [색상 값]

 

 

background - image 

  • background - image 속성은 배경 이미지를 지정하기 위해 사용한다.
  • 형태
    • none : 기본 값으로 , 배경 이미지 없음
    • ur (x) : 배경 이미지로 사용할 리소스의 주소나 경로 문자열로 x 를 사용한다.
    • linear - gradient : 선형 그라디언트 함수
    • radial - gradient : 방사형 그라디언트 함수
    • 선형 그라디언트 함수와 방사형 그라디언트 함수는 http://cssgradient.io를 참고하여 생성한다.
  #yaho {
            background-image: ur(주소);
        }

    </style>
</head>
<body>
<span class="alpha bravo" style = "color: aqua">31</span>
<span id="yaho" style = "color: aqua">31</span>

 

 

background-position 

  • background-position 속성은 background - image 속성에 의해 지정된 배경 이미지의 위치를 지정하기 위해 사용한다.
  • 값 [위치]
    • top
    • bottom
    • right
    • left
    • center
  • 형태
    • [위치] : 지정되지 않은 이미지 방향에 대한 위치를 center로 지정한다.
      • top이라고 작성할 경우 top center가 된다.
      • left라고 작성할 경우 left center가 된다
      • center라고 작성할 경우 center center가 된다.
    • [위치 : a] [위치 : b] : 순서와 상관 없이 값을 적용할 수 있다. 단, 상충되는 값 [ right left, top bottom ] 함께 적지 않는다.

background -repeat

  • background -repeat 속성은 background - image 속성에 의해 지정된 배경 이미지의 반복과 관련된 설정을 하기 위한 속성이다
  • 값 [ 값 ]
    • repeat : 반복함
    • no - repeat : 반복하지 않음
    • space : 양 끝단에 위치 후 남는 사이 공간에 균등하게 분배하여 반복함.
  • 형태
  • [값] : 가러와 세로 방향 모두 적용한다.
  • [값 : a ] [값 : b ] : 값 a와 b에 대해 각각 가로 방향, 세로 방향에 적용한다. background- repeat : repeat no-repeat(가로는 반복하고 세로는 반복 안함);
  • repeat-x : 가로축으로 반복한다
  • repeat -y : 세로축으로 반복한다,

 

 

background -size

  • background -size 속성은 background - image 속성에 의해 지정된 배경 이미지의 크기를 지정하기 위해 사용한다.
  • 형태
    • atuo : 이미지가 본래 가지는 해상도를 그대로 보여준다.
    • contain : 배경이미지를 담고 있는 요소 내에서 배경 이미지의 비율을 변경하지 않고 표현할 수 있는 가장 큰 크기로 지정한다.
    • cover : 배경 이미지를 담고 있는 요소의 빈 부분이 보이지 않을 수 있는 범위 내에서 비율을 변경하지 않고 표현할 수 있는 가장 작은 크기로 지정한다.
    • [크기 값] : 이미지의 가로 크기를 지정한다. 이때 세로 크기는 이미지의 비율을 훼손하지 않은 비율에 따라 자동 조절된다. 만약 background-size : 160px라고 하면 가로가 160px로 세로는 이미지에 맞게 자동 조절됨 
    • auto [크기 값]
    • [크기 값 : a] [크기 값 : b] : 각a 와 b 를 이미지의 가로 크기와 세로 크기로 지정한다. 단, 이미지의 본래 해상도 비율이 무시됨으로 이미지가 찌그러질 수 있음에 유의한다.

 

font-size 

  • font-size 속성은 텍스트의 크기를 지정하기 위해 사용한다
  • 형태
    • [크기 값]

 

font-style

  • font-style 속성은 텍스트의 스타일을 지정하기 위한 속성이다.
  • 형태
    • normal : 별도의 스타일을 가지지 않음.
    • itailc : 필기체를 지원하는 경우 흘려쓰기 스타일을 적용한다. 그렇지 못할 경우 oblique와 동일하다.
    • oblique : 단순히 기울기를 적용한다.

 

font - weight 

  • font - weight  속성은 텍스트의 굵기를 지정하기 위해 사용한다.
  • 형태
    • [숫자] : 주로 100 이상의 100단위 숫자. 폰트마다 지원하는 값이 다르다.
    • [normal] : 숫자 400과 같다
    • bold : 숫자 700과 같다
    • bolder : 부모 요소의 front - weight 가 가진 속성 값 보다 한 단계 굵은 값 (주로 100 더 큰 값)
    • lighter : 부모 요소의 front - weight 가 가진 속성 값 보다 한 단계 얇은 값. (주로 100보다 더 작은 값)

 

font - family 

  • font  - family 속성은 서체를 지정하지 위한속성이다
  • 해당 속성은 콤마(,)로 구분해 여러개를 사용할 수 있다. 이때 어떠한 텍스트에 대해 가장 먼저언급된 서체부터 적용하려 하는데, 해당 텍스트를 적용할 수 없는 서체인 경우 차순위 서체를 적용한다.
  • 최종적으로 어떠한 텍스트를 표현할 서체가 없을 경우, 브라우저에 따라 다르나, 시스템 기본 폰트로 표현하거나, 네모 박스로 표시한다.
  • 형태
    • [폰트 이름 ,,,]? [serif] sans-serif [monoscape][cursive][math]
 font-family: "Malgun Gothic","Jua", sans-serif; // 맑은 고딕이 안되면 그 뒤에 대체 글꼴로 Jua
            font-weight: bold;
            color: green;

 

 

width 

  • witdth 속성은 요소의 너비를 지정하기 위한 속성이다.
  • display 속성 값이 inline 일때는 무시됨에 유의한다. // 인라인속성  태그에는 적용이 안된다 ex :  span 등 
  • 형태
    • auto : 기본 값으로 , 본래 가져야하는 너비를 가진다.
    • [크기 값] :

 

 

max - width 

  • max-width는 요소가 가질  수 있는 최대 너비를 지정하기 위한 속성이다.
  • 요소가 가지는 내용이 해당 크기를 초과할 경우 오버플로우(overflow)가 발생할 수도 있다.
      • none : 기본 값으로, 최대 너비를 지정하지 않는다.
      • [크기 값]

 

min-width

  • min-width는 요소가 가질 수 있는 최소 너비를 지정하기 위한 속성이다.
  •  형태
    • none : 기본 값으로, 최소 너비를 지정하지 않는다.
    • [크기 값]

 

height

  • height 속성은 요소의 높이를 지정하기 위한 속성이다.
  • display 속성 값이 inline 일때는 무시됨에 유의한다.
  • 형태
    • auto : 기본 값으로, 본래 가져야하는 높이를 가진다.
    • [크기 값]

max -heigth ( max -heigth &height 내용이 부족할때 height은 콘텐츠가 이보다 적으면 여유 공간이 생깁니다. 다름(height 내용이 넘칠때 같음(둘다 오버플로우 속성보다 값이 더 많아서 그 속성을 뛰어넘음 )

  • max -heigth는 요소가 가질 수 있는 최대 높이를 지정하기 위한 속성이다.

min - hegth (min - hegth & height내용이 부족할때 같음 내용이 넘칠때 다름 )

min - hegth는 요소가 가질 수 있는 최소 높이를 지정하기 위한 속성이다.

 

 

 

overflow 

  • overflow 속성은 요소를 벗어나는 요소의 내용에 대해 어떻게 처리할 것인가에 대한 설정을 위한 속성이다.       overflow : atuo; 
  • 값 [ 값 ]
    • auto : 브라우저가스스로 판단하도록 한다. 내용이 넘치지 않을때 스크롤바를 보이지 않고, 내용이 넘치면 스크롤바를 보이게 함.(내용이 안 넘치면  스크롤바 안 나옴)
    • hidden : 넘친 내용을 숨김.
    • scroll : 내용이 넘치지 않더라도 항상 스크롤바를 보이게 함.
    • visible : 넘친 내용을 보이게 함. ( 스크롤바를 보이지 않게 함)
  • 형태
    • [값] : 가로와 세로 모두 값을 적용한다.
    • [값 : a  ] [ 값 : b ] : 각 값 a 와 b 에 대해 가로 방향, 세로 방향에 적용한다.

 

aspect-ratio (aspect-radio : (가로)16/(세로)9 ; 

  • aspect - ratio 속성은 요소의 크기에 대한 비율을 지정하기 위해 사용하는 속성이다.
  • 크기와 관련된 속성이 모두(width , height)  지정되어 있는 상황에서는 사용하지 않는다.
  • 형태
    • [가로 비율/ 세로 비율]

 

 

position

  • position 속성은 요소의 위치(자리를 잡는 방식)에 대한 기준을 지정하기 위한 속성이다.
  • 형태
    • static : 기본 값으로, 포지셔닝을 하지 않음. top,bottom,left 속성을 무시한다.
    • relative : 상대적 포지셔닝. 본래 요소의 위치(static 일때의 위치)를 기준으로 움진인다.
    • absolute : 절대적 포지셔닝.polition 속성 값이 static 이 아닌 가까운 부모/ 조상( 없다면 문서 자체)를 기준으로 움직인다. 추가로 다른 요소의 흐름에 영향을 미치지 않는다.
    • fixed : 고정 포지셔닝. 뷰포트를 기준으로 움직인다. 스크롤에 영향을 미치지 않는다. 항상 문서를 기준으로 움직인다. 추가로 다른 요소의 흐름에 영향을 미치지 않는다.

top

  • top 속성은 요소의 상단 위치를 지정하기 위한  속성이다
  • 형태
    • [크기 값]

right

  • right 속성은 요소의 우측 위치를 지정하기 위한 속성이다
  • 형태
    • [크기 값]

bottom 

  • bottom 속성은 요소의 하단 위치를 지정하기 위한 속성이다.
  • 형태
    • [크기 값]

 

 

    <style>
        
        .box.a {
            width : 10rem;
            height: 10rem;
            background-color: blue;
        }
        .box.b {
            width : 10rem;
            height: 10rem;
            background-color: red;

        }
   .box.c {
            top:15rem ;
            left: 5rem;
            width : 5rem;
            height: 5rem;
            background-color: yellow;
            position: absolute;
        }

    </style>
</head>
<body>

<div class ="box a"></div>
<div class ="box b"></div>
<div class ="box c"></div>

 

결과

top은 위에서부터 공간이 얼마나 떨어져있는지를 지정 하는거임

그러니 노란색 네모를 파란색 안으로 넣고 싶다 하면  top이 아니라 bottom을 조정해서 공간을 줘야함.

 

 

근데 저 남는 공간이 거슬림

 

 

        .box.b {

            width : 10rem;
            height: 10rem;
            background-color: red;
            position: relative;


        }
   .box.c {

            width :5rem;
            height: 5rem;
            background-color: yellow;
            position: absolute;
            top :5rem;
            left: 5rem;
       
        }

    </style>
</head>
<body>

<div class ="box a"></div>
<div class ="box b">
<div class ="box c"></div>
</div>

 

1. c box를 b에 넣고싶은 거니까 b를 기준으로 잡기 위해 c를 absolute를 포지션으로 잡아줌
2.b는 relative로 잡아줌 absolute는 포지션을 기준으로 부모를 찾음.
2-1 그리고 c태그도 b 태그 안에 넣어서 부모-자식으로 만들어줌
3.위치 b 박스를 기준으로 10이니까 위 5 왼쪽 5 넣어줌

 

 

 

display

  • display 속성은 요소가 표시될 방식을 지정하기 위한 속성이다.
  • 형태
    • block : 해당 요소를 플로우 컨텐츠로 표시한다.
    • inline : 해당 요소를 구문 컨텐츠로 표시한다. 크기와 관련된 속성을 무시한다.
    • inline-block : inline 의 속성을 가지는 구문 컨텐츠이면서 크기 설정 등이 가능하도록 일부  block의 속성도 가지도록 표시한다.
    • none : 요소를 렌더링하지 않는다. 공간도 차지하지 않는다.
    • flex : 해당 요소를 플로우 컨텐츠형 플렉스 컨테이너로 표시한다. 별도 문서 참고.
    • inline-flex : 해당 요소를 구문 플로우 컨테이너로  표시한다. 별도 문서 참고.
    • grid : 해당 요소를 플로우 컨텐츠형 그리드 컨테이너로 표시한다. 별도 문서 참고.
    • inline-grid : 해당 요소를 구문 컨텐츠형 그리드 컨테이너로 표시한다. 별도 문서 참고.

 

 

margin // 요소가 작아진다 -> 외부 공간의 영역이 커진다

  • margin 속성은 요소의 내부 여백을 지정하기 위한 속성이다.
  • [크기 값] : 모든 방향에 값을 적용한다.
  • [크기 값 : v] [ 크기 값: h] : 상,하에  v 좌,우 에 h 를 적용한다
  • [크기 값 : t ] [크기 값 : r ] [ 크기 값 : b ] [크기 값: l ] : 상, 우, 하, 좌 순서대로 t, r ,b ,l 를 적용한다.

 

 

margin-top

  • margin-top속성은 요소의 위쪽 외부 여백을 지정하기 위 한 속성이다.
  • 형태
    • [크기 값]

margind-right

  • margin-right 속성은 요소의 오른쪽 외부 여백을 지정하기 위한 속성이다.
  • 형태
    • [크기 값]

margin-bottom

  • margin-botton속성은 요소의 아래쪽 외부 여백을 지정하기 위한 속성이다.
    • 형태
      • [크기 값]

margin-left

  • margin-left 속성은 요소의 왼쪽 외부 여백을 지정하기 위한 속성이다
  • 형태
    • [크기 값]

 

pading  // 요소가 커진다 -> 외부 공간이 줄어듬

  • pading 속성은 요소의 외부 여백을 지정하기 위한 속성이다.
  • [크기 값] : 모든 방향에 값을 적용한다.
  • [크기 값 : v] [ 크기 값: h] : 상,하에  v 좌,우 에 h 를 적용한다
  • [크기 값 : t ] [크기 값 : r ] [ 크기 값 : b ] [크기 값: l ] :  상, 우, 하, 좌 순서대로 t, r ,b ,l 를 적용한다. 

패딩을 줬을 때
마진을 줬을 때

 

padding-top

  • padding-top속성은 요소의 위쪽 내부 여백을 지정하기 위 한 속성이다.
  • 형태
    • [크기 값]

padding-right

  • padding-right 속성은 요소의 오른쪽 내부 여백을 지정하기 위한 속성이다.
  • 형태
    • [크기 값]

padding-bottom

  • padding-botton속성은 요소의 아래쪽 내부 여백을 지정하기 위한 속성이다.
    • 형태
      • [크기 값]

ppading-left

  • padding-left 속성은 요소의 왼쪽 내부 여백을 지정하기 위한 속성이다
  • 형태
    • [크기 값]

box-sizing

  • box- sizing 속 성은 요소의 크기를 정할 때의 기준을 설정하기 위한 속성이다.
  • 형태
    • content-box : 기본 값으로, 요소가 가질 수 있는 내부  내용을 담는 공간을 기준으로 크기를 지정한다.
    • border-box : 요소의 테두리를 기준으로 크기를 지정한다.
.box{
    width :5rem;
    height: 2.5rem;
    background-color: pink;
    display: inline-block;
    /*padding: 2rem;*/
    padding : 1rem;
}
.box.a {
    box-sizing: content-box;
}
.box.b {
    box-sizing: border-box;
}

.box를 가지고 있는 a,b 에 1-7줄 까지 속성을 주고 box-sizing을 콘텐츠로 할지 보더로 할지를 나눴다

 

결과 값

 

컨텐츠는 글자 컨텐츠에 맞춰서

보더박스는 박스 테두리에 맞췃 기본은 컨텐츠 박스임

 

 


✅ 실용적인 사용 팁

전체 레이아웃 구성 시: box-sizing: border-box를 사용하면, 요소의 크기를 정확하게 제어할 수 있어 레이아웃을 구성할 때 유리합니다.

글자 콘텐츠에 맞춘 크기 조정 시: box-sizing: content-box를 사용하면, 콘텐츠 영역의 크기만을 기준으로 설정되므로 글자 크기에 맞춰 요소의 크기가 조정됩니다.

일관된 스타일 적용을 위해: CSS의 초기화 단계에서 * { box-sizing: border-box; }를 설정하면, 모든 요소에 일관된 크기 계산 방식이 적용되어 레이아웃이 예측 가능해집니다.

 

 

box-shadowing 

  • box-shadowing 속성은 요소에 그림자를 적용하기 위한 속성이다.
  • 형태
    • [오프셋 x] [오프셋 y ] [반경] [색상]
      • [오프셋 x] : 그림자를 가로 방향으로 얼마나 이동시킬지에 대한 크기 값이다.
      • [오프셋y]:  그림자를 세로 방향으로 얼마나 이동 시킬지에 대한 크기 값이다.
      • [반경] : 그림자가 퍼져나가게 할 크기 값이다.
      • [색상] : 그림자의 색상.

 

text-align 

  • text-align 속성은 텍스트를 정렬하기 위한 속성이다.
  • 형태
    • left : 왼쪽 정렬
    • right : 오른쪽 정렬
    • center : 가운데 정렬
    • justify : 양쪽정렬

text-decoration

  • text-decoration 속성은 텍스트 장식을 위한 속성이다.
  • 값  [종류]
    • underline : 밑줄
    • overline : 윗줄
    • line-through : 취소선
  • 값 [스타일]
    • solid : 실선
    • dashed : 일반 점선
    • dotted : 원형 점선
    • double : 이중 실선
    • wavy : 물결표
  • 형태( 사용법 ) 
    • none
    • [종류 ...][색상][스타일]


letter-spacing 

  • letter - spacing 속성은 자간 거리를 지정하기 위한 속성이다.
  • 형태
    • normal : 기본 값으로, 폰트 및 브라우저에서 제정하는 기본 값
    • [크기 값]
.box.b {
    box-sizing: border-box;
    text-decoration: wavy red underline overline;
    letter-spacing: 5rem;
}
순서 상관 없이 라인 여러개 작성도 가능

 

word-spacing

  • word-spacing 속성은 단어간, 태그간 거리를 지정하기 위한 속성이다.
  • 형태
    • normal : 기본 값으로, 폰트 및 브라우저에서 지정하는 기본 값
    • [크기 값]

 

white-space 

  • white-space 속성은 텍스트의 공백 문자 및 개행자(엔터)에 대한 처리를 설정하기 위해 사용하는 속성이다.
  • 형태
    • normal
      • 연속된 공백을 하나로 합친다.
      • 임의적인 개행을 인정하지 않는다(공백으로 치환)
      • 줄이 길어져 요소를 벗어날 경우 자동으로 줄바꿈한다.
    • nowrap 
      • 연속된 공백을 하나로 합친다.
      • 임의적인 개행을 인정하지 않는다. ( 공백으로 치환)
      • 줄이 길어져 요소를 벗어나도 자동으로 줄바꿈하지 않는다.
    • pre
      • 연속된 공백을 합치지 않는다.
      • 임의적인 개행(엔터)을 인정한다.
      • 줄이 길어져 요소를 벗어나도 자동으로 줄바꿈하지 않는다.
    • pre-wrap
      • 연속된 공백을 합치지 않는다.
      • 임의적인 개행을 인정한다.
      • 줄이 길어져 요소를 벗어날 경우 자동으로 줄바꿈한다.

line-height

  • line-height 속성은 한 줄의 높이를 지정하기 위한 속성이다.
  • 형태
    • normal : 기본 값으로, 폰트 및 브라우저에서 지정하는 기본 값(주로 110%- 140%)
    • [크기 값]

 

z-index

  • z-index속성은 Z축으로의 배치 순서를 설정하기 위한 속성이다. 값이 클수록 사용자에게  가까이 배치된다.( 화면 위로 올라온다. ) 3차원 가로 세로 높이로 해서 입체로 배치순서를 설정함.
  • 단, position 속성 값이 static 일 경우 해당 속성을 무시한다.
  • 형태
    • auto :기본 값으로, 맥락(context)을  형성하지 않는다.
    • [정수]

 

'FRONT-END > CSS' 카테고리의 다른 글

[CSS] CSS 0918 6일 (filter, transform, border,flex)  (0) 2025.09.18
깨알 : box-sizing에 대해서  (0) 2025.09.17
[CSS] input 박스 클릭-> 연결되어있는 글자색 변경 // 체크박스 체크-> 글씨보이게 하기  (0) 2025.09.15
[CSS] 0915 3일차 (선택자, hover 등등)  (0) 2025.09.15

관련글

티스토리툴바