CSS 기초 다지기

웹문서에서 스타일이란 html문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다.

선택자 {속성1: 속성값;}

p {
	text-align: center;
    color: blue;
   }

vs code에서 css 주석 처리하기

/* 주석 사용 */

전체 요소에 스타일을 적용하는 전체 선택자

* {속성: 값 }

특정 부분에 스타일 적용하는 클래스 선택자

.클래스명 {스타일 규칙}

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

#아이디명 {스타일 규칙}

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

선택자1, 선택자2 {스타일 규칙}

글꼴 관련 스타일

글꼴을 지정해주는 font-family 속성

body { 
		font-family: "맑은 고딕"
      }

글자 크기를 지정하는 font-size 속성

p  {
		font-size: 16px;
   }

이탈릭체로 글자를 표시하는 font-style 속성

font-style:  normal | italic | oblique

글자 굵기를 지정하는 font-weight 속성

font-weight: normal | bold | bolder | lighter

텍스트 관련 스타일

글자색을 지정하는 color 속성

p {
	color: red;
  }

텍스트를 정렬하는 text-align 속성

text-align: start | end | left | right | center | justify | match-parent

start : 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end : 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
left : 왼쪽에 맞추어 문단을 정렬
right : 오른쪽에 맞추어 문단을 정렬
center: 가운데에 맞추어 문단을 정렬
justify : 양쪽에 맞추어 문단을 정렬
match-parent : 부모 요소를 따라 문단을 정렬

줄 간격을 조절하는 line-height 속성

p { 
	font-size: 12px;
    line-height: 24px;
  }

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

<p style="text-decoration: none">none</p> // 텍스트에 줄을 표시하지 않음
<p style="text-decoration: underline">underline</p> // 밑줄 표시
<p style="text-decoration: overline">overline</p> // 윗줄 표시

텍스트에 그림자 효과를 추가하는 text-decoration 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

예: .shadow {
	 text-shadow: 5px 5px 3px 3px red
     }

텍스트의 대소 문자를 변환하는 text-transform 속성

none: 줄을 표시하지 않습니다
capitalize: 첫 번째 글자를 대문자로 변환합니다
uppercase: 모든 글자를 대문자로 변환합니다
lowercase: 모든 글자를 소문자로 변환합니다
full-width: 가능한 한 모든 글자를 전각 문자로 변환합니다

글자 간격을 조절하는 letter-spacing, word-spacing 속성

px, em 과 같은 단위로 크기값을 조절합니다

.spacing 1 {
	letter-spacing: 0.2em;
    }

목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type속성

.book1 {
	list-style-type: none /* 순서 없는 목록 */
    }

불릿 대신 이미지를 사용하는 list-style-image 속성

ul {
	list-style-image: url('images/dot.png'); /* 볼릿으로 사용할 이미지 */
   }

목록을 들여 쓰는 list-style-position 속성

.inside {
	list-style-position : inside /* 목록 들여 쓰기; */
    }

표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

table {
	caption-side: bottom; /* 표 캡션 위치 아래로

표에 테두리를 그려 주는 border 속성

td, th {
	border: 1px dotted black; /* 셀 테두리는 검은색 점선으로 */
    }

표와 셀 테두리를 합쳐 주는 border-collapse 속성

table {
	border-collapse: collapse /*표와 테두리를 한 줄로 표시 */

박스 모델

블록 레벨 요소와 인라인 레벨 요소

블록 레벨 요소를 만드는 대표적인 태그로 <h1> <div> <p> 등이 있습니다.
인라인 레벨 요소를 만드는 태그로는 <span> <img> <strong> 등이 있습니다.

콘텐츠 영역의 크기를 지정하는 width, height 속성

.box {
	width: 400px;
    height: 100px;
   	}

박스 모델에 그림자 효과를 주는 box-shadow 속상

box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상>

box {
	box-shadow: 5px 5px 15px 5px blue ;
    }

테두리 스타일을 지정하는 border-style 속성

solid: 테두리를 실선으로 표시합니다
dotted: 테두리를 점선으로 표시합니다
dashed: 테두리를 짧은 직선으로 표시합니다
double: 테두리를 이중선으로 표시합니다

테두리 두께를 지정하는 border-width 속성

border-width: thin | medium | thick 

테두리 색상을 지정하는 border-color 속성

#box1 {
	border-color: red: /* 전체 테두리 빨강 */
    }

둥근 테두리를 만드는 border-radius 속성

#round  {
	border-radius: 25px
    }
#round {
	border-radius: 50% /*이미지를 원형으로 표시하기 */
    }

원하는 꼭짓점만 둥글게 처리하기

#round1 {
	border: 2px solid blue;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

여백을 조절하는 속성

요소 주변의 여백을 설정하는 margin 속성

margin 속성에서도 속성값을 하나만 지정하거나 2개, 3개 또는 4개를 지정할 수 있다. 값이 1개 라면 마진값을 4개 방향 모두 똑같이 지정하지만, 값이 여러 개라면 top -> right -> bottom -> left순 (시계 방향)으로 적용된다.

#margin {
	margin: 50px; /* 상하좌우 4개 방향의 마진 모두 50px */ 
    }
#margin {
	margin: 30px 50px; /* 위아래 마진 30px, 좌우 마진 50px */
    }
#margin {
	margin: 30px 20px 50px; /* 위 마진 30px, 좌우 마진 20px, 아래 마진 50px */
    }
#margin {
	margin: 30px 50px 30px 50px /*위 아래 마진 30px, 좌우 마진50px */