(40) [HTML] 1일 HTML 레이아웃

CSS
스타일은 HTML 문서 내에 서처의 종류,크기,색,여백 등을 지정하여 사용자 환경에
상관없이 일정한 화면을 보여주는 기능

CSS 형식

css구문은 선택자와(selector)와 선언으로 구성되며, 선언은 석성과 값으로 구성된다. css의 기본 형식은 '선택자'

의 형식으로 표현되며 여러 속성을 사용할 경우 세미콜론(;)으로 구분한다. `대소문자를 구별하지 않는다.`

inline Style
embedded style sheet
linked style sheet
importe style sheet

<style> ~</style>

스타일 정보 태그로 HTML문서 내에 스타일 시트를 선언하는데 사용

<div>~</div>

블럭 태그. <div> 요소는 그 자체로 어떤 의미를 갖지는 않는다. 몇 가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용. <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
/*embedded style sheet*/

/*모든 선택자 */
*{
	font-family: 맑은 고딕, 돋움;
	font-size: 14px;
}

/*태그 선택자*/
div{color:blue;font-weight: bold;}

/*id 선택자*/
#java{background-color: yellow;}

/*클래스 선택자*/
.web{color:tomato;}
.web2{background: #ddd;}


</style>

</head>
<body>

<h3>간단한 css 예</h3>

<div>과목 - 프로그래밍</div>
<p id="java">자바</p>
<p style="font-size: 20px;">스프링</p>
<hr>

<div>과목 - 웹</div>
<p class = "web web2"> HTML </p>
<p class = "web"> CSS </p>
<p class = "web web2"> javascript </p>
<hr>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>div 태그</h3>

<pre>
	-대표적인 블록 태그
	-요소들을 묶어서 처리할 때 사용
</pre>
<hr>


<!-- 내용이 없는 경우 height 속성이 없으면 표시되지 않는다. -->
<div style="background: yellow;">예제-1</div>
<div style="background: red;"></div>
<div style="background: lighblue;">예제-2</div>
<div style="background: #eee; height: 50px"></div>
<hr>


<!-- 내용이 없는 경우 height 속성이 없으면 border은 top만 표시. -->
<div style="border: 1px solid #000;">예제-1</div>
<div style="border: 1px solid #f00;"></div>
<div style="border: 1px solid #00f; height: 50px"></div>
<div style="border: 1px solid #000;">예제-2</div>

<div contenteditable="true" 
style="width: 300px; height: 300px; border: 3px dotted #999;"></div>





</body>
</html>

padding

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>div 태그 : padding - 안쪽 여백</h3>
	
	<!-- 전체폭 : width + 왼쪽 border+오른쪽 border+왼쪽패딩+오른쪽패딩 -->>
	<div style="width: 300px; height: 50px;
	border: 3px solid black;">패딩없음</div>
	<div style="width: 300px; height: 50px;
	 border: 3px solid red; padding: 20px">모든안쪽여백20px</div>
	<div style="width: 300px; height: 50px; 
	border: 3px solid blue; padding: 10px 5px 11px 6px">위:10,오른쪽:5,아래:11,왼쪽:6</div>
	<div style="width: 300px; height: 50px; 
	border: 3px solid green; padding: 10px 15px 11px">위:10,왼/오른쪽:15,아래:11</div>
	<div style="width: 300px; height: 50px; 
	border: 3px solid gold; padding: 10px 15px">위/아래:10,왼/오른쪽:15</div>
	<div style="width: 300px;
	border: 3px solid black;text-align: center; padding: 20px 0;">패딩을 이용한 수직 가운데</div>
	
	
</body>
</html>

margin

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>div 태그 : margin - 바깥쪽 여백</h3>
	
	<div style="background: red; width: 300px; height: 50px"></div>
	<div style="background: green; width: 300px; height: 50px; margin: 30px"></div>
	<div style="background: blue; width: 300px; height: 50px"></div>
	<hr>
	
	<!-- 수평 가운데 -->
	<div style="background: yellow; width: 300px; height: 50px; margin: 10px auto;"></div>
	
</body>
</html>

<span>~</span>

텍스트 범위태그. 인라인 요소에 스타일을 그룹화하고 적용하는데 사용. spqn 태그는 인라인 레벨 태그로 줄 바꿈이 일어나지 않는다.

시맨틱

문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 시멘틱 요소, 검색 엔진 및 문서 해석기 등에서 웹 문서 판별이 정확하고 용이해진다.

<main>	해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성.문서 전반에 걸쳐 반복되는 내용을 포함해서는 안된다.
<section>	문서 내에서 같은 의미의 구역을 나눌때 사용
<article>	문서내의 독립적인 글, 본문 등을 구성하는 섹션. section과 유사.
<footer>	페이지 하단분의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부
<derails>	추가적인 설명 태그
<summary>	세부 요약 태그

'💻 > HTML' 카테고리의 다른 글

(42) [HTML] 3일 HTML 폼 태그 (0)	2024.04.16
(42) [HTML] 3일 HTML List, Links 태그 (0)	2024.04.15
(41) [HTML] 2일 HTML 테이블 레이아웃 (0)	2024.04.15
(41) [HTML] 2일 HTML 레이아웃 (1)	2024.04.12
(40) [HTML] 1일 HTML 기본 (0)	2024.04.11

Power Up!

(40) [HTML] 1일 HTML 레이아웃

CSS 형식

<style> ~</style>

<div>~</div>

padding

margin

<span>~</span>

시맨틱

'💻 > HTML' 카테고리의 다른 글

티스토리툴바

(40) [HTML] 1일 HTML 레이아웃

CSS 형식

<style> ~</style>

<div>~</div>

padding

margin

<span>~</span>

시맨틱

'💻 > HTML' 카테고리의 다른 글

관련글

티스토리툴바