전체 글

텍스트와 관련된 속성은 무엇이 있을까?      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 속성"을 사용할 수 있는데해당..

CSS는 어떤 식으로 작성할까?      문법 형식 --CSS의 문법은 크게 "선택자"와 "선언부"로 구분된다.  선택자  :  CSS스타일을 적용할 HTML 태그(요소)를 선택하는 영역선언부  :  "선택자"에서 선택한 태그에 적용할 스타일을 작성하는 영역 (중괄호 사용)"선언부"에 작성하는 스타일은 반드시 "속성"과 "값"을 한 쌍으로 작성해야 하며,값 뒤에는 세미콜론(;)을 넣어야 하며, 여러 스타일을 연속하여 작성 또한 가능하다.  예시 코드h1{ font-size: 24px; color: red;}해당 코드는h1 태그에 사용된 텍스트 크기를 24px, 색상은 빨간색으로 지정하는 코드다.--    주석 --CSS에서도 주석을 담을 수 있다. 기본 형식/* 주석 내용 */자바처럼 "//"는 ..

태그에 공통으로 사용할 수 있는 태그는 무엇이 있을까?      글로벌 속성 --글로벌 속성은태그 종류에 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성을 의미한다. --    class 속성 --요소에 클래스명을 지정할 때 사용하며해당 클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복하여 가질 수 있다. 기본 형식 . . . --    id 속성 --요소에 아이디를 지정할 때 사용되며아이디는 CSS에서 아이디 선택자로 활용하며, 중복된 값은 사용할 수 없다. 기본 형식 . . . --    style 속성 --CSS 코드를 인라인으로 작성할 때 사용된다.--    title 속성 --요소에 추가 정보를 넣을 때 사용된다.(요소에 마우스를 올리면 툴팁으로 표시된다.)..