-
[CSS] CSS 기본 문법웹 개발/HTML & CSS 2020. 6. 23. 01:08반응형
내가 보려고 정리하는 CSS 기본 문법
https://heropy.blog/ 를 참고했습니다.
선택자 (Selector)
css를 적용할 html의 특정 부분을 지정하는 사인(sign) 이다.
선택한 부분을 속성 (Properties)와 값(Value)로 설정할 수 있음 (속성 : 값)
예시1)
<div></div>로 정의해놓은 부분에 css 적용
div {
color : red;
font-size : 20px;
width : 300px;
height : 200px;
margin : 20px;
padding : 10px 20px;
position : absolute;
}예시2)
h1 부분과 p 부분에 각각 색상에 대한 css를 적용
<div> <h1>title</h1> <p>content</p> </div>h1 { color:red; } p { color:blue; }
CSS 선언 방식
html 태그에 직접 작성하기
단, 일일이 적용해야하기 때문에 매우 번거로움
<div style="color:red;"> div에 red 컬러를 적용한 글 </div>html에 포함하기
body의 모든 div에 head에서 설정한 css 적용
<head> <style> div{ color:red; } </style> </head> <body> <div>content1</div> <div>content2</div> <div>content3</div> </body>html 외부에서 불러오기
css 파일을 별도로 분리해서 필요한 html에 가져와 적용
<!-- HTML --> <head> <link rel="stylesheet" href = "/css/main.css"> </head> <body> <div> html 외부에서 불러오기 </div> </body>/*main.css*/ div{ color:red; }
html 태그에 직접 작성하기 
html에 포함하기 
html 외부에서 불러오기 (.html) 
html 외부에서 불러오기 (.css) 반응형'웹 개발 > HTML & CSS' 카테고리의 다른 글
[HTML/CSS] Tstory - story 페이지 클론 (0) 2021.04.11 [HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex) (0) 2021.04.08 [HTML/CSS] CSS 기본 레이아웃 요소 정리 (0) 2021.02.17 [CSS] CSS 속성 예시 (0) 2020.06.30 [HTML] HTML 기본 문법 (0) 2020.06.20