긍정적 자기부정

parent element에 position: relative; childe element에 position : absolute; top: 50%; parent element에 justify-content : center; align-items; center;

heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexible Box) 완벽 가이드 많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F heropy.blog flex에 대해 매우 자세히 나와있는 곳이다. 우선 container에는 display, flex-flow, justify-content 속성을 사용할 수 있다. 또한 그 container 안의 박스들에는 order, flex, align-self 속성을 사용할 수 있다. container display container..

기본적으로 부모 값을 상속한다. line-height은 px을 이용하여 고정할 수도 있고 rem/em을 이용하여 상속 받아 사용할 수 있다. 혹은 그냥 숫자만 입력할 수 있다. 숫자를 입력하면 폰트 사이즈를 기준으로 입력된 숫자를 배율로 적용하여 행간이 정해지는 것으로 보인다. 따라서 숫자를 이용하여 정하는 것이 다양한 폰트 사이즈에 따른 상대적인 행간을 적용하기 좋은 것으로 보인다. rem이나 em을 사용한다면 루트나 부모에서의 행간 수치에 대해 배수로 적용되기 때문에, 원하는 태그 안에 있는 폰트가 해당 수치보다 크면 글자가 겹쳐지게 된다.

block vs. inline, inline-block block inline-block inline 줄바꿈 여부 줄바꿈 가능 줄바꿈 불가 줄바꿈 불가 기본적인 너비 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 부여 가능 여부 가능 가능 불가능 과 같은 inline 엘리먼트에 display : inline-block 속성을 주면, 이 차지하는 고유의 크기를 지정할 수 있게 된다. border border는 border에 특성을 부여한다. border는 단축 속성으로서 아래의 하위 속성을 갖는다. border-color border-style border-width developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Ca..

background 속성은 기본적으로 배경 스타일을 지정하는 것이다. background는 하위 속성을 갖고있다. 속성은 다음과 같다. background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size 따라서 background에 어떤 속성을 지정해주면 알맞은 하위 속성에 대응되는 것으로 보인다. (순서가 상관 있는지는 추후 사용하면서 확인해보기) 하위 속성을 개별적으로 선언 할 수 있다.

출처: MDN developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Values_and_units

CSS의 기본 형태는 다음과 같다 Selector를 통해 html 문에서 어떤 부분에 속성을 넣을지 결정. Declaration을 부분을 통해 속성을 특정한다. Selector의 이해 selector는 각 declarartion이 의도하는 정확한 곳을 선택할 수 있게 만드는 중요한 부분으로 보여진다. 따라서 다양한 상황에서 의도를 표현할 수 있는 표현법이 있다! 아래 링크를 보면 그것들의 종류와 의미가 설명되어 있다. www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(..