CSS (Cascading Style Sheets)
: HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어.
HTML은 문서의 구조와 콘텐츠를 정의하지만,
CSS는 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어합니다.
주로 HTML 문서의
1. <head> 요소 안에서 <style> 태그를 사용하거나(인라인 스타일)
2. 외부 CSS 파일을 연결하여 사용할 수 있습니다.
외부 CSS 파일은 <link> 요소에 href 속성으로 css 파일명을 입력하면 연결됩니다.
주로 외부 CSS 파일을 사용하는 것을 권장합니다.
CSS는 HTML 요소를 선택하기 위해 선택자를 사용하는데요.
선택자(Sclectors)는 스타일을 적용할 대상을 지정합니다.
만약 같은 요소가 두 개 이상이 있어 각각의 스타일을 지정하고 싶을 땐 id, class 선택자를 사용합니다.
| 이름 | 사용법 | 설명 |
| class | .클래스 | 여러 요소 그룹화, 해당 그룹에 스타일 적용. 하나의 요소가 여러 클래스 가질 수 있고 여러 요소가 동일한 클래스를 가질 수 있음. |
| id | #아이디 | 문서 내에서 유일한 식별자를 가진 요소를 선택. HTML 문서 전체에 동일한 ID를 가지는 두 개 이상의 요소가 있으면 안됨. 유일성을 보장하기 위해 사용. |
스타일을 지정하기 위해 속성과 값의 쌍을 사용하고, 주요 스타일 속성으로 아래와 같습니다.
• color: 텍스트 색상 지정
• background-color: 배경색 지정
• font-family: 글꼴 지정
• font-size: 글자 크기 지정
• margin, padding: 요소 주위의 여백 및 안쪽 여백 지정
• border: 테두리 지정
• width, height: 요소의 너비와 높이 지정
• display: 요소의 표시 방식 지정 (예: block, inlinge, flex 등)
다양한 CSS 속성을 학습할 수 있는 사이트로는 w3school 이 있습니다.
오즈코딩스쿨에서 제공해주는 가이드라인 코드와 함께 실습해보겠습니다.
먼저 적용할 CSS 속성이 있기 때문에 VSCode를 이용해
styles 이름으로 CSS 파일을 하나 생성하겠습니다.
° 배경색은 #f4f4f4
° 폰트는 Arial
° 제목(오늘의 할일)이 하이퍼링크(id="oz-link")때문에 적용된 스타일 제거
° 제목 글자색 #3498db
° 할 일 목록 글자 크기 18px, 아래 margin 10px
° '실습 도전하기'만 bold 처리
어려웠던 점?
- li가 아니라 ul로 적용했더니 margin 적용이 안되어 li로 변경 후 적용된 것을 볼 수 있었습니다.
- 오늘의 할일을 h1 으로 적용했더니 하이퍼링크가 없어지지 않아서, id인 oz-link를 적용하니 밑줄까지 없어졌습니다.
'[오즈코딩스쿨] AI 헬스케어 > 👍🏻 베이스캠프 미션' 카테고리의 다른 글
| [AI헬스캠프] JavaScript (0) | 2025.09.11 |
|---|---|
| [AI헬스캠프] CSS 이론 (2) (0) | 2025.09.10 |
| [AI헬스캠프] HTML의 기초 (0) | 2025.09.08 |
| [AI 헬스캠프] Git 과 GitHub (0) | 2025.09.07 |
| [AI 헬스캠프] CLI 환경 알아보기 (0) | 2025.09.03 |