-
[HTML/CSS] CSS 기초비전공자 공부일기/:: WEB & Front-End 2020. 6. 12. 15:03
HTML문서 내에서 CSS의 위치
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> 태그명 { 속성명: 속성값; 속성명: 속성값; ... } </style> </head> <body> </body> </html>일반적으로 CSS 속성영역은 <head>태그 안, <title>태그 아래에 쓴다.
<style></style>태그 안에 원하는 CSS 코드를 작성하면 된다.
태그명 {} 안에 들어갈 속성이 하나인 경우, 코드 뒤에 ; (세미콜론)을 붙이지 않는 것이 더 맞는 문법이다.
color: pink;
color: rgb(198, 231, 103);
color: #C6E767;
background-color:gray;
속성의 우선순위
서로 속성값이 중복으로 들어갈 경우, 우선순위대로 들어간다.
<style> (1) !important가 적용된 것 p { color: #FFFFFF !important; } (2) 가장 마지막에 적용된 것 (3) 와일드카드(*) 로 적용된 것 * { color: orange; } (4) id > class > class 정의된 순서대로 </style>여러가지 활용방법
ㅁ 주석처리 /* */
<style> /* CSS 안에서 주석처리는 이렇게 쓴다. */ </style>ㅁ 여러 가지 태그에 한꺼번에 속성부여 가능
<style> p, h3 { color: gray; } </style>ㅁ 클래스 속성 class="value" . * grouping이 목적
: 여러번 중복해 사용할 수 있으므로 무언가 표준안을 만들 때 id보다 더 많이 사용된다.
<style> .name1 { color: green; } .name2 { color: blue; } </style> <body> <p class="name"> 클래스 속성 사용예시 - 초록색으로 글자가 표시됨 </p> <p> 이 구역은 글자색이 초록색으로 적용되지 않는다.</p> <p class="name name2"> 두 가지 클래스 동시적용 가능 </p> </body>class 선택자는 한 문서 안에서 여러번 사용할 수 있다.
<div class ="abc"> <p clas="abc">
혹은 하나의 class에 여러 값을 넣을 수도 있다.<div class="abc xyz">ㅁ 아이디 속성 id = "value" # * 딱 한 개씩 존재
<style> #name { color: aqua; } </style> <body> <p id="name"> 아이디 속성 사용예시 </p> </body>div의 위치 속성 position
div는 position 속성으로 위치를 조절할 수 있다.
ㅁ position의 속성값
static -- (default) 다른 데이터들과 겹치지 않게 순차적으로 출력 > left: 50px과 같은 속성이 먹히지 않는다.
absolute -- 고정된 위치를 기준으로 (default: left top = (0,0))
relative -- 상대적인 위치를 기준 "원래 static이었을 때 있어야 할 위치가 기준!!!!"
fixed -- 열려있는 창을 기준. 기본적으로 absolute의 형태를 취하지만, 스크롤을 따라 위치가 따라오는 것을 볼 수 있다.
또한 요소의 위치가 창 영역을 벗어나 있으면 스크롤이 생기지 않고 요소가 보이지 않는다.(absolute는 스크롤이 생기며 위치를 확인할 수 있다)
ㅁ 기타 속성값
z-index -- 먼저 만들어진 요소부터 1, 2, 3, ... 순으로 숫자를 부여, z축으로 인덱스에 맞게 쌓아준다. 1이 가장 바닥, 큰 숫자일수록 위쪽으로 올라옴. (cf. 반드시 맨 위에 있어야 하는 요소인 경우, z-index:1000 과 같이 엄청 큰 수를 부여하면 간편하게 위로 올릴 수 있음.)
ㅁ 부모요소가 있을 때 위치값
만약 다른 부모요소 아래 속해있는 <div>에 위치속성이 먹여지는 경우, 전체 창의 위치가 아닌 '부모요소를 기준으로' 위치가 지정된다.
div 영역의 간격, 테두리
padding : div 내에서 요소와 테두리의 거리
margin : 요소와 요소의 거리
border : 테두리
<style> div { width: 300px; padding: 10px; text-align: center; border-style: solid; border-color: blue; border-width: 5px; } </style>border-style : solid(실선), dotted(점선)
border-width : 테두리 두께
'비전공자 공부일기 > :: WEB & Front-End' 카테고리의 다른 글
[JavaScript] 기초 (0) 2020.06.16 [HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (3) (0) 2020.06.15 [HTML/CSS] CSS의 이해(개요) (0) 2020.06.12 [HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (2) (0) 2020.06.11 [HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (1) (0) 2020.06.11