YoonStudyNote

absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block으로 수정됨. (static, relative, sticky랑 상관이 없다) 지정값 변화값 inline block inline-block block inline-table block table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block flex flex/ position 속성 효과없음 inline-flex inline-flex/ position 속성 효과 없음 그외..

요소 쌓임 순서(Stack order) 요소가 쌓여있는 순서를 통해 어떤요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정(Z축) 1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임(값은 무관) 2. position이 모두 존재한다면 z-index 속성의 숫자 값이 높을 수록 위에 쌓임 3. position속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일 수록 위에 쌓임(나중에 작성한 코드(요소)) position > z-index > HTML 마지막코드 1 2 3 4 5 사진에서 보면 알 수 있듯이, 가장먼저 시작한 1번박스는 제일 밑에있고 맨뒤에있는 5번은 가장 위에 있는것을 알 수 있다. 하지만 CSS로 쌓이는 순서를 변경 할..

1. relative 1 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 30px; } .relative{ position: relative; bottom: 20px; right:30px; } relative의 문제점 2 3 .box{ width: 100px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; display: flex; justify-..

position 요소의 위치 지정 방법의 유형(기준)을 설정 속성 값 값 의미 기본값 static 유형(기준) 없음/ 배치 불가능 static relative 요소 자신을 기준으로 배치 absolute 위치 상 부모 요소를 기준으로 배치 fixed 브라우저(뷰포트)를 기준으로 배치 sticky 스크롤 영역 기준으로 배치 .parent{ width: 400px; height: 300px; border : 4px dashed lightgray; position: relative; } .child{ width: 150px; height: 100px; background: tomato; border: 4px dashed red; border-radius: 10px; position: absolute; /* ab..

float 속성이 적용되지 않도록 지정(해제) 속성 값 값 의미 기본값 none 요소 띄움 허용 none left 왼쪽 띄움 해제 right 오른쪽 띄움 해제 both 양쪽(왼쪽, 오른쪽) 모두 띄움 해제

요소를 좌우 방향으로 띄움(수평 정렬) 속성 값 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 article .picture{ width: 200px; height: 150px; background: tomato; float:left; margin-right: 20px; margin-bottom: 10px; } article .text{ clear:left; /* clear는 흐르는 부분을 없애버린다. */ } clear: left는 float의 흐르는 부분을 없애고, 왼쪽정렬로 하겠다는 뜻이다. 수평정렬 .box{ width: 150px; height: 100px; background:tomato; color:white; font-size:30px;..

1. letter-spacing 문자의 자간(글자 사이 간격)을 설정 속성값 값 의미 기본값 normal 단어 사이의 일반 간격 normal 단위 px, em, cm 등 단위로 지정 .momo{ letter-spacing: 10px; } 2. word-spacing 단어 사이(띄어쓰기)의 간격을 설정 속성값 값 의미 기본값 normal 단어 사이의 일반 간격 normal 단위 px, em, cm 등 단위로 지정 .momo{ word-spacing: 20px; }

1. text-align 문자 정렬 방식을 지원 속성값 값 의미 기본값 left 왼쪽정렬 right 오른쪽 정렬 center 가운데 정렬 justify 양쪽 맞춤 완성된 두줄이상에서 동작한다. 2. text-decoration 문자의 장식(line)을 설정 속성값 값 의미 기본값 none 선 없음 none underline 밑줄을 지정 overline 윗줄을 지정 line-through 중앙 선(가로지르는)을 지정 3. text-indent (첫번째줄의) 들여쓰기를 지정 음수 값(Negative Values)을 사용할 수 있다. 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다. 들여쓰기 예) .momo{ text-indent: 20px; } 내어쓰기 예) .momo{ text-indent..

문자의 색상을 지정 속성 값 값 의미 기본값 색상 문자의 색상을 지정 rgb(0, 0, 0) 색상표현 표현 의미 예시 색상이름 브라우저에서 제공하는 색상의 이름 --> 부정확하므로 보통 사용하지 않음 red, blue Hex 색상코드 16진수 색상(Hexadecimal Colors) --> 가장 많이 사용한다. #000000 RGB 빛의 삼원색 --> 많이 사용하는편이다. rgb(255, 255, 255) RGBA 빛의 삼원색, 투명도 --> 많이 사용하는편이다. rgba(255, 0, 0, .5) HSL 색상, 채도, 명도 hsl(120, 100%, 50%) HSLA 색상, 채도, 명도, 투명도 hsla(120, 100%, 50%, .3)

줄 높이를 지정 속성 값 값 의미 기본 값 normal 브라우저의 기본 정의를 사용(1~1.4) normal 숫자 요소 자체 글꼴 크기의 배수로 지정 단위를 설정하지 않을 경우 사용 가능 단위 px, em, cm 등 단위로 지정 % 요소 자체 글꼴 크기의 비율로 지정 보통 글자의 높이를 지정하는데 font-size의 두배로 사용하고 싶다. 하지만 수정할때마다 높이와 글자크기를 계산하면서 코딩을 짜고 싶지않다. 했을때는 숫자로 글꼴 크기의 배수로 지정하는것도 방법이다. 예를들어) div { line-height : 32px; } div { line-height : 2; } 16px의 두배인 32px을 지정하는것과 배수 2를 지정하는것은 같은 모습으로 출력이 된다. div { font-size : 30px;..