웹 프론트 엔드 (42) 썸네일형 리스트형 CSS 박스모델 - margin margin - 박스 모델의 가장 바깥부분의 여백을 말합니다. margin: 10px; /* 네 면 모두 적용 */ margin: 10px 5px; /* 세로방향, 가로방향 */ margin: 10px 5px 20px; /* top, 가로방향, bottom */ margin: 2px 3rem 0 auto; /* 위 | 오른쪽 | 아래 | 왼쪽 (위 기준으로 시계방향)*/ - margin으로 한꺼번에 입력할 수 있으며, margin-top, margin-left, margin-right, margin-bottom 등 하나씩 입력할 수도 있습니다. - margin에서 입력하는 값의 개수에 따라 적용되는 범위가 다릅니다. - margin에 %값을 지정했을 경우 부모의 width에 영향받는다. margin co.. CSS 박스모델 박스모델 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model The box model - Learn web development | MDN That's most of what you need to understand about the box model. You may want to return to this lesson in the future if you ever find yourself confused about how big boxes are in your layout. developer.mozilla.org 1. content: 콘텐츠가 표시되는 영역 2. padding : 콘텐츠와 테두리(border)사.. CSS background background-color - 요소의 배경 색을 지정할 수 있습니다. - background-image와 같이 사용할 경우, background-image보다 뒤에 렌더링 됩니다. background-image - 요소의 배경 이미지를 지정할 수 있습니다. - 배경으로 삼을 이미지의 url을 입력하여 사용할 수 있습니다. background-repeat - 배경 이미지를 반복에 추가적인 설정을 하는 속성입니다. - background-image가 설정되었을 때, 레이아웃 크기와 이미지 크기가 맞지 않는 경우 같은 이미지를 반복하여 사이즈를 맞추게 되는데, 이를 조절할 수 있습니다. - repeat-x값과 repeat-y값을 통해 가로축과 세로축을 조절할 수 있습니다. repeat-x : 가로축만 이미.. CSS 색상 color - RGB(#+16진수 또는 rgb, rgba)형식으로 색을 표시할 수 있습니다. - #+16진수 코드 > 2자리 16진수로 0부터 255까지를 표시합니다 > 2자리마다 빨간색, 녹색, 파란색을 의미합니다. > ex) rgb(255,128,36) = #FF8024 - rgba > rgb 코드에 투명도를 의미하는 알파값을 추가로 붙인 형식입니다. > 색상에 투명도까지 같이 조절할 수 있습니다. - 키워드(blue, transparent등), HSL 실린더형 좌표계 사용 등 다른 방식으로도 색을 표현할 수 있습니다. opacity - 요소의 불투명도를 설정하는 값입니다. - 기본값은 1입니다. - 자식 요소들에게 상속되지는 않지만, 투명도는 포함된 요소에 모두 적용됩니다. - 알파값 0 (투명) .. CSS 레이아웃 1. display - html 요소가 차지하는 공간을 결정하는 CSS 요소입니다. - 각 html 요소는 display가 지정되어 있으며, CSS 에서 새롭게 지정해 줄 수도 있습니다. inline - span 태그 등이 여기에 속합니다. - 내부 콘텐츠의 크기가 영역의 크기이며, 임의로 크기를 지정할 수 없습니다. - margin, padding의 top/bottom 을 지정하지 못합니다. block - div 태그, p 태그가 여기에 속합니다 - 영역의 크기를 width, height로 지정할 수 있습니다. - width를 지정하지 않으면 가로 전체를 차지합니다. - 여러가지 요소가 세로로 배치됩니다. inline-block - input 태그가 여기에 속합니다. - 영역의 크기를 width, he.. CSS Font - text관련 1. text-align .text{ text-align: center; } - 텍스트의 정렬을 설정하는데 사용하는 스타일입니다. - block 요소일때만 적용됩니다. - block 요소이더라도 가로의 길이가 짧은 경우 제대로 적용되지 않습니다. 2. text-indent .text{ text-indent: center; } - 들여쓰기 하는데 사용되는 스타일입니다. - 텍스트의 들여쓰기 간격을 지정해 줄 수 있습니다. 3. text-decoration .text{ text-decoration: underline; } - 텍스트를 꾸미는 데 사용합니다 - 밑줄(underline), 텍스트 위쪽 줄긋기(overline), 점선(dashed) 등의 다양한 옵션을 사용할 수 있습니다. 4. word-break.. CSS FONT - 글자 간격( letter-spacing , word-spacing ) 글자 간격 스타일 - 모든 폰트엔 폰트 제작자가 설정한 글자 간격이 존재한다. - 이를 letter-spacing과 word-spacing 으로 지정해줄 수 있다. letter-spacing .text{ letter-spacing: 5px; } > 글꼴의 기본 간격에 지정하는만큼 글자마다 추가 간격을 더한다. > 음수로 지정하여 글자 간격을 붙일 수 있다. word-spacing .text{ word-spacing: 10px } > 글꼴의 기본 간격에 지정하는만큼 문자마다 추가 간격을 더한다. CSS Font https://developer.mozilla.org/ko/docs/Web/CSS/font font - CSS: Cascading Style Sheets | MDN font CSS 속성은 font-style (en-US), font-variant (en-US), font-weight, font-size, line-height (en-US), font-family (en-US)의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다. developer.mozilla.org 1. font-size .text{ font-size: 12px; } - 글자의 크기를 조정하는 스타일입니다. - 보통 px를 쓰며, rem이나 em 을 사용하기도 하며, %로 비율로 지정해주기도 합니다. - 16px 가 .. 이전 1 2 3 4 5 6 다음
