web publishing_CSS_Basic 01

장봄·2020년 1월 5일
CSSWeb Publishing
0

web publishing_CSS_Basic

목록 보기
1/3

1. html문서에 css적용하기, css 연결하기

  1. CSS의 사용 형식
  • CSS는 기본적으로 선택자, 속성, 값을 가진다.
    형식) 선택자 {속성 : 값 ; }
  1. HTML문서에 스타일시트 삽입하기
  • head태그안에 style을 이용해서 h1의 텍스트 색상과 배경색 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css basic</title>
	<style>
	h1 {
		color: blue;
		background-color: lime;
	}
	</style>
</head>

<body>
<h1>css basic</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam earum, ducimus dignissimos laudantium magnam consequuntur fugit corporis ex, neque, tempora, est. Earum reprehenderit, ea est amet libero id dolores dolorum dolor quas neque nam soluta aut at aspernatur velit placeat corporis eos culpa. Error dolorem quisquam qui illo illum iste ducimus neque aut voluptatibus modi vero, voluptates odio sunt, eveniet laborum ipsum vel laboriosam. Quisquam magni nemo architecto animi fugiat soluta mollitia modi tempore, voluptas id possimus excepturi, fuga perspiciatis ipsam commodi sunt consectetur deserunt officia eius quos. Placeat officiis ratione velit voluptates est cum similique odit! Recusandae, deserunt, rerum.</p>
	
</body>
</html>

위 코딩이 적용된 웹화면

  1. 태그에 직접 삽입하기(e-mail의 전송시 body만 전송되는 등의 특별한 경우에 이용됨)
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css basic</title>
</head>

<body>
<h1 style="border-bottom: 5px solid red">css basic</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam earum, ducimus dignissimos laudantium magnam consequuntur fugit corporis ex, neque, tempora, est. Earum reprehenderit, ea est amet libero id dolores dolorum dolor quas neque nam soluta aut at aspernatur velit placeat corporis eos culpa. Error dolorem quisquam qui illo illum iste ducimus neque aut voluptatibus modi vero, voluptates odio sunt, eveniet laborum ipsum vel laboriosam. Quisquam magni nemo architecto animi fugiat soluta mollitia modi tempore, voluptas id possimus excepturi, fuga perspiciatis ipsam commodi sunt consectetur deserunt officia eius quos. Placeat officiis ratione velit voluptates est cum similique odit! Recusandae, deserunt, rerum.</p>
	
</body>
</html>

위 코딩이 적용된 웹화면

  1. head요소 안에 link 요소를 사용하여 외부스타일시트를 참조한다.(안전하고 일반적인 방법)
  • hmtl폴더안에 css폴더를 만들어 파일명.css를 만들어 아래 코딩을 넣고 저장.
@charset "utf-8";

p{
	background-color: lightblue;
}
  • html에 link선택자를 삽입.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css basic</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<h1>css basic</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam earum, ducimus dignissimos laudantium magnam consequuntur fugit corporis ex, neque, tempora, est. Earum reprehenderit, ea est amet libero id dolores dolorum dolor quas neque nam soluta aut at aspernatur velit placeat corporis eos culpa. Error dolorem quisquam qui illo illum iste ducimus neque aut voluptatibus modi vero, voluptates odio sunt, eveniet laborum ipsum vel laboriosam. Quisquam magni nemo architecto animi fugiat soluta mollitia modi tempore, voluptas id possimus excepturi, fuga perspiciatis ipsam commodi sunt consectetur deserunt officia eius quos. Placeat officiis ratione velit voluptates est cum similique odit! Recusandae, deserunt, rerum.</p>
	
</body>
</html>

위 코딩이 적용된 웹화면

  1. head안에 @import 외부 스타일시트를 참조한다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css basic</title>
	<style>
    @import url(css/style.css);
	h1 {
		color: blue;
		background-color: lime;
	}
	</style>
</head>

