1. CSS란?
· Cascading Style Sheets의 약자로, HTML, XML과 같은 문서를 디자인적으로 보기 좋게 구성하여 정보를 전달하는 언어이다.
· 화면 상의 레이아웃 등을 컨트롤 하는 문서로서, 글꼴, 배경색, 너비와 높이, 위치 등을 지정하거나,
장치에 따라서 화면을 다르게 표시될 수 있도록 하는 기능을 가진다.
2. 선택자란?
· HTML에서 CSS style을 주기 위해서 선택자를 통해 특정 태그를 선택하며, 해당 태그의 속성을 변경하는 목적으로 사용된다.
1) tag 선택자: 특정 태그를 선택하여 적용한다.
2) * 선택자: 문서 전체를 선택해서 적용한다. ex) *{ color : red }
3) id 선택자: style 적용할 때는 #id 형태로 사용되며, 한 페이지에서 하나의 정의로 하나의 태그만 사용가능하다.
즉, 한 페이지 내에서 같은 id로 정의 내릴 수 없다.
4) class 선택자: style 적용할 때는 .class 형태로 사용되며, 한 페이지에서 반복적으로 사용되는 스타일을 정의할 수 있다.
5) 후손 선택자: 자식과 후손 모두 선택할 때 사용한다. ex) div p{ }, div에서 모든 p 태그를 선택
6) 자식 선택자: > 기호를 사용하며, 어떠한 태그 바로 아래에 위치한 태그를 선택할 때 사용한다. ex) div > p{ }
7) 동위 선택자: +, ~ 기호를 사용한다. ex) div + p : 바로 뒤 p태그를 선택, div ~ p : 모든 p 태그 선택
8) 속성 선택자: 태그의 속성을 설정 할 때 사용한다. <a href = "경로"></a>
9) 구조 선택자: first-child 1번 항목 선택, last-child 마지막 항목 선택, nth-child(2n+1) 홀수에 해당되는 항목을 선택한다.
10) 문자 선택자: 특정 문자/문자열을 선택하여 설정이 가능하다.
3. 문자 선택자에서 px과 eml의 차이는?
· px는 pixel을 뜻하며, 모니터(화면)에 따라서 상대적인 크기를 가지고, 크기 조정이 불가능하다.
· em은 font_size를 뜻하며, 웹 문서에서 사용되는 단위로, 크기 조정이 가능하다.
· 폰트 사이즈의 평균적인 기본값은 12pt, 16px, 1em, 100%이다.
4. bootstrap
· bootstrap은 각종 레이아웃, 버튼, 입력창 등의 디자인을 HTML, CSS, JavaScript를 기반으로하여 만들어진 프레임워크이다.
· 여러 개발자들의 공동작업이 이루어질때, 디자인 불일치, 방대한 코드량, 관리 어려움 등의 일관성을 유지하기가
힘든 문제점을 개선하기 위해 개발되었다.
5. overfolw 속성
· overfolw란? 특정요소가 정해진 크기의 범위를 초과 할 때 어떠한 방식으로 처리할 것 인지 결정할 수 있는 속성으로,
부모가 자식보다 크기가 더 작을 때 사용된다.
1) overfolw: visible 범위를 넘어 가더라도, 있는 그대로를 나타내도록 처리한다.
2) overfolw: hidden 범위를 넘어가는 부분은 보이지 않도록 처리한다.
3) overfolw: scroll hidden에서 보이지 않는 부분을 사용자가 확인 할 수 있도록 스크롤바로 표시하여 처리한다.
4) overfolw: auot 범위에 따라 스크롤바를 추가할지 안할지 자동으로 결정한다.
6. float 속성
· '뜨다' 라는 의미로 웹페이지에서 이미지를 정렬할 때 사용되는 속성으로, Left/Right/None으로 정렬이 가능하다.
· 2차원 배열이므로 다음 요소에 float 미지정 시, 밑에 가라앉기 때문에 화면 상에 보여지지 않는다.
단, text나 인라인 요소는 자동으로 보이게 정렬된다.
7. display 속성(종류)
· none: 출력에 보이지 않으며, 영역도 차지하지 않는다.
· block: 기본적으로 가로 영역을 모두 차지하며, 전/후 태그에 대해서는 자동 개 행이 실행된다.
width, height, margin, padding과 같은 속성 지정이 가능하다. ex) <div>, <p>, <h>, <li> 등
· inline: block과 반대로 개 행이 일어나지 않으며 한 줄에 다른 태그들과 나란히 배치가 된다.
width, height과 같은 속성 지정이 불가능하다. ex) <span>, <b>, <i>, <a> 등
· inline-block: block과 inline의 중간 형태로, 개 행은 일어나지 않지만 width, height 등의 속성 지정이 가능하다.
ex) <img>, <button>, <select>, <input>, <audio>, <video> 등
※display:none과 visibility:hidden의 차이는?
· display: none은 아예 사라지게 하는 속성으로 출력도 되지 않고, 영역도 차지하지 않는 속성이다.
· visibility: hidden은 보이지만 않고 자신의 영역만 차지하는 속성으로, 주어진 공간만큼만 차지한다.
8. opacity 속성의 사용법은?
· 투명도를 조절하는 속성으로 선택자{ opacity : 속성값; } 형태로 사용한다.
· 속성값의 기본값은 1.0으로, 0.0~1.0까지의 수 대입이 가능하며 숫자가 커질수록 불투명해진다.
9. box-sizing 속성
· border-box는 border, padding, content를 포함하여 크기가 설정된다, padding을 설정하여도 width 값은 그대로 유지된다.
· content-box는 box-sizing 속성의 기본 값으로 border, padding, margin을 제외한 높이와 너비만을 포함시킨다.
즉, padding 설정 시 설정한만큼 기존 width height 값이 증가되어 박스 크기가 조절된다.
※margin 과 padding의 차이는?
· margin 속성은 외부 여백을 의미하고, padding 속성은 내부 여백을 의미한다.
10. css에서의 position의 4가지 설명하시오. **반드시 외우기!!**
· position 속성이란? 웹 문서 안 요소들을 어떻게 배치할 것인지를 지정하는 속성이다.
1) static은 정적 위치 지정 방식으로 position default는 기본적으로 static으로 설정되어 있으며, 초기값으로 위치를
지정하지 않을 때와 같다. top, right, bottom, left 속성 값이 적용 되지 않기 때문에 position을 무시할 때 사용되기도 한다.
2) relative은 상대 위치 지정 방식으로 해당 HTML 요소의 정적 위치에 따라 위치를 재조정하는 방식이다.
(static을 기준으로 위치 설정)
부모-자식 관계일 때는 부모의 영향을 받고 동위 관계일 때는 바로 위 요소의 영향을 받아 위치가 설정된다.
3) fixed는 고정 위치 지정 방식으로 브라우저 화면을 기준으로 설정된다. 즉, 화면이 변경되더라도 고정된 위치로 설정된다.
웹페이지에서 따라다니는 광고나 공지가 바로 fixed로 위치 설정하였기 때문! (기준점은 브라우저 좌측 상단)
4) absolute은 static 속성을 가지고 있지 않은 부모를 기준으로 설정이 된다.
만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
