Home
Top

005 CSS 공부(1)

Daily Study/Web Dev

2021. 1. 11.

반응형

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css basic</title>
	<style>
	/*<!-- 태그나 클래스(선택자)를 적고 중괄호{} 안에 속성:값; 형태로 작성-->*/

	/* css에서 주석처리 */

	/*css 파일 연결은 @import url(경로); 나
	@import "경로";
	<link rel="stylesheet" href="경로" 다 사용가능
	@import는 스타일 안에서 로딩*/

	/*@import url(css/style.css);*/
	/*@import "css/style.css";*/

	h1	{
			color:#FFB69f;
			background: lime;
	}
	
	</style>
	<!-- 보통 html에서 css를 가져올땐 link로 -->
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- 시작 태그 -->
<h1 style="border-bottom: 5px solid blue">css basic</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse expedita accusantium incidunt, blanditiis officiis consequuntur a ducimus tempore inventore itaque neque soluta, laudantium tenetur minima perspiciatis quae eveniet. Velit, perferendis! Totam, culpa impedit temporibus, natus officiis itaque! Cupiditate rem voluptate in mollitia tempora vero, labore laboriosam. Culpa libero quis ipsum, iusto ducimus quibusdam rerum assumenda doloribus nemo dolore aliquid! Dolores blanditiis suscipit, similique quibusdam sequi fuga optio impedit expedita ducimus necessitatibus rem, deserunt doloremque est corrupti. Quis fuga harum cupiditate tempore autem quas ullam asperiores velit eveniet ipsam explicabo a eum quo sunt quae voluptates, doloremque itaque unde sed. Ea.</p>
	
</body>
</html>
@charset "utf-8";
/*마지막에 세미콜론 ; 꼭 붙여주기*/
p {
	background-color: lightblue;
}

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css basic</title>
	<style>
	html {
			font-size: 20px;
	}
	body {
		background: url(img/bbssvv.jpg);
	}
	h1	{
		/*color: red;*/
		color: #ff0000;
		/*가장 일반적*/

		/*색상코드 사용할때 ff0000 처럼 둘둘씩 묶이면 세 자리만 적어도 됨*/
		/*color: #f00;*/
		/*color: rgh(255,0,0);*/
		/*color: rgb(100%,0%,0%);*/
		/*color: hsl(0,100%,50%);*/
		/*color: rgba(255,0,0,.4);*/
		/*a값 1.0이 불투명도 100% .6이면 60%*/
		/*color: hsla(0,100%,50%,.4);*/

		/*위 색상표현 투명도 제외하고 다 동일함*/

		font-size: 10em;
		/*기본 폰트 사이즈가 1em*/
	}
	p {
		/*width:500px;*/
		/*width: 50em;*/
		/*글자 크기 font-size 값을 1em으로 그 기준으로 */
		/*width: 50%;*/
		/*브라우저의 폭 기준, 창을 조절하면 p 폭도 변화*/
		width: 50rem;
		/*html 스타일 태그의 글자 크기를 1em으로 계산됨*/
		background-color: lime;
		font-size: 24px;
	}
	</style>
</head>
<body>

<h1>css basic</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium sequi, soluta. Odio modi iste dolores reprehenderit accusantium, nulla dolor temporibus nemo qui quia, eos beatae a aliquid consequatur quibusdam soluta.</p>
	
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css selector</title>
	<style>
		body {font-size: 12px;}
		h1,p {text-decoration:underline;}
		/*쉼표로 연결하면 여러 개에 스타일을 동시에 걸 수 있음*/
		p.lead {color: green;}
		/*클래스 값이 lead인 p태그의 글씨색을 그린으로*/
		#lead {background-color: lime;}
		/*id 값이 lead인 태그의 배경색을 라임으로*/
		#header p {border: 3px solid black;}
		/*띄어쓰기는 그 안에 있는것만 스타일 적용, id가 header 안에 있는 p에 적용*/
		#header em {background-color: orange;}
		#header h1 + p {background-color: yellow;}
		/*+는 인접형제선택자 a + b 이면 a 바로 다음의 b에 스타일 적용*/
		.list li + li {background-color: lightblue;}
		a[title] {background-color: purple;
			color: white;}
		a[href = 'http://daum.net/'] {background-color:black;
				color:yellow;}
		/*a[속성 = '값'] 속성이 특정값인 태그들만 스타일 적용*/
		a[href ^= 'http://'] {background-color:black;
				color:yellow;}
		/*a[속성 ^= '값'] 속성이 특정값으로 시작하는 링크 태그들만 스타일 적용*/
		a[href $= '.pdf'] {background-color: yellow;}
		/*a[속성 $= '값'] 속성이 특정값으로 끝나는 링크 태그들만 스타일 적용*/
		li[title ~= 'sample'] {background-color: lime;}
		/*[속성 ~= '값'] 속성이 특정값 단어 전체를 포함하고 있으면 스타일 적용*/
		/*[속성 *= '값'] 속성이 특정값을 단어 일부분에만 포함하고 있어도 스타일 적용*/

	</style>
