Language/CSS

배경은 어떻게 구성할까?      background-color 속성 --요소의 배경에 색상을 넣는 속성이다. 기본 형식background-color: 색상값; 예시 코드div { width: 100px; height: 100px; background-color: red;}--    background-image 속성 --요소의 배경에 이미지를 넣는 속성이다. 주의 사항-  요소의 배경 너비, 높이를 지정해야 한다. (배경에 무엇을 삽입하려면)-  요소의 배경 크기가 이미지 크기보다 작으면 이미지는 잘리고, 크면 이미지가 반복하여 나온다. 기본 형식background-image: url('이미지 경로'); 예시 코드div { width: 200px; height: 100px; bac..

박스 모델은 무엇인가?      박스 모델 --CSS의 박스 모델은모든 HTML 요소가 하나의 박스로 표현되는 개념으로각 요소는 여러 개의 영역으로 구성되며, 이를 이해하면 "여백", "테두리", "크기 조정" 등을 쉽게 다룰 수 있게 된다. margin   :   요소의 외부 여백을 의미border   :   요소의 테두리(경계선)를 의미padding   :   요소의 내부 여백을 의미content   :   요소의 내용을 의미 크롬 브라우저의 개발자 도구(F12)를 통해 박스 모델 확인하기--    margin 영역 --margin은 요소의 외부 여백을 의미한다.  기본 형식/* margin의 각 영역 정의하기 */margin-top: 크기;margin-right: 크기;margin-bottom: 크..

텍스트와 관련된 속성은 무엇이 있을까?      font-family --font-family 속성은글꼴을 지정하는 속성으로속성값으로는 1개 이상의 "글꼴 명"을 작성하고 쉼표(,)를 통해 구분한다.글꼴을 여러 개 작성하는 이유는 우선순위를 지정하기 위함이다.작성한 순서대로 글꼴을 확인하여, 첫 번째 글꼴이 없으면 다음 글꼴로 적용하는 방식으로 진행된다. 추가로 마지막에 "글꼴 유형"을 추가할 수 있는데글꼴 유형은 글꼴의 개념이 아니라 글꼴의 형태를 의미한다.만약 명시한 글꼴을 불러오지 못할 경우를 대비하기 위해 불러오려고 한 글꼴과 가장 유사한 형태의 글꼴 유형을 마지막에 작성하여 지정한 글꼴을 전부 불러오지 못하더라도 텍스트가 유사한 형태로 보여줄 수 있기 때문에font-family 속성에는 반드시 ..

CSS에는 어떤 특징들이 있을까?      기본 스타일 시트 --기본 스타일 시트는웹 브라우저에 기본으로 내장되어 웹 브라우저에 표시되는 요소들의 "글꼴", "크기", "색상", "굵기", "문단 설정" 등의스타일이 미리 정의된 파일 또는 문서 양식을 의미한다. 그래서 기본 스타일 시트를 통해 h1, h2 태그만 사용해도 웹 브라우저에는 텍스트가 다양한 크기와 굵기로 표시된다.--    적용 우선순위 & 개별성 --적용하는 것들마다 각각의 우선순위가 정해져 있다. 예시1)기본 스타일 시트를 내장하고 있는 "h1 태그"를 사용자가 별도의 스타일 속성으로 적용하게 되면h1{ font-size:16px; font-weight:normal;}기본 스타일 시트보다 우선순위가 높은 사용자 정의 스타일 속성으..

다양한 선택자를 어떻게 조합해서 사용할 수 있을까?      선택자 조합의 기본 --선택자는 "태그명", "클래스", "id", "속성" 등을 조합해서 사용할 수 있다.조합 방법에 따라 정확한 요소 선택이 가능하며, 스타일 적용 범위도 더 정밀하게 설정할 수 있게 된다. 태그  :  태그명클래스  :  .클래스명id   :  #아이디명속성  :  [속성명] 또는 [속성명="값"]--    문법적 허용 조합 선택자  ( 구분자 : 없음 ) --별도의 구분자 없이 바로 이어서 "태그", "클래스", "id", "속성"을 결합하여 중첩된 조건의 선택자를 사용할 수 있다. 기본 형식선택자1선택자2선택자3... { /* CSS 코드 */ } 예시 코드div.box { /* CSS 코드 */ }div태그이면서 cl..

가상 요소 선택자와 가상 클래스 선택자는 무엇인가?      가상 요소 선택자 (Pseudo-elements) --가상 요소 선택자는CSS에서 특정 요소의 부분에 스타일을 적용할 때 사용한다. HTML 문서에 명시적으로 작성된 구성 요소는 아니지만,마치 존재하는 것처럼 취급하여 선택하는 선택자 지정 방법으로"::"기호를 통해 기준 선택자와 함께 사용된다.만약 "기준 선택자"를 생략하면 전체 선택자가 들어간 것으로 적용된다. 기본 형식기준 선택자::가상 요소 선택자 { /* CSS 코드 */ } 일부 가상 요소 선택자 종류 예시 코드 안녕하십니까요. --    가상 클래스 선택자 (Pseuod-class) --가상 클래스 선택자는요소의 특정 상태를 이용하여 선택자를 지정하는 방법으로특정 상태에 있을 때만 ..

선택자를 어떻게 조합하여 사용할 수 있을까?      그룹 선택자 --여러 선택자를 정의하여 하나로 그룹을 지을 때 사용된다.여러 선택자를 콤마(,)를 이용하여 구분한다. 기본 형식선택자1, 선택자2, ... 선택자n{ /* CSS 코드 */ } 예시 코드p, #title, .red{ color:red;}p 태그, id 속성 값이 title인 태그, class 속성 값이 red인 태그(요소) 모두 글자 색상을 빨간색으로 스타일한다.--    자식 선택자 --부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용되며">" 기호를 통해 부모와 자식을 구분한다. 기본 형식부모 선택자 > 자식 선택자 { /* CSS 코드 */ } 예시 코드.box > p { color:red;}class 속성의 ..

기본 선택자를 정의하는 방법은 무엇이 있을까?      전체 선택자 --전체 선택자를 사용하는 방법은HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로"html", "head", "title", "style", "body" 태그 등 모든 요소를 선택자로 정의한다. 기본 형식*{ /* CSS 코드 */} 예시 코드 제목 내용 --    특정 태그 선택자 --HTML의 특정 태그를 지정하여 선택자로 정의하는 방법으로특정 태그명과 일치한 모든 요소를 한 번에 선택하여 CSS를 적용한다. 기본 형식태그명{ /* CSS 코드 */} 태그 선택자 p태그에 작성한 글입니다. p태그에 작성한 글입니다.2--    아이디 선택자 --HTML 태그에서는 "id 속성"을 사용할 수 있는데해당..