티스토리 뷰

공부중/HTML ⅋ CSS

[HTML & CSS] 내 맘대로 기본 세팅

쏘악 2021. 5. 18. 17:00
아주 기본적으로 외워야 하는 기본 세팅
css, jqeury, js파일 연결
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!--	css  -->
	<link rel="stylesheet" href="/css/style.css">
<!--  font  -->
	<link rel="stylesheet" href="#">
<!--  jQeury-->
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script></script>
</head>
<body>
	<!--	HEADER  -->
	<header>
	</header>
	<!--	// HEADER  -->
	
	<!--	CONTENTS  -->
	<section>
	</section>
	<!--	// CONTENTS  -->
	
	<!--  FOOTER   -->
	<footer>
	</footer>
	<!--  // FOOTER   -->
	
	<!--	SCRIPT -->
	<script src="/js/script.js"></script>
</body>
</html>

어딜 가든 비슷한 HTML
jquery 링크는 헤드 안에, script 파일 링크는 본문 뒤 </body> 앞에. 나중에 내용이 길어지면 헷갈리기 때문에... 주석처리는 큰 틀부터 확실하게 해둔다.

@charset "UTF-8";

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

a, p, span, button {
  text-decoration: none;
  color: #616161;
}

li {
  list-style: none;
  cursor: pointer;
}

button {
  cursor: pointer;
  border: 0;
  background: transparent;
}

::selection {
  color: #666;
  background: #efefef;
}

 CSS는 @charset "utf-8"; 밑으론 취향껏 적으면 되지만 내가 웹사이트 만들어볼 때 한 번씩은 넣는 것들 써봄. cursor 속성도 없으면 매우 허전하다. 메뉴나 버튼에 마우스를 올려도 마우스가 기본 스타일에 놓여있으면 이게 누를 수 있는 버튼인지 아닌지 혼동될 수 있음.

 버튼에 border 값은 굳이 생각하고 있지 않았는데, 코딩하면서 일일이 버튼 태그에 border: none을 넣고 있는 나를 발견하고 그 뒤로 저렇게 넣어준다. 배경색도 디폴트는 투명으로 변경.

::selection은 텍스트에 마우스 드래그 시 스타일을 설정하는데 이것도 필수는 아니지만 이거 하나로도 홈페이지의 느낌이 확 달라진다. 초반에 사이트 밋밋할 때 조금이라도 예쁘라고 넣어보고 마지막에 뺀다. ㅎㅎ...

저작자표시

'공부중 > HTML ⅋ CSS' 카테고리의 다른 글

[HTML & CSS] on off switch(스위치) 만들기  (1) 2021.09.09
[HTML & CSS] 그라데이션 만들 때 참고하는 사이트 추천  (0) 2021.07.26
[HTML & CSS] input 태그 윤곽선... border-radius 안 먹힐 때  (1) 2021.07.22
[HTML & CSS] <div> 안에 <div> float로 정렬하기  (0) 2021.05.21
댓글
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
최근에 올라온 글
글 보관함
Total
Today
Yesterday
TAG more
내 햄수터