</head>
<body>
	<div id="wrap">
		<div id="header">
			<h1>css <em>selector</em></h1>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, cumque.</p>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, cumque.</p>
		</div>

		<div id="content">
			<!-- 클래스 선택자를 추가하고 스타일에 p.클래스이름 으로 스타일 속성을 주면 해당 선택자가 있는 태그만 적용됨 -->
			<p id="lead">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Quisquam, natus.</p>
			<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet totam, neque ad consequuntur asperiores excepturi sed quos distinctio voluptate quo quod, aliquid, sequi, id! Autem laudantium doloremque quia, ducimus voluptas?</p>
			<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe esse ipsam harum cupiditate eum minima, dolore, in quidem et animi assumenda incidunt impedit earum quia vero numquam rem autem eveniet?</p>

			<ol class="list">
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing, elit.</li>
			</ol>
			<ul>
				<li><a href="http://daum.net/">daum</a></li>
				<li><a href="http://naver.com/">naver</a></li>
				<li><a href="mailto:help@host.co.kr" title="help mail">help</a></li>
				<li><a href="file/download.pdf">download</a></li>
				<li title="some text sample">Lorem ipsum dolor sit, amet consectetur.</li>
				<li>Lorem ipsum dolor sit amet consectetur.</li>
				<li>Lorem ipsum dolor sit amet consectetur.</li>
			</ul>
			<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui, officia nemo quos nulla, ab dolor reprehenderit, enim, vel saepe explicabo dicta suscipit fugiat cupiditate laborum magni pariatur alias consectetur rerum.</p>
		</div>
	</div>
	
</body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css selector2</title>
	<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;}
	/*클릭했을 때 어떻게 바뀌는지*/
	/*link, visited, hover, active 순서 지켜주는 것이 좋음*/
	a:focus{background-color: red;}
	/*focus : 탭키 눌러서 커서가 잡혔을때 어떻게 보여지는지*/
	.lead:first-line {background-color: lime;}
	/*클래스가 lead인 태그에서 첫 줄만 스타일 적용*/
	.lead:first-letter {font-size: 5em;}
	/*클래스가 1ead인 태그의 첫 글자만 스타일 적용*/
	h1:before{content: 'Before area';
			color: blue;}
	/*h1에 들어가는 컨텐츠 앞쪽*/
	h1:after{content: 'After area';
			color:red;}
	/*h1에 들어가는 컨텐츠 뒤쪽*/
	div {background-color: lime;}
	.sample {background-color:green;}
	#sample {background-color:purple;}
	/*타입과 클래스 중에 클래스가 우선 순위가 높음, 우선 순위가 같으면 나중에 쓴 것이 적용됨*/
	/*타입 < 클래스 < 아이디, 아이디가 최우선임*/
	/*태그 안에 아예 style 속성을 적는 인라인 스타일이 가장 최우선*/
	div {background-color: red !important}
	/*스타일 태그 {}안에 !important 넣어주면 무조건 최우선 적용*/
	</style>
</head>
<body>

	<h1>css selector</h1>
	<p class="lead"><a href="http://naver.com/">naver</a> amet consectetur, adipisicing elit. Aliquid alias aut laudantium explicabo, possimus neque quia, unde molestiae labore rerum a, sunt quis nesciunt asperiores nemo. Corrupti porro, eligendi, ab dolor cumque placeat! Laudantium, temporibus non quaerat ad illum quod doloremque, odio totam minus. <a href="#">Quaerat ratione vel itaque, molestiae iure.</a></p>

<hr>

<div class="sample" id="sample" style="background-color: orange;">
	<!-- style 속성 넣으면 가장 최우선 적용 -->
	Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus officiis dignissimos qui beatae quibusdam facilis, non nobis sed obcaecati quo molestias quae natus harum perferendis unde distinctio doloribus suscipit voluptates.
</div>	
</body>
</html>

완전 기본적인 CSS 내용들을 배웠다.

몰랐는데 티스토리 자체 기능에 포스트 안에 코드블럭을 넣을 수 있게 되어 있어서

앞으로 공부한 내용 올리기 더 편할 것 같다.

 

아직은 초등학교 저학년 때 한글 문서 꾸미는 수준으로 밖에 디자인이 안되지만...

곧 레이아웃 같은 것들도 좀 배우고 하면 그럴싸하게 나오지 않을까 싶기도 하다.

반응형

'Daily Study > Web Dev' 카테고리의 다른 글

007 CSS 공부 (3) 박스모델  (0) 2021.01.14
006 CSS 공부(2) 폰트 스타일  (0) 2021.01.14
004 HTML 공부(4)  (0) 2021.01.07
003 HTML 공부(3)  (0) 2021.01.06
002 HTML 요소 공부(2)  (0) 2021.01.05

티스토리툴바