Sun의 정리정돈

[CSS] 개요, 선택자, 속성 본문

FrontEnd/HTML & CSS

[CSS] 개요, 선택자, 속성

Sunday31 2022. 11. 7. 13:34

CSS 스타일 적용방식

 

CSS 기본  
1. 인라인 방식 특징: 특정 태그에 지정할 때 사용, 우선순위가 높음
<h4 style="font-family:바탕체; background:yellow; color:red;">
  style="속성명:값; 속성명2:값2; 속성명3:값3;"
2. head태그 영역에 선언(임베디드 방식) 특징: 페이지 수가 많으면 copy도 많이 해야함
<head>
<style type="text/css">
h2 {font-family:고딕체;
color:red;
</style>
</head>
   
3. 외부에서 링크 걸기 방식 특징: 효율성이 좋아 가장 많이 사용
<link rel=stylesheet href="스타일 파일 외부경로와 파일명.css" type="text/css">
rel=stylesheet 스타일시트 파일임을 알림
type="text/css" 텍스트 형태의 css파일임을 알림
href="파일명.css"  

 

.class 선택자

div.a { /*.a라고 작성해도 상관없음*/
	color: brown;
	font-family:impact;
	font-weight:bold;
	}

<div class="a">div태그</div>
css 선택자 속성  
<div>  
<span>  
font-weight 폰트의 굵기
font-family 폰트 글꼴체
font-style 글꼴의 모양
font-size 폰트의 크기
text-decoration 글꼴 장식(underline, overline(글자위에), line-throught(글자 중간에 선 긋기))
text-align 수평정렬(left, center, right)
vertical-align 수직정렬(top, middle, bottom)
text-indent 들여쓰기 }

 

#id 선택자

id값은 원칙적으로 유일한 값이기 때문에 중복을 허용하지 않는다.

div#a={ /*#a라고 작성해도 상관없음*/
	color: brown;
	font-family:impact;
	font-weight:bold;
	}
        
<div id="a">div태그</div>

 

<div>, <span>태그 비교

  • div: 영역 묶기(block 요소)
    • 줄바꿈이 자동
    • 영역을 설정할 때 주로 사용(width, height 주로 사용)
    • 한 라인을 최대한 확대해서 사용(메인 페이지 작성 시에 사용)
  • span: 영역 묶기(inline 요소)
    • 줄바꿈이 일어나지 않음
    • width, height 를 잘 사용하지 않음(왜냐면 그 내용물에 맞추어 묶이기 때문)
    • 글자가 있는 부분까지만 최소한으로 축소해서 사용

display -> 화면에 보여주는 속성 -> block, inline, inline-block

div는 전체영역을 감쌀때
span는 짧은 영역을 감쌀 때

<style>
		div {
			background-color:green;
			width:200px;
			height:50px;
			display:inline;
			  }
		span {
			background-color:yellow;
			width:200px;
			height:50px;
			display:block;
			}
	</style>

 

CSS의 BOXMODEL

  • margin: 바깥 여백(border선 바깥쪽)
    • margin:10px; (하위속성에 적용되는 값이 같다면 속성값은 1개만 적음)
    • margin:10px 20px 30px 40px; /*속성은 시계방향(top>R>bottom>L)으로 적용*/
    • margin-top:10px; (상위속성-하위속성명: 속성값;)
    • margin-right:20px;
    • margin-bottom:30px;
    • margin-left:40px;
  • padding: 안쪽 여백(border선 안쪽)
    • 이하 margin과 하위 속성 같음
  • border
    • border-style:dotted; (선의 종류)solid 실선, double 이중선, dotted 점선
    • border-width:medium; (테두리의 크기를 설정)
    • border-color:red; (테두리의 색깔)
    • border:double medium red; (하위 속성을 띄어쓰기로 나열해도 됨)

 

semantic 예제 만들기

