포스코x코딩온 웹 풀스택 양성과정

[포스코x코딩온] 웹 풀스택 과정 1주차 회고 | CSS 속성

Codult 2024. 3. 28. 11:04
728x90

Font 속성

  • font-weight: 글자의 두께를 설정한다.
<div style="font-weight: normal;"></div> : 기본 두께 (400)
<div style="font-weight: bold;"></div> : 두껍게 (700)
<div style="font-weight: bolder;"></div> : 상위(부모)요소보다 더 두껍게
<div style="font-weight: lighter;"></div> : 상위(부모)요소보다 더 얇게
<div style="font-weight: 300;"></div> : 100~900 범위 내 100단위 숫자로 직접 지정 가능
  • font-size: 글자의 크기를 설정한다. (기본 크기: 16px)
<div style="font-size: 10%;"></div>: 부모요소의 폰트 크기의 10% 비율
  • line-height: 글자가 차지하는 한 줄의 높이를 지정한다. (세로로 가운데 정렬 가능)
<style>
div {
  width: 200px;
  height: 200px;
  }
div p {
  text-align: center;
  line-height: 200px; 		(p 한 줄의 높이를 div 높이와 일치시켜, 세로 가운데로 정렬되도록 함)
  }
</style>

 

※ font 글꼴 설정 (주로, 구글폰트나 눈누폰트를 이용)

  • 구글폰트 사용법 : 원하는 font를 선택 → 굵기를 선택하면 link와 CSS 선택자가 제공됨 → link는 <head>태그 내 복붙 & CSS 선택자를 적용하고자 하는 곳에 복붙
  • 눈누폰트 사용법: 원하는 font를 선택 → 제공되는 @font-face 를 <style>태그 내 가장 맨 위에 복붙 → CSS 선택자(font-family: ~)를 적용하고자 하는 곳에 복붙

 

문자에 대한 속성

  • color: 글자의 색상을 지정한다.
  • text-align: 문자의 정렬 방식을 지정한다. (left/right/center/justify)
  • text-decoration: 문자를 장식한다. (none/underline/overline/line-throught)
    ※ 속성값 'none' 으로, a 태그에서 자동으로 생성되는 밑줄을 없앨 수 있다.

Inline 요소 / Block 요소

  • Inline 요소: 콘텐츠의 크기만큼 자리를 차지(크기를 지정할 수 없음)하며, 수평으로 쌓인다.
    ex) <span> <a>
  • Block 요소: 한 줄 전체를 차지(크기 지정할 수 있음)하며, 줄바꿔 수직으로 쌓인다.
    ex) <div> <h1> <p>
  • Inline-block 요소: 인라인과 블록 속성을 모두 가짐. (아래와 같이 속성 display로 지정)
	<style>
  	span {
  		display: inline-block;
  		width: 200px;
  		height: 100px;
  	}
	</style>

Margin & Padding / Width & Height

  • Margin: 다른 요소와의 거리. 바깥쪽 여백.
  • Padding: content와 border 사이의 여백. (padding이 커지면 요소의 크기도 커지겠지)
  • 속성을 이용하여 padding, margin 공간 (여백) 지정할 수 있음
    (한번에 여러개 또는 top/bottom/left/right 중 특정한 하나를 뽑아서 지정할 수 있음)
  • Width: 요소의 가로 너비
  • Height: 요소의 세로 너비
  • max-width, max-height: 최대 너비를 설정하여 제한할 수 있음.
  • min-width, min-height: 최소 너비를 설정하여 제한할 수 있음.

※ Calc() 함수를 이용하여, 원하는 크기의 값을 계산하여 width/height 적용시킬 수 있다.

Border

  • border: 테두리 선의 두께, 종류, 색상을 설정할 수 있다.
  • width, style, color 모두 각각 설정 할 수 있다. (border-width:, border-style:, border-color:)
  • border-radius: 요소의 모서리를 둥글게 깍을 수 있다.

Box-sizing

  • box-sizing: 요소의 크기를 계산하는 기준을 지정할 수 있다. (기본은 content-box)
    • Content-box = content가 차지하는 크기
    • Border-box = border까지 포함한 크기
<div style="width: 200px;
            height: 200px;
            box-sizing: border-box;
            border: 5px solid black;">
이 경우엔 border까지 포함하여 너비가 200px인 박스가 그려지겠지</div>

Opacity / Visibility

  • Opacity: 요소의 투명도를 설정한다. (0~1 사이 소수점 숫자로 조절. 1이 가장 불투명)
    - 사라짐. 속성 O, 자리 O
  • Visibility: hidden: 요소를 숨긴다.
    - 사라짐. 속성 X, 자리 O
  • Display: none: 요소를 없앤다.
    - 사라짐. 속성 X, 자리 X

Overflow

  • Overflow: 내용이 요소의 크기를 넘었을 때, 넘친 내용을 제어할 수 있다.
    • visible: 넘친 내용을 그대로 보여줌
    • hidden: 넘친 내용을 잘라냄
    • scroll: 넘친 내용을 잘라내고 스크롤바 생성 (넘치지 않아도 스크롤바 생성됨)
    • auto: 넘친 내용이 있는 경우에만 스크롤바 생성
  • overflow-x, overflow-y: x, y축 각각에 대하여 지정할 수 있다.



🧐 추가) 실습을 통해 알게 된 것

  • margin: auto 속성값을 지정해주면, 브라우저가 남은너비 의 공간을 계산하여 좌우 margin을 균등하게 배분해 준다.
728x90