개요
아래 내용은 style 속성을 이용한 간단한 인라인 스타일링을 먼저 정리한 뒤, 링크/이미지 삽입(a, img), 리스트(ul, ol), 테이블(table, caption, colgroup, thead, tbody)을 실습 코드로 한 흐름으로 정리한 글이다.
실습 1: 인라인 스타일링 (style 속성)
HTML 요소에 style 속성을 직접 주면 해당 요소에만 CSS가 적용된다. (학습/테스트에 빠르지만, 규모가 커지면 유지보수 때문에 보통은 별도 CSS로 분리한다.)
- 자주 쓰는 속성 예시
color: 글자색background-color: 배경색font-size: 글자 크기
예제에서는 span으로 특정 텍스트만 감싼 뒤 color, background-color, font-size를 바꿔서 “부분 스타일링”을 확인하고, 마지막에는 p에 여러 속성을 한 번에 적용해 복합 스타일링을 확인한다.
실습 2: 링크(a)와 이미지(img)
a 태그 (하이퍼링크)
<a> 태그는 href로 이동할 주소를 지정해 하이퍼링크를 만든다
target="_blank"를 주면 새 탭(또는 새 창)에서 링크가 열린다.
예제:
<a href="https://www.naver.com" target="_blank">네이버 웹사이트로 이동</a>img 태그 (이미지 삽입)
<img>는 문서에 이미지를 삽입하는 태그다.
src로 이미지 경로(상대/절대)를 지정하고, alt는 이미지 로드 실패 시 대체 텍스트이자 접근성 측면에서 중요한 설명 문자열이다.
예제에서는
images/bg.jpg같은 상대경로(프로젝트 내부 파일)https://images.unsplash.com/...같은 절대경로(외부 URL)
두 케이스를 동시에 보여준다.
또한 “이미지에 링크 걸기”는 a로 img를 감싸면 된다.
실습 3: 리스트(ul/ol)
리스트는 li 항목을 ul(순서 없음) 또는 ol(순서 있음)로 감싼다.
ul: unordered list, 보통 항목 나열용ol: ordered list, 단계/순서가 중요한 경우
예제에서는 list-style-type을 바꿔서 마커 스타일이 달라지는 것도 같이 확인한다.
실습 4: 테이블(table) 구성 태그 정리
테이블은 “전체(table) → 행(tr) → 셀(th/td)” 구조가 기본이고, 의미를 더 명확히 하려면 caption, colgroup, thead, tbody를 같이 쓴다.
caption: 테이블 제목(설명)을 붙이는 태그colgroup/col: 열 단위로 폭 등 스타일을 지정할 때 사용하며,colgroup은<caption>다음에 위치한다.thead: 헤더 영역(보통 컬럼명),<caption>/<colgroup>뒤에 오고<tbody>앞에 온다.tbody: 본문 데이터 영역th: 헤더 셀(기본적으로 굵게/가운데 정렬)td: 데이터 셀
예제 코드처럼 colgroup으로 각 열의 width를 먼저 잡아두면, “테이블이 깨지는 느낌”이 줄어든다.
