CSS<Cascading Style sheet>

 

문법

selector{ attr1:value; attr2:value ..}

 

스타일 시트 적용 방식

1. 인라인(태그에 직접) 방식

2. <style> 태그에 저굥

3. 외부 파일에 정의

 

우선순위

인라인 > 작성 순서에 따라서.

 

선택자 (selector)

1. 기본 선택자

 

* : 전체 선택자. * { 속성:값;...}

type : 태그 선택자. 태그명 {속성:값;...}

. : 클래스 선택자. . 클래스명 {속성 : 값;...}

# : 아이디 선택자. #아이디 {속성:값;...}

[속성] : 속성 선택자. [target] {속성:값;...}

 

 

기본 선택자 조합

 

태그 + 클래스 : 태그.클래스 {...}

태그 + 아이디 : 태그#아이디 {...}

여러 선택자 그룹화 : 선택자, 선택자, 선택자... {...}

 

 

 

2. 조합 선택기

1) 후손(Descendant) 선택기 : 공백

모든 후손 요소(태그)를 선택.

2) 자식(Child) 선택기 : >

직계 후손(자식) 요소를 선택.

3) 인접한 형제 선택기 : +

태그의 바로 다음 태그를 선택.

4) 일반 형제 선택기 : ~

같은 형제 태그 모두를 선택.

 

위의 사항은 margin, padding, border에 같이 적용.

수치 단위는 %, px

 

 

box-sizing

가로 세로의 기본값

가로 = 너비(width) + 패딩 + 테두리

세로 = 높이(height) + 패딩 + 테두리

패딩과 테두리 두께로 인하여 가로, 세로 길이가 더 크게 나오는 상황 발생하여

box-sizing으로 width와 height의 패딩과 테두리 두께를 합쳐서 계산.

 

 

 

overflow 속성

box의 크기보다 내용물이 더 많을(클) 경우 내용물을 어떻게 보이게 끔 하는지를 지정.

value

visible : 기본값. 그대로 다 보여짐. 내용물이 영역을 벗어남.

hidden : 영역을 벗어난 내용물을 보이지 않게 함.

scroll : 영역에 스크롤바를 출력.

auto : 내용물이 영역을 벗어날 때 스크롤바를 출력.

벗어나지 않으면 스크롤바 출력 안됨.

 

text-decoration 속성

글자에 들어간 꾸밈 효과와 관련된 속성

글자 자체에는 영향을 주지 않음.

밑줄, 윗줄 등과 관련된 속성.

 

value

inderline : 밑줄 출력.

overline : 윗줄 출력.

dotted : 밑줄 또는 윗줄을 점선으로 출력

wavy : 밑줄 또는 윗줄을 물결선으로 출력.

color : 밑줄 또는 윗줄의 색상을 지정

none : 밑줄 또는 윗줄을 제거.

 

 

border 속성

대부분의 요소에 테두리를 지정할 수 있음.

border-style : 선의 종류

- dotter : 점선

- dashed : 파선

- solid : 실선

- double : 이중선

- none : 없음. 선의 두께가 없음 (기본값)

- hidden : 테두리는 있으나 보이지 않게 함. 두께를 지정할 수 있음.

- inset : 음각 표현

- output : 양각 표현

 

border-width : 선의 두께. 4방향 따로 지정 가능.

border-color : 선의 색상. 4방향 따로 지정 가능.

border-radius : 둥근 테두리 작성. pixel 단위로 작성.

 

3. 의사(Pseudo) 클래스 선택자

특수한 상태에 따라 요소를 선택하는 방식.

 

link: 하이퍼 상태(링크가 걸려있는) 요소 선택.

visited : 링크가 이미 방문한 사이트인 요소 선택

hover : 마우스가 요소 위로 올라갔을 때.

active : 링크를 클릭했을 때.

 

 

 

 

 

 

 

 

저작자표시 (새창열림)

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

블록과 인라인  (0) 2022.08.29
멀티미디어 태그 (image, audio, video)  (0) 2022.08.29
<list> 태그 / <table> 태그  (0) 2022.08.29
수평선 <hr> / 링크걸기 <a> 태그  (0) 2022.08.29
HTML 태그와 텍스트 관련 태그  (0) 2022.08.29

 

블록 레벨 요소 (block level element)

: 항상 새 라인에서 시작하고 가로화면 전체를 차지.

 

주요 블록 요소

<div>, <article>, <h1> ~ <h6>, <p>, list 구조 요소 ,<table> 등

 

