inspect검사 (개발자도구) 를 통해 웹페이지의 사이즈를 측정할 수있다.
padding과 margin의 차이점
contents가안에있는 border안에있냐, 밖에있냐의 차이
마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다.
패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다.
CSS content, padding, border, margin 에 대한 설명 :
모든 HTML 요소는 상자로 간주될 수 있다.
그 상자에는 안쪽에서부터 content, padding, border, margin 으로 구성 되어있다.
content 실제내용이고,
padding 실제내용과 테두리 사이의 여유공간
border 패딩과 콘텐츠를 감싸는 테두리
margin 해당 요소와 다른 요소 사이의 간격 즉 다른 태그와의 거리
머리속에 이미지를 떠올리기쉽게 비유해보자면,
content는 선물,
padding은 선물을 담은 박스안에 완충제
border은 선물과 완충제를 감싼 포장지
margin은 내선물과, 다른 선물 사이의 거리
라고 생각하면 이해하기 쉬울 것 같다.
출처 : https://www.w3schools.com/css/css_boxmodel.asp
값 넣는 방법 (예)
padding: 20px 10px 30px 40px
시계방향으로 돌면서 각각 사이즈 값을 준다.
브라우저 랜더링
2진수인 bytes코드에서 시작한다
Tokens 은 html 가장 위에 시작점이다
Node트리구성으로 나눈다. DOM(노드구조로 읽는것) CSSOM(css를읽는것) 두개를 합쳐서 rendertree를 만들어 페인팅
Reflow 발생
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시
영향 받은 모든 노드의(자신, 자식, 부모, 조상(결국 모든 노드)) 수치를 다시 계산하여(Recalculate),
렌더 트리를 재생성하는 과정이며 또한,
Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint 라 합니다
CSS 속성
CSS 단위
% (백분율), em(배수단위) , px(픽셀)
디바이스마다 사이즈가 다르다.
%는 중요!! %로 많이 사용
가시속성/display속성
block은 네모덩어리, 영역지정해주는것 한줄을 차지함
block 속성은 inline과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지한다.
예를 들어, header, footer, p, li, table, div, h1 등이 모두 block 요소에 해당하는 태그들이다.
블록 속성을 가지고 있는 태그는 기본적으로 너비 100%(width:100%)속성을 가지고 있다.
inline은 콘텐츠가 가지고있는 크기만큼만 자리잡은 것
inline 속성이란, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향이다.
예를 들어, span, a, img 등이 모두 inline 요소에 해당하는 태그들이다.
display 속성은 기본값으로 block,inline 두가지 중 한가지 값을 가집니다.
block은 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
inline은 새로운 라인에서 시작하지 않고 해당 요소의 내용만큼만 너비를 차지합니다.
inline-block은 해당 요소 자체는 인라인 요소처럼 동작하지만 해당 요소 내부에서는 블록요소처럼 동작합니다.
visibility 속성은 HTML 요소가 웹페이지에 표현될지 아닐지만을 결정합니다.
visible : 해당 요소를 웹페이지에 나타냅니다.
hidden : HTML 요소를 웹페이지에 나타내지 않습니다. 하지만 여전히 웹페이즈이 레이아웃에는 존재합니다.
collapse : 이 속성값은 동적인 테이블에선만 사용할 수 있으며, 테이블의 테두리를 한 줄 만 보여줍니다.
opacity 속성은 HTML요소의 투명도를 간단히 조절할 수 있습니다.
박스속성
배경 속성
background-repeat : 이미지가 반복 하는 것
repeat-x x축방향으로 반복
repeat-y y축 방향으로 반복
background-attachment
배경이미지를 어떠한 방식으로 화면에 붙일 것인지 지정함
기본 키워드↓
scroll : 화면 스크롤에 따라 배경화면 이미지가 함께 이동한다.
fixed : 스크롤 내려도 배경화면 이미지 고정
background-position : 배경 위치
X축크기; Y축크기;
X축크기 Y축크기 ; 2개의 값을 입력하면 각각 위치를 적용.
폰트속성
h1 태그의 기본크기는 32픽셀 / p 태그의 기본 크기는 16픽셀
일반 폰트의 두께는 400 / 두꺼운 폰트의 두께는 700
서버에 폰트가 내장되어있어야 불러와진다.
제이쿼리 CDN 인터넷 라이브러리 (코드)를 가져와서 쓴다.
css는 block 형식을 가지는 태그를 수직 정렬 할 수 없음. 대체 방안으로 line-height속성 사용
＊ 꼼수 : line-height 속성으로 block형식 태그 수직 정렬
text-decoration 속성
텍스트의 꾸밈 속성, 하이퍼링크 밑줄 제거 할 때 사용 text-decoration : none;
위치/position 속성
* body{ margin: 0; padding: 0;} 으로 한 후 값을 주는게 좋다 (크롬에서 여백이생기기 때문에)
position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.
position 속성에는 static, relative, absolute, fixed, sticky 가 있습니다.
static 기본값으로 일반적인 문서의 흐름에 따라 배치됩니다.
(top , right , bottom left z-index 속성이 아무런 영향도 주지 않습니다)
relative 요소 자기 자신을 기준으로 배치되며,
자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
absolute 부모(조상) 요소를 기준으로 배치되며,
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
fixed fixed를 사용하면 지정해준 자기 고정위치에서 절대움직이지 않습니다.
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
sticky 요소를 일반적인 문서 흐름에 따라 배치된다. 그러나 가까운 부모요소를 기준으로 배치되어,
평소에 static 속성을 유지하다가 스크롤이 부모 요소에 다다르면 fixed 속성으로 바뀌고,
부모 요소를 벗어나면 다시 static 속성으로 바뀌는 속성이다.
절대위치 :
<style>
#div001{
border: 1px solid red;
}
#div002{
border: 1px solid blue;
position: absolute;
position: relative;
top : 10px;
left: 10px;
}
#div003{
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div001">첫번째</div>
<div id="div002">첫번째</div>
<div id="div003">첫번째</div>
</body>float : 띄우는 것 float 라는 단어는 원래 ‘뜨다’ 라는 의미이며,
원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
inherit - 부모 요소로부터 상속함
clear 전재조건 : float가 있을때
#Flex (박스 가로 배치)
FLEX는 쉽게말하면 컨테이너 즉 커다란 범위이다.
Flex(플렉스)= Flexible Box, Flexbox
float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.
Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같다
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.
“컨테이너가 Flex의 영향을 받는 전체 공간이고,
설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.
Flex의 속성들은,컨테이너에 적용하는 속성
아이템에 적용하는 속성 이렇게 두 가지로 나뉜다. (아래사진 참고)
FLEX 개념 이해 도움 사이트 ▽
studiomeal.com
FLEX 속성 종류 검색 ▽
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
개념이해를 도와주는 게임 ▽
'STUDY > HTML5 CSS3' 카테고리의 다른 글
| [HTML CSS] 22-05-20 게시판 만들기 ☑ (0) | 2022.06.02 |
|---|---|
| [CSS] 22-05-19 flexboxdefense 공략 ☑ (0) | 2022.06.02 |
| [CSS] 22-05-18 게시판 만들기 ☑ (1) | 2022.06.02 |
| [CSS] 22-05-17 CSS diner 공략 ☑ (0) | 2022.06.02 |
| [CSS] 22-05-17 CSS선택자 ☑ (0) | 2022.06.02 |