반응형
CSS 기본 구조
- css 는 기본적으로 head 태그 안에 <style> 태그를 생성에 그 안에서 실행
- <body> 태그에서 작성한 태그, id, name 등을 활용해 스타일 내용을 입력
- 주석 : /* 주석내용 */
<!DOC
<head>
<meta charset="utf-8">
<style>
p {
color:green;
}
</style>
</head>
<body>
<p> 안녕하세요 </p>
</body>
CSS 의 속성
글자 색상 : color
color:색상이름;- 색상 이름 ( red, green, pink 등) 을 입력해도 되고 색상 코드(#ffffff) 를 입력해도 됨
글자 크기 변경 : font-size
font-size:숫자px;- 기본 : 16px
글꼴 설정 : font-family
font-femily:'글꼴 이름';- 글꼴 이름은 ' ' (작은 따옴표) 안에 적으며, '돋움', '굴림', 맑은고딕', '바탕' 등 사용 가능한 글꼴 이름을 적용하면 됨.
글자 스타일 설정 : font-weight
font-weight:bold;- normal : 기본 글자 (<h1>, <h2> 태그처럼 기본 설정이 두꺼운 글씨를 기본 두께로 바꾸는데 사용)
- bold : 글자 볼드체 (두껍게)
- italic : 글자 이탤릭체 (기우러지게)
- underline : 글자에 밑줄
글자 정렬 : text-align
text-align:center;- left (왼쪽, 기본), center(가운데), right(오른쪽)
줄간격 설정 : line-height
line-height:150%- 기본 줄 간격 : 150%
- 줄간격을 늘리면 상하 줄 간격이 늘어남
글자 그림자 : text-shadow
text-shadow:숫자px 숫자px 숫자px 색상이름오른쪽부터 순서대로
- 오른쪽 그림자 길이 (값이 커질수록 글자와 그림자가 멀어진다.)
- 아래쪽 그림자 길이 (값이 커질수록 글자와 그림자가 멀어진다.)
- 흐린 정도 (값이 커질수록 그림자가 더 흐려진다.)
- 그림자 색상 (그림자의 색상만 적용)
으로 구성
링크 글자 : a 태그 활용
a:link { color:green; text-decoration: none;}
a:visited { color:green; text-decoration: none; }
a:hover { color:red; text-decoration: underline; }
a:active { color:gray; text-decoration: underline; }- a:link : 처음 초기 글자 상태
- a:visited : 한 번 클릭 후 글자 상태
- a:hover : 마우스를 글자 위에 올렸을 때의 상태
- a:active : 클릭 당시의 상태
text-decaration : 링크에 밑줄 여부 결정하는 속성
배경 색상 설정 : background-color
background-color:색상이름;
배경 이미지 : background-image
background-image:url("./img/img1.png");-> 기본적으로 배경이미지는 반복됨
배경이미지 반복 설정 속성 : background-repeat
background-repeat : no repeat;
background-positoiin: right top;- no repeat : 반복되지 않음
- repeat-x : 수평방향으로 반복
- repeat-y : 수직방향으로 반복
backgroud-position 속성 값
- left top
- center top
- right top
- left center
- center center
- right center
- left bottom
- center bottom
- right bottom
<il> 태그, list 관련 태그에 적용되는 css 속성
list-style-type:none; => 리스트 앞에 동그란 표시 없애는 코드
table 태그 꾸미는 css 속성
- boder-collapse: collapse; => 기본 이중선으로 나오는 테이블 구조를 단일 경계선으로 바꾸기
- table, th, td { border: solid 1px #cccccc; } => 테이블의 테두리, 행과 열의 경계선 설정
- table {border-top: solid 2px green; } => 테이블 상단에 색상이 있는 줄 표시로 하나의 테이블 시작 표시
- th { padding: 10px; background-color:#eeeeee; } => 테이블 컬럼명 (가장 윗줄)의 속성
- td { padding: 10px; text-align : center; } => 값들의 글자 모두 가운데 정렬
- width, height : 너비, 높이 설정
display 속성 : 글자의 자리를 부여
- inline : 기본 구조로, 개행(enter)<br>을 설정하지 않는다면 개행 없이 각 태그 요소드리 가로 방향으로 나열된다.
- block : 행 전체에 자리를 부여해서 글자가 행을 모두 사용하지 않아도 한 행을 해당 태그가 모두 차지한다.
- inline-block : inline, block 두 특징을 모두 가지고 있음. 앞뒤 글자들과 가로 정렬이 되지만, 해당 요소만 block 속성 저ㄱ용됨.
- none : 글자가 보이지 않음.
float 속성
: float는 공중에 뜨다 라는 뜻,
이 스타일을 적용한 요소를 공중에 띄우기 때문에 요소가 속한 상위 태그 밖에서 출력이된다.
(보통 아래에 배치된다.)
float:left;
float:right;- left : 왼쪽에 배치
- right : 오른쪽에 배치
clear 속성
: 위에서 사용한 float 속성을 무력화하는 속성
- 윗 요소에 float 속성이 적용된 상태에서 그 밑줄 요소에 clear 속성을 적용하면 float는 적용되지 않는다.
- float가 적용된 요소는 따로 빠져나와 맨 아래에 배치가 되지만, 다음 요소에서 clear를 사용하면 다시 원래대로 돌아와 순서대로 배치된다.
<style>
h2 { float: left; }
p { clear: both; }
</style>
</head>
<body>
<div>
<h2> 윗줄에 올 글 내용 </h2>
<p> 아랫줄에 올 글 내용 </p>
</div>
</body>- clear : left; 이전에 사용된 float:left 기능 해제
- clear : right; 이전에 사용된 float:right 기능 해제
- clear : both; 이전에 사용된 모든 float 기능 해제
레이아웃 태그
| <aside> : 사이드바 | <section> : 메인콘텐츠 |
| <footer> : 하단 푸터 | |
<nav> : 메뉴 태그
<article> : section 태그 안에 작은 콘텐츠
반응형
'STUDY > HTML' 카테고리의 다른 글
| [HTML/CSS] CSS 선택자 (0) | 2025.05.14 |
|---|---|
| [HTML/CSS] CSS 박스모델 (0) | 2025.05.14 |
| [HTML] <input> 입력, 선택, 버튼 (0) | 2025.04.30 |
| [HTML] 경로이동 <a> (0) | 2025.04.25 |
| [HTML] 리스트 태그 (목록 태그) <ul>, <ol>, <li>, <dl>, <dt>, <dd> (0) | 2025.04.25 |