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 응용편!

1. Google Fonts 페이지 방문
해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다.
Browse Fonts - Google Fonts
2. 원하는 폰트 선택
원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다.
3. 폰트 참조 링크 복사
세부정보 창에서 copy code 탭의 "@import"를 선택하면
HTML style탭에 입력 할 수 있는 폰트 코드 링크가 제공된다.

[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태그 코드는 모두 주석(삭제) 처리 했다.

[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 기초적인 로그인 페이지 생성

1주차 강의를 통해
HTML, CSS과 Bootstrap 활용을 빠르게 복습 할 수 있었다.
다시 천천히 코드를 작성하고 변화를 관찰하면서 코드 작성법을 익히고 있으며
관련 단축키들도 다시 익숙해지고 있다.
// HTML
html 주요 태그로는 !doctype 선언문과
html, head, body, div, h1-5, button, input, p, br, img src, label 등

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