Recent Posts
Link
250x250
오늘보다 더 나은 내일의 나에게_
비전공자의 IoT 국비 교육 수강일지 Day_27 본문
728x90
계층 선택자
자식선택자 : 기호 (>)
자손선택자 : 기호 ( )
후행선택자 : 기호 (~)
근접후행선택자 : 기호(+)
nth-child() : 특정 순서에 있는 자식 선택
그룹선택자 : 다양한 요소들을 콤마(,)로 구분하여 요소 선택
폰트 단위
크기 단위
: 요소 or 텍스트의 크기를 지정하는 단위
px | 화소 하나의 크기에 대응되는 단위(고정값) |
em | 부모요소 크기에 따른 배수 단위 |
rem | html 태그의 폰트 크기에 따라 결정 |
반응 선택자
: 사용자의 반응으로 생성되는 특정한 상태를 선택
: active | 마우스로 클릭할 때 선택 |
: hover | 마우스를 올린 태그를 선택 |
스타일 시트 명시도 계산
가중치 | 스타일적용 | 예시 |
0 | 전체선택자 | *{color:red;} |
1 | 타입선택자 | p{color:red;} |
10 | 클래스선택자 | .txt{color:red;} |
100 | 아이디선택자 | #main{color:red;} |
!important => 가중치 무시하고 가정 먼저 적용될 수 있도록 할 수 있음
공간분할 태그
: 경계를 분할하거나 영역을 나눌 때 사용하는 태그 <div>, <p>, <span>
가시 속성
display
: 요소가 화면에 보이는 방식 지정
block | 웹 페이지의 가로공간을 모두 차지하는 속성 |
inline | 컨텐츠(내용)이 끝나는 지점까지 너비를 가지는 속성 |
none | 해당 HTML요소를 보이지 않게 지정 |
박스 모델 구조
CSS 위치 속성
Box Model
: 요소의 부피감을 결정하는 개념(웹페이지 레이아웃, 디자인 설계 시)
width | 요소의 너비 지정 |
height | 요소의 높이 지정 |
background-color | 박스 모델 색 지정 |
border | 경계선 스타일 지정 |
margin | 경계선의 바깥 여백 지정 |
padding | 경계선의 안쪽 여백 지정 |
margin 실습
코드더보기<!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> body{margin: 0;} div{width: 100px; height: 100px;} #div1{ background-color: rgb(107, 142, 35); } #div2{ background-color: rgb(133, 172, 55); margin-left: 100px; } #div3{ background-color: rgb(161, 194, 96); margin-left: 200px; } #div4{ background-color: rgb(187, 221, 120); margin-left: 300px; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>
box-sizing
: 요소의 크기를 화면에 표시하는 방식
content-box | 가로와 세로 너비가 콘텐츠 영영만 표현되도록 설정 *padding, margin, border는 포함하지 않는다. |
border-box | 가로와 세로의 너비가 마진 영역을 제외한 padding, contents, border를 포함한 크기로 설정한다. |
border
: 요소의 테두리
border-radius 속성
border-top-left-radius => 왼쪽 위 설정
border-bottom-left-radius => 왼쪽 아래 설정
border-top-right-radius => 오른쪽 위 설정
border-bottom-right-radius => 오른쪽 아래 설정
Position
: 자유자재로 요소의 위치를 배치하는 속성
static | 태그가 위에서 아래로 순서대로 배치, position의 기본 값 top, bottom, left, right이 비활성화됨 |
relative | 초기 위치 상태에서 상하좌우로 위치 이동 top, bottom, left, right이 활성화됨 기준 : 본인이 원래 있던 위치 |
absolute | 절대 위치 좌표를 설정 top, bottom, left, right이 활성화됨 기준 : static이 아닌 부모, 없다면? body |
fixed | 화면을 기준으로 절대 위치 좌표 설정 부모, 스크롤 전부 무시 기준 : 최상위 태그 |
overflow
: 부모요소의 범위를 벗어날 떄 어떻게 처리할지 지정
visible | 영역이 벗어나도 그대로 보여지도록 처리(기본값) |
hidden | 영역이 벗어나도 부분은 숨김처리 |
scroll | 영역이 벗어나는 부분을 스크롤 처리 |
auto | 영역이 벗어나지 않으면 스크롤이 나오지 않고, 영역이 벗어나면 스크롤로 처리 |
float
: 요소를 띄워서 배치하는 속성
left | 왼족에 요소를 띄움 |
right | 오른쪽에 요소를 띄움 |
none | 띄우지 않음(기본값) |
스타일 시트 선언 방식
인라인 스타일
: 요소 내 style 속성으로 스타일 지정
<p style="color:blue;">인라인 스타일</p>
내부 스타일
: head요소 내 style요소 생성한 후 스타일 지정
<style> p{ color: "red"; } </style>
외부 스타일
: <link>태그로 외부 파일에 접근해서 스타일 지정
<head> <link rel="stylesheet" href="파일명.css"> </head>
스타일 시트 우선 순위
728x90
'비전공자의 코딩일지' 카테고리의 다른 글
비전공자의 IoT 국비 교육 수강일지 Day_29 (0) | 2022.01.27 |
---|---|
비전공자의 IoT 국비 교육 수강일지 Day_28 (0) | 2022.01.26 |
비전공자의 IoT 국비 교육 수강일지 Day_26 (0) | 2022.01.24 |
비전공자의 IoT 국비 교육 수강일지 Day_25 (0) | 2022.01.21 |
비전공자의 IoT 국비 교육 수강일지 Day_21~24 (0) | 2022.01.20 |
Comments