목록전체 글 (41)
G's days
Answer-------> box-sizing : content-box box-sizing : border-box https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing box-sizing - CSS: Cascading Style Sheets | MDN box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. developer.mozilla.org content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다. border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설..
가운데 정렬 ul 속성에 text-align : center li 속성에 display : inline-block (단, float : left 와 함께 쓰면 안 됨) 참고) block요소를 한 줄로 배치 li 속성에 아래의 둘 중 하나 를 쓴다 1) display : inline-block 2) float : left block, inline, inline-block 이해하기 https://gsdays.tistory.com/48 display 이해하기 종류, 특징 display의 종류 display : block 한줄을 차지함 display : inline 내용이 있는 부분만 보여줌 display : inline-block 상자. 상자만큼 차지함(한줄에 여러 개 배치 가능) * 코드상 띄어쓰기or줄바꿈..
CSS의 기본 중의 기본 selector, property, value가 무엇인지 알아보자. .test { width: 100px; height: 200px; border: 1px solid black; color: #fff; background: black; } 위 코드에서 각각의 단어들이 무엇을 뜻하는지 보자. .test selector width, height, border, color, background property 100px,~ 오른쪽에 있는 것들 value
https://css-tricks.com/ CSS-Tricks CSS-Tricks is a website about websites. css-tricks.com https://developer.mozilla.org/en-US/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org 검색을 통해 원하는 기능의 개념과 설명을 볼 수 있다! 아래의 MDN 사이트에서는 HTML, CSS뿐 아니라 다른 웹기술에 대해서도 볼 수 있다.
디자인 감각이 없는 나를 위한 같은 색 계열에서 강조색과 기본색을 어떻게 정해야할지 모르겠을 때 사용하면 좋은 사이트 원하는 색계열을 선택하면 같은 계열의 색으로 알아서 보여준다. Primary color, Secondary Color, Font color를 따로 선택할 수 있다. https://material.io/resources/color/ Color Tool - Material Design Create and share color palettes for your UI, and measure the accessibility of any color combination. material.io
display의 종류 display : block 한줄을 차지함 display : inline 내용이 있는 부분만 보여줌 display : inline-block 상자. 상자만큼 차지함(한줄에 여러 개 배치 가능) * 코드상 띄어쓰기or줄바꿈하면 화면상 공백생김 완전히 붙이려면 코드상에서 붙여준다 EX) strawberry 그냥궁금증 block요소를 한줄로 배치하고 싶을 때 display : inline-block VS float : left https://gsdays.tistory.com/59 ul속 여러 개의 li를 화면 가운데 정렬 (block요소 가운데 정렬) 1. 가운데 정렬 ul 속성에 text-align : center li 속성에display : inline-block (float : le..
position 사용하기 position:relative; top:0px; left:0px; -> 0px 만큼 이동한다. position의 종류 position : static default. HTML에 적힌 순서대로 나타남 실제로 적지는 않음 position : relative 원래 있어야할 자리에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받음 *z-index를 적용하기 위한 용도로 써주기도 한다. position : absolute 자신이 담겨 있는 (가장가까운상위)박스의 (0,0)에서부터 움직임 자신이 담겨 있는 박스의 margin, padding에 영향을 받지 X (담겨 있는 박스 경계선 안에서 떠있다) position : fixed 스크롤해도 고정됨 상위 태그와..