배경 속성

  • 1. background-color: #FFF배경색넘버
  • 2. background-url: url(경로포함해서 불러올 이미지의 파일명)
  • 3. background-repeat:
        no repeat, repeat-x(x좌표에서만 출력), repeat-y(y좌표에서만 출력), fixed(이미지 고정 유무)
  • 4. background-position: 이미지 위치(Left, Top, Bottom, Right)

 

css 속성 (문단, 문자열)

  1. letter-spacing: 글자와 글자 사이의 간격을 표시 
  2. .word-spacing: 단어와 단어 사이의 간격을 표시
  3. line-height: 줄 간격을 표시
  4. .text-indent: 들여쓰기
      가능한 한 class명,id명 은 속성명으로 사용하지 말 것

 

CSS속성(단위)

  • 절대단위: cm, mm, pt
  • 상대단위: px(모니터상의 점의 개수)(면적대비픽셀수=해상도), %(넓이), em
    • 기본적인 단위는 px를 사용한다. (글자를 기준) -> 1em=100%=16 px
  • 태그의 중첩: Element(태그) - Attribute(속성)
#test>p {      /*부모태그 > 자식태그(부모태그 밑에 자식태그가 존재한다면)*/
font-size:2em; /*=32px;*/
}

 

CSS의 position

  • position: 영역을 설정할 때 사용하는 속성
    • left,top: 위치 설정시
    • width, height: 크기 설정시
   
static (default) 작성 순으로 화면에 보이게 배치한다
absolute (절대경로) 기준점(left, top)을 가지고 배치한다.
(left,top,width,height을 사용해 이동 시킨다)
relative (상대경로) 상대적인 기준점을 가지고 배치한다.
실행결과가 static과 비슷하게 나온다
fixed 고정된 위치에서 움직이지 않는다.
스크롤해도 고정되어 있음

 

레이아웃 만들기

CSS 레이아웃 속성  
float:left; or right; <div> 태그를 float 속성을 사용해 <div> 텍스트를 부유시킴.
width, height 속성 등을 이용하여 레이아웃을 배치하는 방식으로 자주 사용됨
clear:both; float속성 뒤에 나오는 text영역은
 clear로 float속성을 지워주어야함

 

CSS3 추가 속성

1. 브라우저별 css스타일 적용 접두어

2. pre태그

3. border 테두리 깎기, 그림자요소(border-radius, box-shadow)

4. background-size: 넓이 높이

5. text-shadow:수평(x축), 수직(y축), 흐림정도, 그림자 색상

6. 움직이는 거리(왼쪽<--->오른쪽), 그림자 색상
animation-duration:작동시간(초);
animation-name:애니메이션 이름;
(@-webkit-keyframes 만들고자하는 애니메이션 이름{기능부여})

<style>
	/*
	움직이는 거리(왼쪽<--->오른쪽), 그림자 색상
	animation-duration:작동시간(초);
	animation-name:애니메이션 이름;
	(@-webkit-keyframes 만들고자하는 애니메이션 이름{기능부여})

	text-shadow:수평(글자와 그림자사이의 거리,x축), 수직(y축), 흐림정도, 그림자 색상
	*/
	h1 {
		text-shadow:4px 4px 10px #333333;
		-webkit-animation-duration:3s;
		-webkit-animation-name:slidein;
	}
	@-webkit-keyframes slidein{
		/*동작포인트 지정(오른쪽->왼쪽)*/
		from {
			margin-left:100%; /*= 오른쪽 끝*/
			width:100%; /*움직이는 전체거리(=브라우저의 넓이)*/
		}
		to {
			margin-left:0%;/*=도착하고나서 왼쪽테두리에 붙음*/
			width:100%;
		}
	}
  </style>

 

저작자표시 비영리 동일조건 (새창열림)

'FrontEnd > HTML & CSS' 카테고리의 다른 글

미니 프로젝트_사이트 만들기  (0) 2022.11.11
[HTML] HTML 속성 그 외  (0) 2022.11.04
[HTML] HTML의 기본 요소  (0) 2022.11.03
'FrontEnd/HTML & CSS' Related Articles more
Comments