Language/CSS

동적으로 기존 속성 값을 변경은 어떻게 할까?      전환 --전환은한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것이다. 예시 코드 위 방법처럼 :hover를 통해 빨간색 박스에 마우스를 올리면 파란색 박스로 변하는 것을 전환이라고 하는데이러한 전환 효과를 직접 속성으로 지정할 수 있게 "전환 효과 속성"이 존재한다. --    transition-property 속성 --전환 효과를 적용할 대상 속성을 지정하는 속성이다. 기본 형식transition-property: 속성값; 속성 값에는 전환 효과의 대상이 되는 속성명 or 정해진 키워드를 사용한다.속성명none  :  전환 효과 속성을 지정 X (기본 값)all  :  모든 속성을 전환 효과 대상으로 지정 예시 코드/* ba..

요소는 어떻게 배치할 수 있을까?      position 속성 --HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치하는 속성이다. 기본 형식position: 속성값; 좌표는 (x, y, z-index)로 존재한다.x  :  가로y  :  세로z-index  :  앞, 뒤 순서 (어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 가려지는지)모든 요소의 z-index 기본 값은 0이다.   relativestatic처럼 요소의 기본 흐름에 따라 배치된 후, 배치된 현재 위치를 기준으로 좌표 속성을 통해 추가 이동할 수 있다.  예시 코드   absolute좌표의 기준점은 가장 가까운 부모 요소의 위치(현재 위치)가 기준점이다.  예시 코드  1. 초록색 박스는 왜 ..

배경은 어떻게 구성할까?      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) --가상 클래스 선택자는요소의 특정 상태를 이용하여 선택자를 지정하는 방법으로특정 상태에 있을 때만 ..