HTML,CSS

# of Posts

1 more property

Gallery

[HTML, CSS]05 반응형 웹 CSS 작동 방식 @media은 조건문?

HTML, CSS 기초
•배운점:
•어려운 점:
CSS 활용
•배운점:
•어려운 점:

[HTML, CSS]04 HTML, CSS, 기초 원페이지 웹사이트 생성 배운점, 어려웠던점

[HTML, CSS]03 생각보다 쓸만한 CSS 응용편!

[HTML, CSS]02 Google Fonts 스타일 적용하기

1.메인 페이지의 코드를 간소화 시킴
2.협업 시 분리 작업 가능
3.프로젝트 관리 편리
head태그 내에서 링크태그를 통해 <style> 태그 내 꾸밈 코드들을 분리 할 수 있다.
index.html의 <head>에 추가된 내용
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href="style.css">
index.html의 style태그 코드는 모두 주석(삭제) 처리 했다.
<style>
/* style.css로 모듈화 시킴 */
</style>

[HTML, CSS]01 CSS 파일 모듈화(파일 분리)

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용
추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다.
head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.mytitle {
			color:red;
			font-size:40px;
			}
			.mybtn {
			font-size: 12px;
			background-color: green;
			color: white;
			}
			.mytxt {
			color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<h1 class="mytitle">로그인 페이지</h1>
			<p class="mytxt">ID : <input type="text"></p>
			<p class="mytxt">PASS : <input type="password"></p>
			<button class="mybtn">로그인 하기</button>
		</div>
	</body>
</html>

[HTML, CSS]00 기초적인 로그인 페이지 생성

[HTML, CSS]06 1주차 스터디(WIL)