티스토리 뷰

Web/CSS

css 초기 셋팅(초기화)

HAN_PY 2022. 1. 5. 11:31
반응형

초기화 하는 방법은 다양하다. 자주 쓰이는 것들 위주로 알아보자.

 

# 구성
index.html
css/style.css

 

 

html에 css 연결

<!DOCTYPE html>
<html lang="ko">
<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>css 연결!</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

</body>
</html>
  • head의 title 밑에 link 태그를 넣어준다
  • link 태그의 href는 css 파일의 경로를 넣어준다.
  • <link rel="stylesheet" href="css/style.css"> : html과 css 연결
  • 경로가 ./css/styles.css 이다.

 

css 초기 설정

@charset "UTF-8";

* {
    margin: 0px;
    padding: 0px;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none
}
  • @charset "UTF-8" : UTF 설정해야 한글이 꺠지지 않게 인코딩 방식으로 utf-8로 설정한다.
  • 구문 끝에는 ;(세미클론)을 붙여준다.
  • * : 모든 것들을 선택이라는 뜻이다. 밖 여백과 안쪽 여백이 브라우저 마다 다르고 조금씩 존재한다.
  • ul, li : 앞쪽에 동그라미를 지운다. (일반 글자처럼 보인다.)
  • a 태그 : 밑줄을 없앤다. (일반 글자처럼 보인다.)

 

반응형

'Web > CSS' 카테고리의 다른 글

CSS layout(구조, 배치) flex 기초 정리  (0) 2022.02.12
CSS layout(구조, 배치) Grid 기초 정리  (0) 2022.02.09
CSS 글자 폰트(font) 스타일 기초 정리  (0) 2022.01.31
css 선택자 기초 정리  (0) 2022.01.25
CSS 기초 정리  (0) 2020.12.28
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
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 31
글 보관함