비전공자의 IoT 국비 교육 수강일지 Day

Recent Posts

Link

250x250

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Today

Total

관리 메뉴

오늘보다 더 나은 내일의 나에게_

비전공자의 IoT 국비 교육 수강일지 Day_27 본문

비전공자의 코딩일지

비전공자의 IoT 국비 교육 수강일지 Day_27

chan_96 2022. 1. 25. 17:56

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>

스타일 시트 우선 순위