CSS 2일차(1)

선택자 우선순위

기본적으로 css는 위에서 아래로 적용
동일한 요소를 다양한 선택자로 css를 부여한 경우 우선순위에 따라서 결정

태그선택자 -> 클래스선택자 -> 아이디 선택자 -> 인라인 스타일 ->! important

글꼴

<head>
    <style>
        p{
            font-size: 24px;
        }

        #ff1{
            font-family: 궁서체;
        }

        #ff2{
            font-family: 굴림체;
        }

        #ff3{
            font-family: Arial, Helvetica, sans-serif;
        }

        /* 구글 폰트에서 noto sans kr 가지고 옴. */
        .ff4{ 
        font-family: "Noto Sans KR", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        }
    </style>
</head>
<body>
    <p id="ff1">글꼴테스트입니다</p>
    <p id="ff2">글꼴테스트입니다</p>
    <p id="ff3">글꼴테스트입니다</p>
</body>

텍스트

color

텍스트 색상 지정

형식 : 선택자{color : 색상명 | 16진수 색상코드 | rgb(r, g, b) | rgba(r, g, b, a);}

text-decoration

텍스트에 선 추가

형식 : 선택자{text-decoration : none | underline | line-through | overline;}

텍스트 영역 아래 줄 긋기
텍스트 영역 취소선 긋기
텍스트 영역 위에 줄 긋기

text-align

텍스트를 정렬할 때 사용

형식 : 선택자{text-align : left | right | center | justify;}

기본정렬(왼쪽)

미국 조지아주 현대차그룹-LG에너지솔루션 배터리 합작 공장 건설 현장에서 구금된 한국인 중 현지 잔류를 원한 1명을 제외한 316명이 11일 정오(현지시간) 귀국길에 오른다. 정부는 전날 승객 368명이 탑승할 수 있는 대한항공 B747-8i 기종에 승무원만 탑승한 채 미국 애틀랜타 공항으로 보냈었다. 전세기는 조지아 포크스턴 이민세관단속국(ICE) 구금 시설에 억류된 한국인을 태우고 출발할 예정이다. 전세기 왕복 운항에 드는 10억원 안팎의 비용은 LG에너지솔루션 측이 부담할 것으로 알려졌다.

양쪽정렬

오른쪽정렬

중앙정렬

line-height

글자 높이 -> 행간 조절

형식 : 선택자{line-height : normal | px | em | %;}

콘텐츠 영역

요소영역

content(내용) + padding(내부여백) + border(테두리)

Padding

내용 영역(content)과 테두리 영역(border) 사이의 거리, 여백을 조절하는 스타일 속성

Margin

타 요소들 간의 간격을 조절할 때 사용

Border

.test{
  /* box-sizing: content-box; 기본값 -> width / height = 컨텐츠 영역만*/
  box-sizing: border-box; /*width/height = 컨텐츠 + 패딩 + 테두리*/
  background: wheat;
  width: 100px;
  height: 100px;
  border: 10px solid black;
  /* padding: 12px; */
  /* margin: 12px; 컨텐츠 크기에 영향을 주지 않음, 외부 여백 */
}

#test7{
  border: 1px solid black;
  border-width: 5px;
  border-style: double;
  border-color: rosybrown;
  border-top: 7px solid gainsboro;
  border-radius: 8px;
}
<div class="test" id="test7">컨텐츠 영역</div>

배경

background-repeat: no-repeat; 이미지를 반복되게 하지 않는 설정

background-size: 100%; 이미지 크기를 부모 콘텐츠의 100%만큼

border-radius를 사용해 원 형태로 변경되는 조건은 가로, 세로길이가 같아야 하며, 가로, 세로길이의 절반 값부터 적용된다

즉. 현재 가로, 세로가 500px이므로 border-radius의 값은 250px면 충분하다.

.test{
  /* box-sizing: content-box; 기본값 -> width / height = 컨텐츠 영역만*/
  box-sizing: border-box; /*width/height = 컨텐츠 + 패딩 + 테두리*/
  background: wheat;
  width: 100px;
  height: 100px;
  border: 10px solid black;
  /* padding: 12px; */
  /* margin: 12px; 컨텐츠 크기에 영향을 주지 않음, 외부 여백 */
}

#test8{
  width: 500px;
  height: 500px;
  /* border-radius: 500px; */
  background-color: cadetblue;
  background: lavenderblush;
  background: url(../imgs/빵빵이.jfif);
  background-image: url(../imgs/빵빵이.jfif);
  background-repeat: no-repeat;
  background-size: 100%;
}

<h3>배경관련 스타일</h3>
<div class="test" id="test8">배경</div>

+ 크롬 브라우저 기준 ctrl + shift + c를 누르면 개발자 모드(F12)로 들어가지며, 그림이나 텍스트 등에 마우스를 올리면, 값을 볼 수 있다.

'CSS' 카테고리의 다른 글

CSS 3일차 (0)	2025.09.17
CSS 2일차(4) (0)	2025.09.11
CSS 2일차(3) (0)	2025.09.11
CSS 2일차(2) (0)	2025.09.11
CSS 1일차 (0)	2025.09.10

teg0 님의 블로그

CSS 2일차(1)

선택자 우선순위

글꼴

텍스트

color

text-decoration

text-align

기본정렬(왼쪽)

양쪽정렬

오른쪽정렬

중앙정렬

line-height

콘텐츠 영역

요소영역

Padding

Margin

Border

배경

'CSS' 카테고리의 다른 글

티스토리툴바

CSS 2일차(1)

선택자 우선순위

글꼴

텍스트

color

text-decoration

text-align

기본정렬(왼쪽)

양쪽정렬

오른쪽정렬

중앙정렬

line-height

콘텐츠 영역

요소영역

Padding

Margin

Border

배경

'CSS' 카테고리의 다른 글

관련글

티스토리툴바