<body>
<h1>css basic</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam earum, ducimus dignissimos laudantium magnam consequuntur fugit corporis ex, neque, tempora, est. Earum reprehenderit, ea est amet libero id dolores dolorum dolor quas neque nam soluta aut at aspernatur velit placeat corporis eos culpa. Error dolorem quisquam qui illo illum iste ducimus neque aut voluptatibus modi vero, voluptates odio sunt, eveniet laborum ipsum vel laboriosam. Quisquam magni nemo architecto animi fugiat soluta mollitia modi tempore, voluptas id possimus excepturi, fuga perspiciatis ipsam commodi sunt consectetur deserunt officia eius quos. Placeat officiis ratione velit voluptates est cum similique odit! Recusandae, deserunt, rerum.</p>
	
</body>
</html>

위 코딩이 적용된 웹화면

2. css값 중 색상 값 알아보기

  • 색상을 뚜렷하게 보기위해 배경그림을 삽입.

  • 아래 값은 동일한 빨간색을 나타낸다.

  • a는 투명도.

<head>
	<meta charset="UTF-8">
	<title>css basic2</title>
	<style>
		body{
			background: url(fabric-4734751_640.jpg);
		}
		h1{
			/*color: #ff0000;*/
			/*color: #f00;*/
			/*color: rgb(255,0,0);*/
			/*color: rgb(100%,0%,0%);*/
			/*color: hsl(0,100%,50%);*/
			/*color: rgba(255,0,0,.4);*/
			color: hsla(0,100%,50%,.4);
			font-size: 10em;
		}
	</style>
</head>

위 코딩이 적용된 웹화면

3. css값 중 길이의 단위 알아보기

  • em : 폰트의 높이를 1로 하는 단위

  • px : 1픽셀을 1로하는 단위

  • % : 기준이 되는 크기에 대한 비율

  • rem : 루트인 html 의 값을 기준으로 계산

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css basic2</title>
	<style>
		body{
			background: url(fabric-4734751_640.jpg);
		}
		p{
			background-color: yellow;
			/*width: 500px;*/
			/*width: 50em;*/
			/*width: 50%;*/
			width: 50rem;
		}
	</style>
</head>

4. css 선택자

  1. css 선택자

  • .class

  • #id

  • element,element : ,는 '그리고'를 의미한다.

  • element element : 띄어쓰기는 자손 선택자라고 한다.

<style>
#header p{	border : 3px solid black; }
</style>
...
<div id="header">
	<h1>css selectoer</h1>
	<p>Lorem ipsum dolor sit amet.</p>
</div>

위 코딩이 적용된 웹화면

  • element>element : 자식 선택자. 띄어쓰기랑 차이점은 바로 아랫 자손선택자만 적용된다.
<style>
#header > h1 > em { background-color: orange; }
</style>
...
<div id="header">
	<h1>css <em>selectoer</em></h1>
	<p>Lorem ipsum dolor sit amet.</p>
</div>

위 코딩이 적용된 웹화면

  • element+element : 인접형제 선택자. 
<style>
.list li + li { background-color: lightblue; }
</style>
...
<ol class="list">
		<li>Lorem ipsum dolor sit amet.</li>
		<li>Lorem ipsum dolor sit amet.</li>
		<li>Lorem ipsum dolor sit amet.</li>
		<li>Lorem ipsum dolor sit amet.</li>
		<li>Lorem ipsum dolor sit amet.</li>
</ol>

위 코딩이 적용된 웹화면

  • [attribute] : 속성선택자.
<style>
a[title]{background-color: purple; color: white;}
</style>
...
<li><a href="http://daum.net/">daum</a></li>
<li><a href="http://naver.dom">naver</a></li>
<li><a href="mailto:help@host.co.kr" title="help mail">help</a></li>
<li>Lorem ipsum dolor sit amet.</li>

위 코딩이 적용된 웹화면

  • [attribute^=value] : 속성값 시작이 같은 것만 찾는다.
<style>
a[href^='http://']{background-color: black; color: yellow;}
</style>
...
<li><a href="http://daum.net/">daum</a></li>
<li><a href="http://naver.dom">naver</a></li>
<li><a href="mailto:help@host.co.kr" title="help mail">help</a></li>
<li>Lorem ipsum dolor sit amet.</li>

