JudithHopps JudithHopps

display : flex 요소 display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다. inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다. flex-direction은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을 이 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정됩니다. flex-wrap은 내부 요소의 갯수 X 길이가 컨테이너를 넘어갈 때 이들을 여러 줄에 걸쳐 나열할지 여부를 정합니다. justify-content는 메인 축에서 아이템들을 정렬할 방식을 정합니다. flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서 start..

position static 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-c..

background-image background-repeat : repeat, no-repeat, repeat-x, repeat-y, space, round, 2개(x축 y축) background-position : top, center,bottom,left,right, bottom 10px right 3vw background-size : auto, contain, cover, 10% ex) 한가지 문제점은 outer의 radius를 50%로 지정해주었지만 with-bg가 오버플로우가 일어나 화면에서 적용이 안되었다. 이를 해결하기 위해 outer의 overflow:hidden을 설정해주어야 한다. 그라데이션(linear-gradient) background: linear-gradient(gold,t..

border 2px solid black : 픽셀 / 굵게 / 색 0.5em dashed orange : 픽셀 50% / 점선 / 색 1.5vmin dotted darkblue : 1.5vmin / 원 / 색 box-sizing content-box : 기본값 - 글씨의 width를 조절 가능 border-box : padding과 margin 합쳐서 width 설정 가능 border-radius 0 / em / % / px px px px (왼위부터 시계방향 순) 24px 0 (역슬레시 방향 테두리) / 0 24px (/ 테두리) ex) 24px 0 ex2) ul > li:not(:last-child) { border-bottom: 2px solid black; } overflow x축 y축 값을 같이..

요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다. 단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh, 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다. 텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있습니다. 예시) width를 꽉채우려면 100vw, height를 꽉 채우려면 100vh를 넣으면 된다. 단, html(최상의 부모요소)에 padding이나 margi..

색상 표현 방법 keyword는 색상마다 부여된 이름으로 이 링크에서 목록을 확인할 수 있습니다. ex) white, red, green RGB(A)는 빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식이며 끝에 알파값을 붙여서 투명도를 조절할 수 있죠. ex) rgb (255,25,,255) HEX는 R, G, B, Alpha 값들을 16진수형태로 나타낸 것입니다. ex) #FFFFFF (=#FFF), #00080080(뒤 두자리는 투명도) HSL(A)은 색상, 채도, 명도값 그리고 알파값을 조합하여 색을 나타냅니다. ex) hsl(0,100%,100%) , hsl(30,40%,100%) 인라인 요소와 블록 요소 인라인 요소는 비닐이나 랩 안에 내용물을 넣은 것과도 같습니다. 이 텍스트처럼, 일정한 바깥..

font-style 속성은 글자를 기울일 때 사용할 수 있습니다. italic과 oblique은 얼핏 보면 비슷한데 italic이 '기울여서 쓴' 서체라면 oblique는 본래 서체를 기울여놓은 것입니다. 서체마다 둘 다 있거나 한 쪽만 있거나 둘 다 없을 수도 있는데 이들은 한쪽이 없을 시 상호 교차되어 사용됩니다. font-weight 속성은 글자의 굵기를 조절합니다. 서체가 어떤 굵기를 지원하느냐에 따라 normal과 bold중에 선택하거나 100~900 사이 100 단위의 수치를 사용합니다. font-size 속성은 말 그대로 글자의 크기를 지정합니다. 단위로는 px과 %, em, rem이 사용되죠. px는 절대값으로서 픽셀 단위입니다. 100%는 1em으로, 이들은 부모 요소와의 상대적 크기를 ..

1. 적용방법 a. 인라인 스타일(inline style) 방식 HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다. 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에 특별한 경우를 제외하고는 사용되지 않습니다. b. 내부 스타일 시트(internal style sheet) 방식 head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다. HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용될 수 있습니다. c. 링킹 스타일 시트(linking style sheet) 방식 외부의 CSS 파일을 HTML 문서에 연결하는 것입니다. HTML과 CSS의 코드..