개발벤제마

오늘은 z-index속성에 대해 살펴보겠다z-index란 요소의 쌓임 순서(stack order)를 정의하는 속성이다정수 값을 지정하여 쌓임 맥락(stack context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.여기서 위치 지정 요소(positioned element)란 position 속성이 정의되어 있는 요소를 말한다.쌓임 맥락(stack context)란? 동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 되는데 이를 쌓임 맥락(stact context)라고 한다z-index의 기본값은 auto인데, 이는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태를 일컫는다.z-index를 사용하면 z축의 값을 임의로 조작함으로써 이러한 현상이 일..

오늘의 포스팅을 시작하겠다. CSS에서 상속은 매우 중요한 개념이다. 상속이란 부모 요소에서 설정된 스타일이 자식 요소에게 전달되는 과정을 말한다. 이 과정은 웹 페이지의 디자인을 효율적으로 관리하는 데 큰 도움이 된다. 예를 들어, 만약 부모 요소에 글꼴 색상을 설정하면, 자식 요소는 별도로 색상을 지정하지 않는 한 부모의 색상을 그대로 물려받는다. 이렇게 상속을 통해 코드의 중복을 줄이고, 일관된 스타일을 유지할 수 있다.상속되는 CSS 속성에 대해 알아보겠다. 일반적으로 텍스트 관련 속성들이 상속된다. 예를 들어, color, font-family, font-size, line-height와 같은 속성들은 자식 요소가 부모 요소의 스타일을 물려받는다. 이 덕분에 웹 페이지의 텍스트가 일관되게 보이게..

오늘은 의사 요소에 대한 부분을 다뤄보도록 하겠다. 지난 8주차에서 다뤘던 의사 클래스와는 다르므로 헷갈리지 말자.의사 요소는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 지정할 수 있다.위 의사요소들 말고도 더 궁금하다면?---> https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements 이 사이트를 참고하자.자 이제 코드로 알아보자.오늘의 코드는 다음과 같다.!DOCTYPE html>html lang="en"> head>meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Real Ma..

오늘의 정리를 시작하겠다.의사 클래스는 선택자에 추가하는 키워드이며 요소가 특정한 상태가 되었을 때 요소를 선택하고 특정 작업을 수행하겠다는 의미가 된다. 또한 콘텐츠 자체적인 내용뿐만 아니라 사용자와의 상호작용과 관련된 경우에도 스타일 적용이 가능해 유용하다. 이제 예제를 보자!DOCTYPE html> html lang="en"> head>meta charset="UTF-8"> meta name="viewport" content="width= , initial-scale=1.0"> title>Document/title> style> * { background-color: black; /* 모든 요소의 배경색을 검정색으로 설정하여 통일감 제공 */ }  /* .container 클래스를 가진 요소에 대한..

CSS 7일차 공부한 내용 정리 시작하겠다.특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택하는 선택자이다.예를 들면두 개의 사진 중 위에 있는 사진은 클래스 속성을 가진 요소를 선택하는 방법이고 아래 있는 사진은 클래스가 "item"인 요소를 선택하는 방법이다. 보면 선택자 부분이 대괄호로 묶여있는데 이것이 특성 선택자의 기본 형태이다.기호를 추가하여 요소를 선택하는 방식을 다양화할 수도 있다. 예를 들면맨 위의 코드는 클래스 값에 "it"이 포함되는 것을 선택하는 방법이고, 가운데의 코드는 클래스 값이 "it"으로 시작하는 것을 선택하는 방법, 마지막 코드는 클래스 값이 "it"으로 끝나는 것을 선택하는 방법이다.우선 예제를 통해 알아보자!DOCTYPE html> ht..

안녕하세요!!! CSS 2일차 공부 내용 정리해보겠습니다  텍스트 관련 CSS속성 1. font-family: 글꼴을 지정한다 2. font-size: 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px: 모니터 상의 화소 하나 크기에 해당하는 절대적인 크기 rem; 태그의 font-size에 대응하는 상대적인 크기 em: 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기 3. text-align: 블록 내에서 텍스트의 정렬 방식 정의 4. color: 텍스트 색상 정의 ex) 1. color: red; 2. color: #ff0000; 3. color: rgb(100%, 0%, 0%)이제 코드 예시를 보여드리겠습니다.DOCTYPE html>html lang="en">head>   ..

종강을 하고 방학을 하니 할 것도 없고 심심하던 찰나, 갑자기 생각난 학기 중 수업 내용. 복습 겸 유튜브 강의를 찾아보며 공부한 내용을 올려본다.CSS 기본 양식 선택자 {        속성명: 속성값         }DOCTYPE htmlhtml lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>율리우스 카이사르title>    style>        p {            color: #ffffff;/*하얀색으로 글자가 표시됨*/            font-size: 4rem;        }        body {    ..

위의 코드를 메모장에 적고 ctrl+shift+s를 눌러 [다른 이름으로 저장]을 한 다음 확장자명을 html로 변경한다그러면 다음과 같은 사이트(?)가 생성될 것이다.이것을 더블클릭하면 다음과 같다.위 코드를 비주얼 스튜디오에서 디버깅 했더니 오류 메시지가 뜬다.그 이유는 HTML이 컴파일 언어가 아닌 마크업 언어라서 그런 것이다.컴파일 언어와 마크업 언어의 차이를 정리하면 다음과 같다.