위 코딩이 적용된 웹화면

  • [attribute $ = value] : 속성값 끝이 같은 것만 찾는다.
  • [attribute ~ = value] : 속성값 중 일부단어가 들어간 것을 찾는다. 완전한 단어를 적어야 한다.
  • [attribute * = value] : 속성값 중 일부 텍스트가 들어간 것을 찾는다.
<style>
li[title *= 'sam']{background-color: pink;}
</style>
...
<ul>
	<li>Lorem ipsum dolor sit amet.</li>
	<li title="some text sample">Lorem ipsum dolor sit amet.</li>
	<li>Lorem ipsum dolor sit amet.</li>
</ul>

위 코딩이 적용된 웹화면

  • :first-line : 웹화면의 첫 라인.
<style>
	.lead:first-line{background-color: lime;}
</style>
...
<p class="lead"><a href="http://naver.com">naver로 바로가기</a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aperiam numquam, porro nisi veritatis. Laudantium officiis perferendis, vel dolorum nam itaque, dignissimos vitae ullam aliquam omnis quas facilis, <a href="#">voluptates adipisci quisquam, facere.</a></p>

위 코딩이 적용된 웹화면

  • :first-letter : 첫 텍스트.
<style>
	.lead:first-letter{font-size: 5em;}
</style>
...
<p class="lead"><a href="http://naver.com">naver로 바로가기</a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aperiam numquam, porro nisi veritatis. Laudantium officiis perferendis, vel dolorum nam itaque, dignissimos vitae ullam aliquam omnis quas facilis, <a href="#">voluptates adipisci quisquam, facere.</a></p>

위 코딩이 적용된 웹화면

  • :before : 앞.
<style>
	h1:before {content: 'before area '; color: blue;}
</style>
...
<h1>css selector</h1>

위 코딩이 적용된 웹화면

  • :after : 뒤.
<style>	
	h1:after {content: ' after area'; color: red;}
</style>
...
<h1>css selector</h1>

위 코딩이 적용된 웹화면

출처 : https://cafe.naver.com/wepub

5. 링크 STYLE

1. a의 style삽입(순서중요)

	<style>
		a:link {color: green; text-decoration: underline;}
		a:visited {color: gray; text-decoration: underline; }
		a:hover {color: red; text-decoration: underline;}
		a:active{color: orange; text-decoration: underline;}
		a:focus {background-color: pink;}
	</style>
  • a:link : 링크가 걸려있는 상태.
	<style>
		a:link {color: green; text-decoration: underline;}		
	</style>

위 코딩이 적용된 웹화면

  • a:visited : 방문한 흔적이 있을때.
	<style>		
		a:visited {color: gray; text-decoration: underline; }		
	</style>

위 코딩이 적용된 웹화면

  • a:hover : 링크에 마우스를 올렸을때.
	<style>		
		a:hover {color: red; text-decoration: underline;}		
	</style>

위 코딩이 적용된 웹화면

  • a:active : 마우스로 클릭했을때.
	<style>
		a:active{color: orange; text-decoration: underline;}
	</style>

위 코딩이 적용된 웹화면

  • a:focus : tab키로 링크를 지정했을때.
	<style>
		a:focus {background-color: pink;}
	</style>

위 코딩이 적용된 웹화면

6. 선택자의 우선순위

<점수가 높을수록 우선순위이다>

  • *{} 전체선택자 : 0 점

  • body{} 태그선택자 : 1 점

  • .class{} 클래스선택자 : 10 점

  • a:link{} 가상클래스선택자 : 10 점

  • #id{} 아이디선택자 : 100 점

  • 인라인 방식의 스타일

    인라인방식의 스타일 : 1000 점

  • !important : 값을 쓸 때 !important 를 마지막에 입력하면 최상위에 적용.

<style>
p {color:red !important}
</style>
profile
장봄
즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>
다음 포스트

web publishing_CSS_Basic 02

0개의 댓글