CSS

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

1. 1) id 속성을 통해 태그를 선택할 때, 존재하지 않는 id 값으로 태그를 선택하면 무엇이 출력 되는가? 2) class 속성을 통해 태그를 선택할 때, 존재하지 않는 class 값으로 태그를 선택하면 무엇이 출력 되는가? 답: 1) null 2) null 2. css 선택자로 태그를 선택할 때 a)와 b)의 출력 결과는 같다(O,X) a) const myTag = document.querySelector(‘#myNumber’); console.log(myTag); b) const myTag2 = document.getElementById(‘myNumber’); console.log(myTag2); 답: O 3. querySelector 메소드를 활용할 때 클래스나 태그 이름처럼 여러 개의 요소가..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

1. sticky 포지션은 ( ㄱ ) 처럼 원래 위치에 배치 되어 있다가 정해진 위치에 브라우저가 스크롤 되면 ( ㄴ ) 처럼 고정되어 배치된다. 빈칸에 들어갈 단어들이 알맞게 짝 지어진 것은? 1) ㄱ. static - ㄴ. relative 2) ㄱ. static - ㄴ. absoulte 3) ㄱ. static - ㄴ. fixed 답: 3 2. flexbox에서 간편하게 요소들 사이에 간격을 넣을 수 있는 속성은 무엇인가? 답: gap 3. flexbox에서 어떤 요소의 크기를 원하는 대로 고정하고 싶을 때 사용할 수 있는 속성과 속성 값은 무엇인가? 답: flex, flex-basis 4. grid에서 minmax로 최댓값, 최솟값을 정할 때 최댓값에만 fr(fraction)을 사용할 수 있다.(O,..

1. relative 포지션의 A, 그 밑의 absolute 포지션의 B가 있다. B를 자신의 조상 요소인 A와 완전히 겹치게 두고 싶을 때, 어떤 코드를 작성해야 할까? 답: /* A 요소에 relative 포지션을 설정한다. */ .A { position: relative; } /* B 요소에 absolute 포지션을 설정하고 top, left 값을 0으로 지정하여 A 요소와 겹치도록 한다. */ .B { position: absolute; top: 0; left: 0; } 2. 다음의 사진을 보았을 때, 아이템들의 둘레에 균일한 간격을 주게 하는 flex 컨테이너의 속성은? 답: justify-content: space-around; 3. flex와 grid의 차이점을 설명해라 답: flex는 1차..

1. 글을 쓰듯이 배치되는 방식을 Normal Flow라고 한다. Normal Flow로부터 벗어날 수 있게 하는 것으로 옳은 것을 모두 고르시오. 1) relative 2) fixed 3) static 4) absoulte 5) sticky 6) inline-block 답: 2, 4 해설: 우선 Normal Flow에 대한 개념을 이해하는 것이 중요하다. Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름을 말한다. 인라인요소, 블록레벨요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있기 때문에 요소의 특성에 따라 Normal Flow가 정해진다. - static: 단순히 Normal Flow로 배치된다. - relative: Nor..

목차 1. flex-basis 2. flex-grow 3. flex-shrink 1. flex-basis flex-basis는 flex 아이템의 크기를 설정하기 위해 존재하는 속성이다. 아이템의 크기를 직접 설정한다는 점에서 width와 유사하지만 1. flex-basis는 width나 height와 달리 flex-direction의 영향을 받는다는 점 2. flex-basis와 width가 동시에 적용될 경우 flex-basis가 더 높은 우선순위를 갖는다는 점의 차이가 있다. flex-basis의 기본 값은 auto로, - width를 따로 설정하지 않으면 컨텐츠가 차지하는 width와 같은 값이되고 - width를 설정하면 설정값과 동일한 값이 된다. .container { display: flex..

1. CSS Box Model의 HTML요소를 설명하기 모든 HTML요소는 박스 모양으로 구성이 되고, 이것을 박스모델이라고 한다. 박스모델의 html 요소는 콘텐츠, 패딩, 보더, 마진 4가지가 있다. 먼저 콘텐츠는 텍스트나 이미지와 같은 박스의 실질적인 내용을 담당하는 부분이고, 패딩은 콘텐츠와 보더 사이의 간격을 말한다. 보더는 콘텐츠와 패딩 주변을 감싸는 테두리이며 마진은 테두리와 다른 요소 사이의 간격을 말한다. 2. .class > a와 .class a의 차이점 설명하기 전자는 .class는 직계 자식인 a태그를 선택하는 반면에 후자는 .class의 모든 a태그를 선택한다. 3. .text의 글자색이 흰색으로 변경되지 않은 이유 설명하기 Codeit css 공부 #header > .text{ ..

1. class와 id의 차이점 설명하기 id는 유일한 요소에 적용할 때, css는 복수의 요소에 적용할 때 사용한다. 또한 하나의 id는 하나의 요소에서 한 번만 사용이 가능하지만 class는 동일한 클래스를 여러 요소에서 사용이 가능하다. *추가 질문: 우선순위는 id와 class 중에 어떤 것이 더 높은가? id가 더 높다 2. padding과 margin의 차이점 설명하기 margin은 대상의 외부 여백을 의미하고, padding은 대상의 내부 여백을 의미한다. 3. display: block과 display: inline의 차이점 설명하기 display: block 은 위에서부터 아래로 배치되고 너비와 높이를 지정할 수 있다. 반면 display: inline 은 평소에 글 쓰는 방향으로 줄이 ..

1. width:auto; 과 width:100%; 의 차이점에 대해 설명하기 width: auto는 내용물(자식 요소)의 크기에 맞춰 자동으로 크기가 조절된다. 하지만 display: block인 경우에 width: auto를 설정할 경우 내용물 크기가 아닌 부모 요소의 크기만큼 조절된다. 결론적으로 태그의 요소 성질(block, inline-block, inline)에 맞춰 자동설정 된다. width: 100%는 부모 요소 크기만큼 크기가 조절된다. 따라서 margin을 추가하면 부모의 영역을 벗어나는 것을 볼 수 있다.