포스코DX X 비트교육센터 6기 - FRONT

DOM

HTML, CSS, JavaScript

실습

element

<h1> welcome </h1>

javascript는 앨리먼트를 조작하는 것이다.
block level element : 박스모양
lnline level element

<html>

<head>
	<title>Lounge</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
		p {
		border:1px solid blue;
		}
	</style>

</head>

<body>
	<h1>안녕하세요.</h1>
	<h2>안녕하세요.</h2>
	<h3>안녕하세요.</h3>
	<h4>안녕하세요.</h4>
	<h5>안녕하세요.</h5>
	<h6>안녕하세요.</h6>
	<p>
		문장인데... <em>강조할 키워드</em>도 있을 것<br>
		<strong>더 강조해야 할 키워드</strong>도 있을 겁니다.
	</p>
	<address>
		이름: <a href="mailto:sonrisa-bonita@naver.com">한예원</a>
		주소: 경기도 용인시
		전화: <a href="tel:012-3456-7890">012-3456-7890</a>a>
	</address>
	<pre>
		public class Person{
			private String name;
		}
	</pre>
</body>

</html>

<html>

<head>
	<title>Lounge</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
		p {
		border:1px solid blue;
		}
	</style>

</head>

<body>
	<p>문단1</p>
	<p>문단2</p>
	<p>문단3</p>
	
	<em>강조1</em>
	<em>강조2</em>
	<em>강조3</em>
	<em>강조4</em>
	
	<pre>눈에 보이는 대로
		
		
		 나온다.</pre>
</body>

</html>

<!DOCTYPE HTML>

선언해주면, 어떤 종류의 html을 사용할지 웹브라우저에게 알려줄 목적으로 사용한다.

문서 유효성 검증

ex. img 에 alt=”” 넣어주기 꼭. ( 이유는 접근성입니다. 시각장애인용 스크린 리더기는 차치하고서라도, 이미지를 못 불러왔을 때 사용자 입장에서 이것이 이미지 불러오기에)

CSS

Cascading Style Sheet : 계단식 스타일 시트라는 의미로 스타일 적용에 우선순위가 있다는 것이다.

인라인 방식

<h1 style="font-size:12px">Windows 7과 Mac OSX 비교</h1>

임베디드 방식

외부 css 파일을 만들 경우

link 방식

import 방식