#10 #CSS

CSS 기초 스타일링

• <style></style>: HTML 문서 안에서 스타일(CSS)을 작성하는 태그

• color: red; - 글자의 색을 설정함 (예: 빨간색 글자)

• background-color: lightblue; - 요소의 배경 색 설정

• width: 300px; - 요소의 가로 길이 설정

• height: 150px; - 요소의 세로 길이 설정

• font-size: 18px; - 글자의 크기 설정

• border: 1px solid black; - 검정 실선 테두리 설정

• border-radius: 10px; - 모서리를 둥글게 만듦

• padding: 10px; - 요소 안쪽 여백 설정

• margin: 20px; - 요소 바깥쪽 여백 설정

• hover, focus, active: 마우스 올림/클릭/입력 시 스타일 바꾸는 인터랙션 효과

  • :hover - 마우스를 요소 위에 올렸을 때 스타일 변화 (예: 버튼 색 변경)
  • :focus - 입력창을 선택했을 때 스타일 변화 (예: 테두리 강조)
  • :active - 클릭하는 순간 스타일 변화 (예: 누르는 버튼 색 변화)

---

border-radius가 어렵다고?(사실내가)

border-radius는 HTML 요소의 모서리를 둥글게 만들어주는 CSS 속성이야
각 모서리를 얼마나 둥글게 할지를 px 또는 % 단위로 지정할 수 있어

기본 문법:

border-radius: 10px;

= 모든 모서리를 10px만큼 둥글게 처리함

개별 모서리 지정:

border-radius: 10px 20px 30px 40px;

= 왼쪽 위: 10px / 오른쪽 위: 20px / 오른쪽 아래: 30px / 왼쪽 아래: 40px

퍼센트로 원 만들기:

border-radius: 50%;

= 정사각형이면 완전한 원이 되고, 직사각형이면 타원형이 됨

---

박스와 정렬 (display & flex)

• display 속성:

  • block: 한 줄 전체 차지 — 줄 바꿈 발생함
  • inline: 글자처럼 옆에 붙음 — 줄 바꿈 없음
  • inline-block: inline처럼 배치되면서도 block처럼 크기 설정 가능
  • none: 화면에서 숨김

• flex 레이아웃:

  • display: flex: 유연한 박스 정렬 시작!
  • justify-content: 주축 정렬 (left, center, right 등)
  • align-items: 교차축 정렬 (top, center, bottom 등)

• 기타 정렬 속성:

  • position: fixed : 위치 고정
  • text-align: center: 글자 중앙 정렬
  • transform: scale(), translate(): 요소 크기나 위치 변경

---

디자인 & 그라데이션 & 아코디언

• linear-gradient: 배경에 예쁜 그라데이션 색 넣기

  background: linear-gradient(to right, pink, skyblue);

• 아코디언 메뉴: <details>와 <summary>로 펼치고 접는 아코디언 만들기
  + <details> 안에 꼭 넣어주기‼️

  <details>
    <summary>더 보기</summary>
    <p>여기에 자세한 내용을 적어요!</p>
  </details>

---

시맨틱 태그 & 구조화

• <header>, <nav>, <main>: 페이지의 큰 구조를 나눌 때 의미 있게 사용하는 태그들

  <header>헤더 영역</header>
  <nav>메뉴바</nav>
  <main>메인 콘텐츠</main>

• <iframe>: 다른 웹페이지나 유튜브 영상, 지도 등을 삽입할 때 사용

  <iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>

  • src: 불러올 외부 콘텐츠의 URL을 지정해줌 (예: 유튜브 영상 링크)

  • width, height: iframe 창의 크기를 설정함 (px 단위)

  • frameborder: 경계선 표시 여부 (0이면 테두리 없음)

  • allowfullscreen: 전체 화면 보기 허용
    👉 iframe은 콘텐츠를 직접 옮기지 않고도 다른 콘텐츠를 내 페이지에 자연스럽게 보여줄 수 있음
    

---

🎀 마무리💖

오늘은 제가 1학기동안 방과후를 들으면서 배웠던 html, css를 총 정리하게 된 날이네요!!
벌써 미림마이스터고를 다닌지가 1학기가 지나간다는 것이 잘 믿기지 않지만🥹🥹
이번 본격적인 마크업과 프론트엔드에 대해 깊게 알게 된 것 같아서 너무 뜻깊은 시간이고
제가 배운 모든 것을 벨로그에 정리할 수 있어 너무 기쁘고 뿌듯하네요!😽
여러분도 즐거운 프론트엔드 생활 되세요!

즐코! 💖