2025년 5월 28일 수요일(3일차)

Jeonghoon·2025년 5월 28일

jeonghoon's Study

목록 보기

3/128

<div> 
    <h3>학생명단</h3>
    <h3>리스트</h3>
    <ol>
        <li><h3>유재석</h3></li>
        <li><h3>강호동</h3></li>
    </ol>
</div>

구분	포함되는 요소
div의 자식	h3, h3, ol
div의 자손	h3, h3, ol, li, h3, li, h3

💡 Tip:
“부모-자식 구조를 이해하면, 스타일링과 스크립트 제어가 쉬워진다.”

항목	설명
`<textarea placeholder="안정훈 멍청이"></textarea>`	placeholder는 공백(space)이 포함되면 표시되지 않음
`<button></button>`	클릭 기능. JS 함수와 연동 가능
`<table>`	표 작성 마크업
`border="1"`	테두리 표시
`border-collapse: collapse;`	이중 테두리를 하나로 합침
`<tr>`	테이블의 행(가로줄)
`<th>`	제목 셀 (볼드체 자동)
`<td>`	일반 데이터 셀
`rowspan`	행 병합
`colspan`	열 병합

📌 활용 예시: 게시판, 통계표, 상품 목록 등

💬 “이제 F12 눌러서 다른 웹사이트의 코드를 보는 것도 재미있다!”

CSS (Cascading Style Sheets) 는 HTML을 꾸며주는 스타일 언어
HTML은 구조(뼈대), CSS는 디자인(옷), JS는 동작(이벤트)을 담당한다.

방법	설명
① 인라인 방식	`<마크업 style="속성명:값;"/>`
② 내부 스타일 시트	`<style> 선택자{속성명:값;} </style>`
③ 외부 스타일 시트	`<link href="style.css" rel="stylesheet"/>`

💡 Tip:
브라우저에서 F12 → style 탭을 열면 CSS를 임시 테스트할 수 있다.

대상(HTML 요소)을 구분해 스타일을 적용하는 규칙

⚖️ 우선순위 규칙
#id > .class > 태그명 > *
(같은 선택자 내에서는 나중에 작성된 코드가 적용됨)

속성	설명
`font-family`	글꼴 설정
`font-size`	폰트 크기 설정
`font-style`	글꼴 기울기 (italic 등)
`font-weight`	폰트 굵기 (bold 등)
`word-spacing`	단어 간격 조정
`letter-spacing`	글자 간격 조정
`line-height`	줄 간격 조정
`text-align`	텍스트 정렬 (center, left, right)
`text-decoration`	텍스트 효과 (underline, overline, line-through 등)
`color`	글자 색상 지정 (이름, RGB, HEX)

🎨 색상 표현 예시

color: green;
color: rgb(0, 128, 0);
color: #008000; /* 헥스코드 */