CSS 기초 II

🔗 display 속성

• display: none - 안보이게, 공간 차지도 없어짐
• visibility: hidden - 안보이게, 공간 차지는 유지됨
• block: 한줄 차지, 줄바꿈이 됨
  • div, h1~h6, p, hr, ol, ul, li, table, form
• inline: 콘텐츠 크기만큼 너비 차지, 줄바꿈 안됨
  • span, a, img, text 속성(b, small, ins, etc...), input, label
• inline-block: inline이면서 너비/높이 확보 가능

---

🔗 box model

모든 레이아웃(배치)은 박스모양으로 가능

4가지 박스 모델 구성 요소

margin: 다른 요소와의 간격, border: 테두리선의 굵기,
padding: 내부 요소와 테두리와의 간격, content: 내용물의 크기

---

🔗 테두리선 속성

• border: <두께> <타입> <색상>
• border-width: 두께
• border-style: 타입
• border-color: 색상
• border-radius: 모서리 둥글게 하기

<style>
    div {
        border: 10px solid red;
        border-width: 15px; /* border 두께 */
        border-style: solid; /* border style, solid: 실선, dotted: 점선, dashed: 파선 */
        border-color: blue;
        border-radius: 30px;
        border-radius: 30px 20px; /* LTRT RBLB */
        border-radius: 10px 20px 30px 40px; /* LT RT RB LB */
    }
</style>

---

🔗 마진(margin) & 패딩(padding)

1. margin: 다른 요소와의 간격
2. padding: 내부 요소와 테두리와의 간격

<style>
  div {
    width: 100px;
    height: 100px;
    border: 10px solid black;
    margin: 10px; /* 상하좌우 margin 10px */
    margin: 10px 20px; /* margin: 상하 10px, 좌우 20px */
    margin: 10px 20px 30px 40px; /* margin: 상 10px, 우 20px, 하 30px, 좌 40px */
    margin-top: 5px; /* 상 margin 5px */ /* padding도 margin과 동일함 */
    padding: 20px; /* 상하좌우 padding 20px */
    padding-left: 10px; /* 좌 padding 10px */
  }
  span {
    display: inline-block;
    background-color: blue;
    margin: 20px;
  }
</style>

---

🔗 box-sizing 속성

width, height의 기준을 설정

1. content-box : default, 콘텐츠의 너비/높이 기준
2. border-box : 콘텐츠 + 패딩 + 테두리선 까지를 너비/높이로 포함

box-sizing: content-box /* default - 콘텐츠 크기만을 고려 */
box-sizing: border-box /* 콘텐츠 + 패딩 + 테두리 크기를 고려 */

 

---

🔗 font-family 속성

글꼴 설정

font-family: Arial, Helvetica, sans-serif;

 

 

🖌️ 웹폰트 적용법

1. 사용자 PC에 폰트가 설치되어 있는 경우
2. 폰트 파일(ttf, otf)과 함께 배포
3. 인터넷 상의 폰트 파일 사용

/* Google fonts 적용 예시 */
<style>
  @import url("https://fonts.googleapis.com/css2?family=Jersey+15&display=swap");
  .font {
    font-family: "Jersey 15", serif;
    font-weight: 400;
    font-style: normal;
  }
</style>
.
.
.
<h1 class="font">대한민국 홍길동 12345!@#$</h1>
<h2 class="font">Good Afternoon~ Korea~ 12345!@#$</h2>

---

🔗 Position 속성

1. static: default, 순차적으로 쌓이는 방식
2. relative: 상대 좌표에 위치(기존 위치 기준)
3. absolute: 절대좌표에 위치(가장 가까운 relative, absolute, fixed 태그를 기준)
4. fixed: 고정좌표, 뷰포트(웹 화면) 기준
5. sticky: 특정 스크롤 위치에 고정

 

📘 위치조정 방법

top, bottom, left, right 속성을 이용하여 기준점으로부터 위치 이동 (static 제외)

---

✈️ 출처

한국경제신문 x 토스뱅크 풀스택 훈련