<div> element

HTML 문서에서 구분 또는 섹션을 정의

CSS로 스타일을 지정하거나 javascript로 특정 작업을 수행하기 위해

다른 요소의 컨테이너 역활을 담당.

페이지의 레이아웃을 지정하는 데 사용

 

 

인라인 요소(Inline element)

: 새 라인이 시작되지 않으며 라인 안에서 일정 범위를 차지.

 

주요 인라인 요소

<span>, <b>, <strong>, <i>, <em>, <mark> 등

 

<span> element

 

저작자표시 (새창열림)

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

CSS 기초 문법  (0) 2022.08.29
멀티미디어 태그 (image, audio, video)  (0) 2022.08.29
<list> 태그 / <table> 태그  (0) 2022.08.29
수평선 <hr> / 링크걸기 <a> 태그  (0) 2022.08.29
HTML 태그와 텍스트 관련 태그  (0) 2022.08.29

 

1. 이미지

<img> 태그로 본문에 이미지 삽입

파일 형식 : jpg, png, gif

 

주요 속성

 

src : 이미지 위치 정보 작성

alt : 이미지가 출력되지 않을 때 출력할 대체 문자열 지정.

title : 툴팁 출력

width,height : 가로, 세로 크기 지정

style : 이미지에 대한 스타일 시트 지정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지와 문자열</title>
<style type="text/css">
	p {
		border: 1px solid black;
		width: 80%;
		height: 100px;
		background-image: url('image/pic_trulli.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		color: white;
	}
	body {
		background-image: url('image/img_girl.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
</style>
</head>
<body>
<p><img src="image/smiley.gif" alt="스마일"
	style="float:right;width:42px;height:42px">
	이미지가 이 글의 오른쪽에 위치 합니다.
</p>
<p><img src="image/smiley.gif" alt="스마일"
	style="float:left;width:42px;height:42px">
	이미지가 이 글의 왼쪽에 위치 합니다.
</p>
</body>
</html>
 

2. 오디오

<audio> 태그로 본문에 오디오 삽입.

파일형식 : mp3, ogg, wav

 

주요속성

 

src : 사운드 파일 위치 작성

controls : 제어기 출력

loop : 반복 재생

autoplay : 페이지가 열리면 자동 재생 (크롬에서는 안됨.)

muted : 음소거 상태 시작

preload : 재생 여부와 상관 없이 미리 다운로드

 

<source> 태그로 여러 파일을 지정.

브라우저 별 실행 가능 파일이 다르기 때문에 여러개의 파일을 등록해서 가능한 파일이 실행되도록 처리.

작성한 순서대로 처리함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio page</title>
</head>
<body>
	<h3> 오디오 자동 재생</h3>
	<audio src = "audio/eagle.mp3" 
	             controls autoplay loop muted>
	</audio>
	
	<audio controls loop>
		<source src="audio/chicken.mp3" type="audio/mpeg">
		<source src="audio/chicken.ogg" type="audio/ogg">
		<source src="audio/chicken.wav" type="audio/wav">
		오디오 파일을 재생할 수 없습니다.
	</audio>
	
	
</body>
</html>
 

 

3. 비디오

<video> 태그를 사용하여 동영상 삽입.

파일 형식 : mp4, webm, ogg

 

주요 속성

 

src : 동영상 파일 위치 지정

controls : 제어기 출력

width, height : 가로, 세로 크기 지정

loop : 반복 재생

autoplay : 페이지 시작 시 자동 재생 (크롬에선 안됨.)

muted : 음소거

preload : 재생과 상관 없이 미리 다운로드 함.

poster : 재생 전에 표시될 이미지 지정.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오</title>
</head>
<body>
	<h3>비디오 재생</h3>
	<video src="video/mov_bbb.mp4" controls autoplay loop>
	</video>


	<iframe width="560" height="315" 
	 src="https://www.youtube.com/embed/3OGipn2RWkI" 
	 frameborder="0" allow="accelerometer; autoplay; encrypted-media;
	 gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
 

 

 

저작자표시 (새창열림)

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

CSS 기초 문법  (0) 2022.08.29
블록과 인라인  (0) 2022.08.29
<list> 태그 / <table> 태그  (0) 2022.08.29
수평선 <hr> / 링크걸기 <a> 태그  (0) 2022.08.29
HTML 태그와 텍스트 관련 태그  (0) 2022.08.29

 

목록(List)

브라우저 화면에 목록을 보여주기 위한 태그

목록 종류

1. 순서 목록 : 1, 2, 3, ....

2. 무순서 목록 : 순서가 없는 목록

3. 정의형 목록 : 각 항목을 정의하기 위한 목록

 

무순서 목록의 모양 변경 속성

style = "list-style-type : disk"

 

disk : 채워진 원

circle : 속이 빈 원

square : 채워진 사각형

none : 기호 없음.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 출력</title>
</head>
<body>
<!-- 무순서 목록 -->
<section>
	<article>
		<h2>무순서 목록</h2>
		<ul style = "list-style-type: square;">
			<li><a href="#">Coffee</a></li>
			<li>Tea
				<ul> 
					<li>Black Tea</li>
					<li>Grean Tea</li>
				</ul>
			</li>
			
		</ul>
	</article>
	<article>
		<h2>순서 목록</h2>
		<ol type = "A" start = "3">
			<li>Apple</li>
			<li>Banana</li>
			<li>Pineapple</li>
			<li>strawberry</li>
			<li>berry</li>
				<ol type="I">
					<li>strawberry</li>
					<li>blueberry</li>
				</ol>
		</ol>
	</article>
	
</section>
</body>
</html>
 

테이블(표)

<table>, <tr>, <td>, <th> 로 구성

 

tr : 한 행을 표현한다.

th, td : 한 칸을 표현한다

 

table 밑에 tr을 작성하고.

tr 밑에는 td 또는 th를 작성한다.

th는 컬럼이나 행의 제목을 작성하는데 사용(볼드체로 나옴).

td는 칸의 내용을 작성하는데 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 만들기</title>
<style type = "text/css">
	table, td, th{
		border: 1px solid black;
		border-collapse: collapse;
		text-align: center;
	}
	table {
		background-color:#f1f1c1;
	}
	th{
		background-color:#00aa0088;
	}
	tr:nth-child(even){
		background-color: pink;
	}
	tr:hover{ <!-- 마우스를 표에 대면 색상이 변경됨. -->
		background-color: blue;
		color: white;
	}
 </style>
</head>
<body>
<h2>기본 테이블 생성</h2>
	<table width = "400">
		<tr>
			<th>번호</th>
			<th>이름</th>
			<th>성정</th>
		</tr>
		<tr>
			<td>1</td>
			<td>홍길동</td>
			<td>90점</td>
		</tr>
		<tr>
			<td>2</td>
			<td>강동희</td>
			<td>0점</td>
		</tr>
		<tr>
			<td>3</td>
			<td>희동강</td>
			<td>1점</td>
		</tr>
	</table>
	
	<h3>가로 셀 병합</h3>
	<table>
		<tr>
			<th> 1열</th>
			<th colspan = "3">2열</th>
			<th> 5열</th>
		</tr>
		<tr>
			<td>2행 1열</td>
			<td>2행 2열</td>
			<td>2행 3열</td>	
			<td>2행 4열</td>	
			<td>2행 5열</td>
		</tr>
	</table>
	<p/>
	<h3>세로 셀 병합</h3>
	<table>
		<tr>
			<th>1행</th>
			<th>1행 2열</th>
			
		</tr>
		<tr>
			<th rowspan="2">2행</th>
			<td>2행 1열</td>
		</tr>
		<tr>
			<td>3행 2열</td>
		</tr>
	</table>
	
	
</body>
</html>
 

 

저작자표시 (새창열림)

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

블록과 인라인  (0) 2022.08.29
멀티미디어 태그 (image, audio, video)  (0) 2022.08.29
수평선 <hr> / 링크걸기 <a> 태그  (0) 2022.08.29
HTML 태그와 텍스트 관련 태그  (0) 2022.08.29
HTML 기본 구조  (0) 2022.08.29

 

hr 태그 <horizontal line (수평선)>

페이지에 수평선을 긋는다.

주요 속성

align : 정렬 방식(left, center, right)

noshade : 입체감 제거

size : 두께 지정.

width : 가로 길이(pixels or % 단위로)

 

 

 

 

링크(하이퍼링크) - anchor 태그 <a>

다른 페이지 또는 같은 페이지의 다른 영역으로 이동.

 

주요 속성

href : 이동할 페이지의 위치

target : 이동할 페이지가 보여질 대상 (브라우저 창)

 

_blank : 새로운 창에서 링크가 열림.

_self : 새 창이 열리지 않고 현재 페이지에서 링크로 이동

_parent : ?

_top : ?

 

 

페이지 내 이동(책갈피 기능)

: 같은 페이지에 특정 영역에 화면 이동 처리

href 속성에 "#이름" 을 지정하면 '이름'이 지정된 영역으로 이동.

'이름'의 지정은 name, id 속성을 사용.

'이름'을 지정하는 태그는 <a>, <p> 태그를 주로 사용.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
	<hr> 밑줄 쫙
	<hr> 밑줄 쫙
	<hr> 밑줄 쫙
	<hr> 밑줄 쫙
	<hr> 밑줄 쫙
	
	<a href="http://www.naver.com" target = "_blank">여기를 누르면 네이버로 이동</a>	
	<a href="http://www.daum.net" target = "_self">여기를 누르면 다음로 이동</a>
	<a href="http://www.nexon.com" target = "_parent">여기를 누르면 넥슨으로 이동</a>
	<a href="http://www.nate.com" target = "_top">여기를 누르면 네이트로 이동</a>
</body>
</html>
 

 

 

저작자표시 (새창열림)

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

블록과 인라인  (0) 2022.08.29
멀티미디어 태그 (image, audio, video)  (0) 2022.08.29
<list> 태그 / <table> 태그  (0) 2022.08.29
HTML 태그와 텍스트 관련 태그  (0) 2022.08.29
HTML 기본 구조  (0) 2022.08.29

 

태그란 < 로 시작하여 > 로 끝나는 영역을 말한다.

종류로는 미리 정의된 태그와 사용자 정의 태그가 있다.

미리 정의된 태그는 HTML시스템에서 정해져 있는 것을 말하며 사용자 정의 태그는 추후에 다룰 CSS 또는

자바 스크립트를 적용해야 한다. 따라서 HTML에서는 주로 미리 정의된 태그를 다룰 예정이다.

 

태그의 속성

HTML 요소(element)에 추가 정보를 제공.

예) a(anchor) 태그의 경우 href 속성으로 이동할 페이지의 주소를 지정하거나,

target 속성으로 새창에 출력할 지 등의 추가 작업을 지시한 수 있음.

 

주요 공통 속성

class : 태그에 클래스 이름을 부여. (자바의 클래스와는 전혀 다름.)

태그들의 분류와 그룹화를 목적으로 함.

 

id : 태그에 고유한 이름을 부여. 중복하지 말것! (문법적으로 중복되지 않게 막지는 않음)

* class와 id는 스타일시트와 자바스크립트를 적용하기 위한 식별자로 사용함.

hidden : 브라우저에 출력되지 않음.

style : 각 태그별 스타일시트를 작성.

title : 각 요서에 툴팁(풍선도움말) 설정.

 

텍스트 관련 태그

 

1. 강조 관련 태그

<B> : 볼드체(굵은 글씨)

<strong> : 볼드체(굵은 글씨). 스크린 리더에서 표현,

<i> : 이탤릭체

<em> : 이탤릭체 : 이탤릭체 스크린 리더에서 표현

2. 밑줄 태그 <ins>

3. 삭제할 줄임을 나타내는 태그<del>

4. <sub> : 아래첨자, <sup> : 윗첨자

5. 하이라이트 표시 <mark>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>&It;텍스트 관련 태그&gt;</h1>
<p>이 문자에서 이 <b>글자</b>가 중요합니다.
<p>이 문자에서 이 <strong>글자 </strong>가 중요합니다.
<p>이 문자에서 이 <i>글자 </i>가 중요합니다.
<p>이 문자에서 이 <em>글자 </em>가 중요합니다.
<p>이 문자에서 이 <ins>글자 </ins>가 중요합니다.
<p>이 문자에서 이 <del>글자 </del>가 중요합니다.
<p>이 문자에서 이 <sub>글자 </sub>가 중요합니다.
<p>이 문자에서 이 <sup>글자 </sup>가 중요합니다.
<p>이 문자에서 이 <mark>글자 </mark>가 중요합니다.
</body>
</html>
 

 

저작자표시 (새창열림)

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

블록과 인라인  (0) 2022.08.29
멀티미디어 태그 (image, audio, video)  (0) 2022.08.29
<list> 태그 / <table> 태그  (0) 2022.08.29
수평선 <hr> / 링크걸기 <a> 태그  (0) 2022.08.29
HTML 기본 구조  (0) 2022.08.29

+ Recent posts

티스토리툴바