Css 3) Study

                                        
                                            /* id 스타일 */
                                            #idName { .. } /* idName ID를 가진 요소 */
                                            h1#idName { .. } /* idName ID를 가진 h1 태그 */ 
    
                                            /* class 스타일 */
                                            .className { .. } /* className 클래스를 가진 요소(들) */
                                            p.className1 { .. } /* className1 클래스를 가진 p 태그(들) */
                                            p.className1.className2 { .. } /* className1, className2 클래스를 함께 가진 p 태그(들) */
                                        
                                    

➥ ID를 사용하는 것 외에 달리 방법이 없는 특별한 경우가 아니라면; 대부분의 경우 요소에 #id 대신 .class를 사용하는 것이 미처 예기치 못한 에러의 가능성을 방지한다는 차원에서 더 유익하다!

☞ 여기서 <div>는 내부 모든 요소들을 포함하는 최상위 조상 이 되고, 아래 <p> 요소들은 그 자식들 이 된다(서로는 형제간 이다). 각 <p> 요소들은 또 그 밑에 <b> 및 <i>라는 자식 을 거느리고 있다(<p>와 <b> 및 <i> 모두 <div>의 후손들 이다). 각 <p> 요소들은 그 부모 <div>와 관련하여 자식 이 되며, 그 자식 <b> 및 <i>와 관련해서는 부모 가 된다 ← 이러한 관계는 각각에 대해 서로 상대적이다!

                                        
                                            div p { .. } /* div에 속한 모든 p 요소들(후손들: 자식, 손자, ..) */
                                            div > p { .. } /* div 내부 바로 밑 단계에 위치한 p 요소들(자식들) */
                                            h1 ~ p { .. } /* h1과 같은 단계에서 뒤에 나오는 모든 p 요소들(모든 형제들) */
                                            h1 + p { .. } /* h1과 같은 단계에서 바로 뒤에 나오는 p 요소 하나(바로 아래 형제) */
                                        
                                    

➥ Css 선택자는 위쪽을 대상으로 선택할 수는 없고, 오직 하위 요소를 대상으로 하여 아래쪽으로만 선택할 수 있다 는 점은 기억해둘만한 가치가 있다!

* cf) 참고로, 앞쪽의 > 기호에 뒤쪽에도 > 기호가 있네요. 아마도 같은 기호 사이에서는 뒤에서부터 계산해오는 듯한데.. 이런 경우에는; 같은 넘들끼리 우선순위를 따지기보다는 괄호를 사용해주는 것이 좀 더 알기쉽고 깔끔할 듯합니다. 이하, 모두,, 직접 코딩하고 하나 하나 따져보면서 스스로 결과를 확인해보십시오..

(! 밑에도 또 다른 코드가 하나 붙어있군요. 위와 같은데, $이 2개네요? 직접 코딩하여 확인해보시라고 답은 적지 않았습니다 ㅡㅡ;)

                                    
                                        ul>li.class$$*3 ⤶
                                    
                                

░ 이 외에도 더 많은 복잡한 표기법들이 있지만, 다 살펴볼 필요는 없을 듯합니다. 한 예로, p{텍스트} ⤶ 방식으로 태그와 함께 안에 들어갈 텍스트도 동시에 넣어줄 수 있지만, p ⤶ 하고나면; 곧바로 커서가 텍스트 입력 위치에 놓여져 바로 내용을 적을 수 있고, 여러 곳에 같은 것을 입력할 경우에도 Alt+드래그 및 Ctrl+클릭이 있으니 굳이 더 어렵게 기억하며 다 배워야할 필요는 없다는 생각입니다 - 솔직히, p{텍스트} ⤶ 하는거보다는 p ⤶ 한 뒤, 커서가 놓여지는 곳에서 바로 텍스트라고 적는게 더 속 편하네요, 에밋코딩 기법들 다 배우자면 두뇌 훈련에는 상당히 유용할 듯하지만.. 그런 목적이 아니라면; 코딩 시의 단순 손노동을 줄여주는데 필요한 정도로만 익혀두어도 될 듯합니다 ^^

                                    
                                        .my-component {
                                            font-weight: 500;
                                        } .my-component strong { /* strong 요소의 브라우저 기본(= initial) font-weight 값은 700이지만, */
                                            font-weight: inherit; /* .my-component 내부의 strong 요소에는 font-weight: 500;을 상속(= inherit)받도록 한다 */
                                        }
                                    
                                

☞ 위와 같이 inherit 키워드를 사용하면; 상위요소의 '계산된 값'을 상속받도록 할 수 있다 ← 따라서, 나중에 .my-component 값을 바꾸면; 그 하위 요소에서도 자동적으로 그 바뀐 값이 적용된다!

                                    
                                        aside strong {
                                            font-weight: initial; /* 이는 Css 초기값인 font-weight: 700; 값이 된다 */
                                        }
                                    
                                

☞ initial 키워드는 속성을 Css 초기 기본값으로 되돌린다!

➥ 박스모델 속성 등 공간에 관련된 것들(border, margin, padding, ..)은 상속되지 않으며, 부모요소 내부의 <button> 태그에서도 역시 상속되지 않는다!

☞ <button> 태그 내에서 부모요소의 속성을 상속받고자 한다면; 위와 같이 명시적으로 inherit 값을 지정해주어야 한다!

                                    
                                        /* [상속의 초기화: unset 키워드] */
                                        .div_style_set p { /* .div_style_set 내부의 p 요소들에 대한 공통 스타일 설정 */
                                            padding: 1em; color: goldenrod;
                                        } .div_style_set p.div_unset { /* .div_style_set 내부의 특정 p 요소들에 대한 unset 스타일 설정 */
                                            color: unset;
                                        }
                                    
                                

☞ 위 코드에서는 색상만 초기화했지만(color: unset;), 대신에 all: unset;으로 주면; .div_style_set p.div_unset에 기존 설정된 다른 모든 스타일 설정들까지 다 initial 초기값으로 돌아간다!

나는 무슨 색입니까?

                                    
                                        .green { color: green; } /* .green 클래스의 글자색 설정 */
                                        p { color: blue; } /* p의 글자색 설정 */
                                    
                                

☞ <p> 요소의 글자색 설정이 .green 클래스의 글자색 설정보다 나중에 정의되었지만, (구체적 우선순위에 의해)먼저 정의된 .green 클래스의 글자색이 적용되었다!

➥ ID는 Css를 더욱 구체적으로 만들므로 ID에 적용된 스타일은 다른 많은 방법으로 적용된 스타일을 재정의한다 - 이런 이유로 id에 스타일을 추가하는 것은 좋지 않다 ← 곧, 해당 스타일을 다른 것으로 덮어쓰기가 어려울 수 있다!

나는 무슨 색입니까?

                                    
                                        p { color: blue; font-style: italic; }
                                        p { color: green; } /* 위 p 요소 스타일(의 중복된 속성만)을 덮는다 */
                                    
                                

☞ 위 중복된 <p> 요소 스타일에서 덮어 쓰는 것은 스타일 전체가 아니라 동일한 속성만이다 - 이러한 메카니즘은 스타일 정의의 반복을 피할 수 있도록 해준다 ← 곧, font-style: italic;은 그대로 둔 채 중복된 color 속성의 값만 새 값으로 덮는 것이다!

➥ 단, 위에서 말한 우선순위들은 그저 대략적인 원칙일 뿐, 실제는 많은 복잡한 규칙들의 조합으로 결정됩니다 - 대개는 그때, 그때,, 코드 확인하면서 해결해나가야만 합니다 ← [브라우저 개발자 화면]의 [요소] 탭에서 문제가 있는(취소선이 그어진) Css 속성들을 확인할 수 있습니다..

• cursor: default / none; // 일반 커서의 모양 ← auto (기본값)는 현재의 맥락에 맞추어 자동으로 커서 모양이 결정되며, default 는 각 플랫폼에 따르는 기본 커서를 쓰며, none 은 커서를 숨긴다
• cursor: 키워드; // 각각의 키워드로 지정한 커서 모양 ← 링크 및 마우스 오버 시의 상태, 선택 상태, 드래그&드롭, 크기 조절 및 스크롤, 확대/축소 등에 따르는 각각의 커서 모양
• cursor: url('이미지파일') x값 y값, auto; // 이미지로 커서 모양 지정 ← 맨 뒤에 일반 커서도 반드시 포함해야 하며, x, y 값은 박스 좌상단 모서리를 기준으로 하는 좌표 거리인데 32px 미만이어야 한다!

☞ 원한다면; body에 위 webfont_lead 사용자정의 클래스를 적용하여 문서 전체에서 사용할 수도 있다!

➥ 뷰포트에 따르는 크기 설정은 웹디자인에 유용하게 사용된다: 예컨대, 웹페이지의 시작 섹션을 컨텐츠의 나머지 부분보다 먼저 표시하려면, 페이지의 해당 부분을 100vh 높이로 설정해주면; 나머지 컨텐츠는 뷰포트 아래로 밀려나서 문서가 스크롤된 이후에만 표시된다!

➥ 뒷 배경이 그대로 보이는, 즉 완전한 투명을 의미하는 transparent 키워드도 사용할 수 있는데, 이는 rgba(0, 0, 0, 0)와 같다. 한편, currentColor 키워드는 color 속성의 계산된 동적 값이다. 예컨대, currentColor를 정의하는 요소에 정의된 색상값이 없는 경우; 대신 상위 부모요소의 색상을 물려받게 된다. Background(바탕화면 배경색), Highlight(선택한 항목에 대한 강조 색상) 등은 시스템 운영체제에 의해 정의되는 색상명이다(대소문자를 구분한다!)

• 16진수 표기법: #rrggbb(#000000 =black, #ffffff =white) 및 #rgb(#000 =black, #fff =white)
• rgb[a] 표기법: rgb[a](0~255, 0~255, 0~255 [, 1~0]); // red(255,0,0), green(0,255,0), blue(0,0,255) [, alpha] ← 각 값들은 ,로 구분하여 표기한다(255, 255, 255, 0.5)
• hsl[a] 표기법: hsl[a]([0~360deg, ]0~360, 0~360, 0~360 [, 1~0]); // [색상환 각도, ]색상환, 채도, 밝기[, alpha] ← alpha 값은 1 및 100%(불투명)에서 0.5 및 50%(중간), 0(투명)까지

➥ 최근에는 모든 브라우저에서 rgb()와 hsl()에 alpha, 곧 불투명도를 추가할 수 있게 되었고, 이것이 표준 표기법이다 - 각 값들을 빈칸으로 구분하여 넣어주면 되는데, alpha 값은 /로 구분해서 넣어주는 것이 좋다: color: rgb(255 255 255 / 50%); ← 불투명도에는 % 단위나 소수점 단위(= 0.5) 모두 사용할 수 있다!

                                                
                                                    .colors_element {
                                                        width: auto; height: 200px;
                                                        color: white; /* 글자색 */
                                                        background: linear-gradient(#a0d068, #3e6f3b); /* 그라디언트 배경색 */

                                                        /* 테두리 및 테두리 색상 */
                                                        border: 10px solid; border-radius: 10px;
                                                        border-top-color: lightsteelblue; border-right-color: lightsteelblue; border-bottom-color: lightslategray; border-left-color: slategray;

                                                        box-shadow: 0px 0px 20px rgb(0 0 0 / 30%); /* 박스 그림자 색상 */
                                                    }
                                                
                                            

☞ 위 <div> 요소의 배경색은 검정색이지만(background-color: rgb(0 0 0);), 여기에 0.1의 알파값을 주어 배경색을 투명하게 해준 것이다: background-color: rgb(0 0 0 / 0.1);

➥ 요소에 마우스가 올라갈 때의 주목도를 높이기 위해, 요소에 불투명도(및 확대 효과)를 주는 경우가 많다:

                                    
                                        /* 요소에 마우스를 올리면; 불투명도 값을 0.5(opacity: 0.5)로 설정하고, 요소의 크기는 10% 더 확대하라(zoom: 1.1) */
                                        .img-opacity:hover { opacity: 0.5; zoom: 1.1; }
                                    
                                

✓   문서 좌표계는 렌더링된 전체 웹문서의 좌상단 모서리를 기준으로 한다. 즉, 문서 내의 요소 안에 있는 점은 레이아웃이 변경되어 요소가 이동하지 않는 한 사용자가 문서에서 수평 또는 수직으로 스크롤한 후에도 동일한 좌표를 가지게 된다 ← 하지만, 일반적으로, 웹문서에서 문서 좌표는 별 의미가 없다 - 웹문서는 항상 스크롤된다!

* 이 그림은, 좌표계에 대한 이해를 돕기 위해 CssOM 표준 좌표계 문서에서 잠시 빌려온 것입니다:

• border: 색상 두께 스타일; // 4방면 모두의 테두리 색상, 두께, 스타일 일괄 지정 ← 순서는 상관없되, 생략된 부분의 기본값은 none 으로 설정된다!
• border-color: 테두리 색상;
• border-width: 테두리 두께; ← 단위는 px
• border-style: solid / dashed / dotted / double | groove / inset / outset / ridge | hidden; // 테두리 스타일 ← 기본값: solid (= 실선)

* cf) border-top/right/bottom/left: 값; 식으로 각 방향별로, 또 border-top/right/bottom/left-color/width/style: 값; 식으로 각 방향(및 스타일)별로 설정해줄 수도 있다!

➥ 박스 윤곽선(예컨대, Tab 키 등에 의해 링크 텍스트가 선택된 때 등)을 표시하는 outline 속성도 또한 border 속성과 같은 방식으로 사용해주면 된다 ← 다만 이 외곽선은, 테두리와는 달리, 요소 바깥에 그려지며 절대 공간을 차지하지 않는다!

Box 그림자

☞ 여기서는 수평거리 및 수직거리 에다 색상 옵션을 추가하였다

➥ font: font-size값 / line-height값; 속성으로 font-size 값과 line-height 값을 함께 지정해줄 수도 있다: 값을 %로 줄 경우; font-size 값은 부모요소를, line-height 값은 현재 요소를 기준으로 하는데, 부모요소의 높이(= height)와 같은 line-height 값을 주면; (한 줄)텍스트를 세로 방향 가운데로 배치할 수 있다!

텍스트 센터링

• baseline; // 인라인 요소의 기준선을 부모요소의 기준선에 맞춤(기본값)
• top / bottom / middle; // 인라인 요소의 위/아래/가운데를 부모요소의 가운데에 맞춤
• 값; // 기준선을 0px로 놓고 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮김
• %; // 기준선을 0%로 놓고 line-height의 몇 %인지에 따라 양수면 위로, 음수면 아래로 옮김

                                                    
                                                        /* [Css 3) 불릿을 이미지로 대체하기] */
                                                        .image-list-icon {
                                                            padding-left: 3rem;
                                                            list-style-type: none;
                                                        } .image-list-icon li {
                                                            padding-left: 1.5rem;
                                                            background-image: url("_img/external-link-26.png");
                                                            background-position: 0 0.3rem;
                                                            background-size: 1rem 1rem;
                                                            background-repeat: no-repeat;
                                                        }
                                                    
                                                

➥ list-style: type position image; 방식으로 리스트 속성을 일괄 지정해줄 수도 있다 ← 순서는 상관없지만.. 생략된 값은 Css 기본값으로 설정된다는 점은 알아둘 필요가 있다!

☞ 위 코드의 선택자를 div :first-child 및 div *:first-child로 대체해도 같은 결과를 가져온다!

                                    
                                        .link_hover_ex:hover {
                                            color: white; background: rgb(130, 163, 91); text-decoration: none;
                                        }
                                    
                                

                                    
                                        .btn_active_ex:active {
                                            transform: scale(1.05); color: red;
                                        }
                                    
                                

                                    
                                        p:not(#exNot) { color: blue; } /* id가 exNot인 p만 제외한 모든 p 요소 */
                                    
                                

                                    
                                        article :is(h1, h2, h3) { .. } /* atticle 안에서 h1, h2, h3를 모두 찾는다 */
                                    
                                

☞ :is 의사클래스에 전달된 선택자에 오류가 있어도 잘못된 선택자만 무시함으로써 (오류를 내지 않고)유효한 선택자만 선택한다는 점에서 atticle h1, atticle h2, article h3 { .. }로 작성하는 것에 비해 좀 더 관대하다!

                                    
                                        .post_wysiwyg :empty { display: none; }
                                    
                                

☞ 이 의사 클래스는 html을 거의 제어할 수 없고 WYSIWYG 편집기와 같은 빈 요소를 숨기려는 경우에 유용하게 쓰일 수 있다!

                                                    
                                                        .ol-1 li:first-child { background: rgb(191, 227, 247); } /* 부모(.ol-1) 밑 자식 중 장남 */
                                                        .ol-1 :last-child { background: rgb(236, 236, 186); } /* 부모(.ol-1) 밑 자식 중 막내 */

                                                        /* 부모가 어떤 ul이나 ol이건간에.. 부모 아래 유일한 독자로 태어난 li */ 
                                                        li:only-child { color: red; } /* .ol-1 :only-child { color: red; } 식으로 해도 같다! */
                                                    
                                                

                                                    
                                                        .my-parent :first-child { /* .my-parent 아래, 첫번째 자식*/
                                                            color: blue;
                                                        }
                                                        
                                                        .my-parent div:first-of-type {  /* .my-parent 아래, div 타입 중 첫번째 */
                                                            color: red;
                                                        } .my-parent div:last-of-type {  /* .my-parent 아래, div 타입 중 맨 끝 */
                                                            color: goldenrod;
                                                        } /* 아래 코드도 또한 작동됩니다: 아래 코드의 주석을 풀어준 뒤 확인해보십시오.. */
                                                        /* .my-parent div:last-child { color: green; } */
                                                    
                                                

➥ Css 선택자는 아래쪽으로 내려가면서 선택할 수 있을뿐, 위쪽으로 거슬러 올라가면서 선택하는 방법은 없으니 (애비, 할배에다 증조부, 고조부까지 올라가야 하는)'4대 독자' 찾기는 포기하세요 ㅡㅡ; ← 참고로, 차남 등 중간 자식들을 지정하는 방법은 따로 있습니다..

░ 실제로는 자식과 형제 관계가 그리 명쾌하게 구분되지 않고, 따라서 언제 child 를 쓸지 언제 type 을 쓸지도 애매하고, 거기에 앞에 부모요소를 붙일 때와 그렇지 않을 때의 차이점도 그렇고, 순서 번호도 0 이 시작인지 1 이 시작인지도 명확히 구분되지 않는 경우도 있고 하니.. 실제로 각 상황에 맞춰 그때 그때 직접 결과를 확인해가면서 코딩해야할 것입니다..

                                                    
                                                        .ol-2 li:nth-child(2) {
                                                            background-color: yellow;
                                                        }
                                                    
                                                

                                    
                                        table tr:nth-child(2n+1) { /* n에는 순차적으로 0, 1, 2, ..가 들어간다 ← 곧, 홀수 행들이 된다 */
                                            background:lightgray; color:black;
                                        }                                                    
                                    
                                

☞ 참고로, 단순히 짝수/홀수 라면; 키워드 even/odd 를 사용할 수도 있다!

                                                    
                                                        #doc_structure {
                                                            overflow: hidden;
                                                        } #doc_structure ul {
                                                            list-style: none;
                                                        } #doc_structure li {
                                                            float:left;
                                                            width: 8em; height: 3em;
                                                            line-height: 3em;
                                                            text-align: center;
                                                            border: 1px #818181 solid;
                                                            box-shadow: 1px 1px 2px #bbb;
                                                        }
                                                        
                                                        #doc_structure li a {
                                                            padding: 1em;
                                                            color: #292929;
                                                            text-shadow: 1px 1px 2px #cccccc;
                                                            text-decoration: none;
                                                        }
                                                        
                                                        #doc_structure li:hover {
                                                            background-color: #333333;
                                                        } #doc_structure li:hover > a {
                                                            color: #FFF;
                                                            text-shadow: 0px 1px 0px #fff;
                                                        }
                                                        
                                                        #doc_structure li:first-child {
                                                            border-top-left-radius: 1em; border-bottom-left-radius: 1em;
                                                        } #doc_structure li:last-child {
                                                            border-top-right-radius: 1em; border-bottom-right-radius: 1em;
                                                        }
                                                    
                                                

➥ 이 문서내 위치(순서) 지정 선택자는 가상요소 선택자와 더불어 Css와 JavaScript 등에서 빈번히 사용되긴 하지만, 또한 가장 혼란스러운 선택자이니 여러 상황에서(예컨대, ul 아래 li.. 들이 들어있는 경우와 여러 div 아래 각각의 h4 & p.. 들이 들어있는 경우 등) 직접 여러 상황을 만들어 코딩하면서 수많은 시행착오를 거쳐야만 그 움직임들을 제대로 파악할 수 있습니다 - 그래도 역시 혼란스럽고 애매하긴 합니다, 그저 코딩 시 이넘들은 최대한 피하는게 상책입니다 ㅡㅡ;

[이 앞과 뒤를 채웁니다]

                                    
                                        .before-after::before { content: '(앞)'; color: blue; }
                                        .before-after::after { content: '(뒤)'; color: red; }
                                    
                                

☞ 참고로, 이 코드는 단지 가상요소가 무언가를 보여주기 위한 것일 뿐, 가상요소를 써서 실제로 텍스트 문자열을 넣는 것은 바람직하지 않다!

➥ ::before나 ::after 가상요소가 생성되면 제한없이 원하는 대로 스타일을 지정할 수 있다. 단, ::before나 ::after 요소는 내부에 하위요소를 허용하는 요소(= 문서 트리가 있는 요소)에만 삽입할 수 있다 ← 따라서 <img> 및 <video>, <input>와 같은 태그에서는 사용할 수 없다!

[div::before, div::after]

                                    
                                        .box_before_p::before {
                                            content: "";
                                            display: inline-block; width: 1em; height: 1em; background-color: green;
                                        } .box_after_p::after { content: " ➥"; }
                                    
                                

                                                    
                                                        ul.bullet_list_ex li{
                                                            position: relative; padding-left: 10px; list-style-type: none;
                                                        } ul.bullet_list_ex li::after {
                                                            display: block;
                                                            position: absolute; left: 0; top: 10px; width: 5px; height: 5px;
                                                            background-color: #3c4147; border-radius: 50%;
                                                            content: "";
                                                        } ul.bullet_list_ex.green li::after { background-color: #14d518; }
                                                    
                                                

                                                    
                                                        .style-check2 li {
                                                            position: relative; padding-left: 0.25rem; list-style-type: none;
                                                        } .style-check2 li:before {
                                                            content: '✓';
                                                            position: absolute; top: 0.0625rem; left: -1rem; width: 1rem;
                                                            padding-right: 0.5rem; background-repeat: no-repeat;
                                                            color: goldenrod;
                                                        }
                                                    
                                                

                                    
                                        #your_name::placeholder, #your_email::placeholder {
                                            color: gray; opacity: 0.5;
                                        }
                                    
                                

☞ 가상요소 ::placeholder에 사용가능한 속성들로는 color, background, font- 및 text- 관련 속성 등이 있다

➥ 따라서, 플레이스홀더를 사용하는 대신; 입력필드 외부 가까운 위치에 포함시키고, aria-describedby 속성을 사용하여 <input> 요소와 해당 힌트를 연결해주는 것도 좋다 - 이를 통해 입력필드에 컨텐츠가 입력되어도 힌트 내용은 계속 제공되며, 페이지가 로드될 때 입력필드에는 사전 입력된 내용 없이 나타나게 된다:

                                    
                                        video::backdrop { background-color: goldenrod; }
                                    
                                

                                    
                                        video::cue { color: green; }
                                        video::cue(i) { color: pink; }
                                    
                                

• html 5
• Css 3
• Bootstrap 5

                                    
                                        .ul_marker_ex ::marker { color: rgb(239, 97, 168); }
                                    
                                

☞ 가상요소 ::marker에 사용가능한 속성들로는 글자색(color), font 관련(font-size, font-weight 등), 텍스트 관련(white-space 등), content, animation 및 transition 속성 등이 있다 ← 바로 위에서 엄청 복잡한 Css 스타일 설정을 통해 리스트 불릿 색상을 바꿔봤는데, 이 방식이 훨씬 간결하군요 ^^

                                                    
                                                        ul.list-marker {
                                                            list-style-type: "⪧";
                                                        } ul.list-marker li { padding-left: 0.5em; }
                                                        
                                                        .list-marker ::marker { color: orangered; }
                                                        
                                                        .list-marker-h4 {
                                                            display: list-item; margin-left: 2rem;
                                                        } .list-marker-h4::marker { content: " ¶ "; }
                                                    
                                                

➥ 이처럼, 무엇이든 목록 리스트 뷰로 변환할 수는 있지만.. 실제 목록의 경우에는 올바른 목록 마크업을 사용하는 것이 사용자 접근성의 측면에서 바람직하다!

                                    
                                        .details_marker ::marker {
                                            color: green; font-weight: bold; /* 색상과 글자 굵기 설정 */
                                        }
                                        
                                        .details_marker summary::marker { /* 닫힌 상태에서의 마커 */
                                            content: '+ '; /* + 기호와 공백으로 변경 */
                                        } .details_marker[open] summary::marker { /* 열린 상태에서의 마커 */
                                            content: '- '; /* - 기호와 공백으로 변경 */
                                        }
                                    
                                

➥ 복수의 <details> 요소에 같은 name= 값을 주어 여러 <details> 요소를 그룹화하여 한 번에 하나씩(만!) 열리도록 할 수 있는데, 이를 이용하면 자바스크립트 없이도 아코디언과 같은 UI(예컨대, FAQs 게시판 등)을 쉽게 만들 수 있다!

                                    
                                        /* 큰 문단 첫글자: .dropcap::first-letter */
                                        .dropcap::first-letter {
                                            font-size: 3em; line-height: 0.92; margin-right: 0.375rem;
                                            float: left;
                                        }
                                    
                                

☞ 가상요소 ::first-letter에 사용가능한 속성들로는 color, 배경 관련(background-image 등), 테두리 관련(border-color 등), 글꼴 관련(font-size, font-weight 등), 텍스트 관련(text-decoration, word-spacing 등), float 등이 있다

                                    
                                        
                                            .firstline_ex p:first-child::first-line { /* .firstline_ex 아래에 있는 첫번째 p의 첫번째 줄 */
                                                font-style: italic; color: goldenrod;
                                            }
                                        
                                    
                                

☞ 가상요소 선택자 ::first-line에 사용가능한 속성들로는 color, 배경(background), font- 및 text- 관련 속성 등이 있다

(* 이 <p> 문단 내에서 드래그해보세요.. )

                                    
                                        /* [선택한 영역 ::selection] */
                                        p::selection { color: white; background: orange; }
                                    
                                

☞ 가상요소 ::selection에 사용가능한 속성들로는 color, background-color, text- 관련 속성 등이 있다

                                    
                                        .container :is(h1, h2, h3) { line-height: 1.5; }
                                    
                                

☞ 위 :is() { .. } 함수는 Css 선택자를 인수로 받는데, 인수로 받은 선택자와 일치하는 항목이 있는 경우 { .. } 내부의 Css 규칙이 적용된다!

                                    
                                        :root { --default-color: green; } /* Css 변수 --default-color 선언 및 값 설정 */
                                        
                                        .def-color { /* 사용자정의 속성 .def-color 선언 */
                                            /* var(); 함수를 써서 Css 변수 --default-color에 담긴 값을 가져온다 */
                                            background-color: var(--default-color); /* 사용자정의 속성 .def-color의 배경색 설정 */
                                        }
                                    
                                

☞ 위 코드의 var(--default-color); 함수는 값으로 반환하려는 Css 변수(--default-color)을 인수로 사용하며, 해석된 값을 반환한다 ← 참고로, Css 변수 앞에는 --를 붙여야 하며 대소문자를 구분한다!

                                        
                                            :root { /* 1. Css 변수 --main-bg-color를 선언한다 */
                                                --main-bg-color: pink; /* Css 변수에 값(pink)을 설정한다 */
                                            }
                                            
                                            body { /* 2. Css 변수값을 body의 background-color에 속성값으로 넣는다 */
                                                background-color: var(--main-bg-color); /* Css 변수값을 가져오기 위해 var(); 함수를 사용한다 */
                                            }
                                        
                                    

➥ 스크립트에서는 Css에서 표준 속성을 사용하는 것과 같은 방식으로 Css 변수값을 넣어주면 된다: 대상요소.style.setProperty("--my-var", myValue + 1);

                                    
                                        :root { --root-height: 5rem; }
                                        
                                        .my-element {
                                            height: calc(var(--root-height) * 3);
                                        }
                                    
                                

                                    
                                        .inner_calc_box {
                                            width: calc(100% - 1em);
                                            margin: 0 auto;
                                            color: white; background-color: grey;
                                        } .inner_calc_box p { text-align: center; }
                                    
                                

                                    
                                        .calc_input { /* 입력 영역의 전체 너비에서 양끝으로 1em의 여백을 준다 */
                                            display: block; width: calc(100% - 1em); padding: 4px 8px;
                                        }
                                    
                                

➥ calc(); 함수를 써서 텍스트 크기를 조절할 때는 피연산자 중 하나는 반드시 상대길이 단위를 사용해주어야 한다. 그래야만 페이지 확대/축소 시에도 그 비율이 일정하게 유지될 수 있다: font-size: calc(1.5rem + 3vw);

                                    
                                        body {
                                            margin: 0 auto; /* 가로 정중앙 배치 */
                                            width: min(1024px, calc(70% + 100px)); /* 둘 중 더 작은 값이 선택된다! */
                                        }

                                        p { font-size: max(1.2rem, 1.2vw); } /* 둘 중 더 큰 값이 선택된다! */
                                    
                                

World

                                    
                                        [data-hello]::before { content: attr(data-hello) " "; }
                                    
                                

➥ 예컨대, a::after { content: attr(href); }라면; 여기서, attr(); 함수는 <a> 요소의 href 속성값을 가져와서 ::after 가상요소의 content로 설정한다 ← 곧, <a> 요소의 href 속성값을 변경하려는 경우; 이 content 속성에 자동으로 반영되는 것이다!

                                    
                                        .container { background-image: url('/images/image.jpg'); }
                                    
                                

➥ 문서 전체의 쓰기모드는 <html> 요소의 전역 속성인 dir를 사용하는 것이 좋다: <html lang="ar" dir="rtl">

➥ 마찬가지로, min-width와 min-height는 min-inline-size와 min-block-size로, max-width와 max-height는 max-inline-size와 max-block-size로 매핑된다. 또한, 물리적 단위 vw와 vh에 대응하는 논리적 속성 단위에는 vi와 vb가 마련되어 있는데, 이 단위는 항상 읽는 방향으로 매핑된다!

☞ 여기서는 서로 다른 문서 방향인 ltr 과 rtl 에서 아이콘 옆 텍스트와의 마진 간격을 설정하는데, 논리적 마진을 사용함으로써 문서 방향이 정반대임에도 동일한 결과를 가져오고 있다!

                                                    
                                                        .my_box_ex {
                                                            background-color: gray;
                                                            padding-block-start: 16px; /* 상단 패딩 */
                                                            margin-inline-start: -1em; /* 좌측 마진 */
                                                        }
                                                        
                                                        .h5_labeled_y {
                                                            writing-mode: vertical-lr; /* 세로 쓰기모드로 변경 */
                                                            margin-inline-start: 2em; /* 상단 마진 */
                                                        }
                                                    
                                                

웹문서에서 이미지와 텍스트를 나란히 배치하고자 할 때, 이미지에 float: 속성 값으로 right를 주면; 이미지는 우측에서부터 배치되는데.. 이 때 너비값은 이미지 표시에 필요한 만큼만 차지하고 나머지 영역은 비워지면서 이 빈 영역에 텍스트가 자리잡게 된다 ← float 속성을 사용할 때 플로팅 요소 다음에 오는 요소의 레이아웃이 무너질 수 있으므로, 반드시 플로팅을 해제해주어야 한다!

(* 다음에 나오는, 이 <p> 요소에서 <p style="clear:both;">로 플로팅을 해제함 )

                                                    
                                                        /* 여기서(곧, .ex_bxx5 요소 앞에서) 플로팅 해제함 */
                                                        .ex_bxx5::before { /* 플로팅 해제용 가상요소 */
                                                            content: ""; display: block; clear: both;
                                                        }
                                                    
                                                

➥ 플로팅을 해제하기 위해서는, 부모요소 자체에서 overflow: hidden;이나 overflow: auto; 속성값을 설정해주어도 되지만, 위 예제에서와 같이 뒤에서 가상요소로 넣어주는 방식이 다른 요소의 스타일 정의와 충돌할 일도 없고, 코드 읽기도 쉬워진다!

✓   예기치 않은 결과를 만들지 않으면서 (부모요소에서)플로팅을 해제하는 가장 확실한 최신 코드는 부모요소에서 display: flow-root; 값을 주는 것이다: clearfix 해킹의 종말? 참조 요.

➥ 미디어쿼리의 (조건)에서 [min/max-]width/height: 값;은 뷰포트의 너비/높이, [min/max-]device-width/height: 값;은 단말기의 너비/높이를 지정한다. [min/max-]aspect-ratio: 가로/세로;은 뷰포트의 가로/세로 화면비, [min/max-]device-aspect-ratio: 가로/세로;은 디바이스의 가로/세로 화면비를 지정한다. orientation: landscape/portrait;는 화면의 가로/세로 방향을 지정한다 ← 참고로, max-는 '이하'일 때, min-은 '이상'일 때를 의미한다!

                                    
                                        @media only screen and (min-width: 80rem) { /* 스크린에서만 & 너비 80rem 이상일 때; */
                                            .container { margin: 1em 2em; }
                                        }
                                    
                                

                                                    
                                                        .responsiveh4 { font-size: 1rem; }

                                                        @media (min-width: 800px) {
                                                            .responsiveh4 { font-size: 2rem; }
                                                        }
                                                    
                                                

                                    <meta name="viewport" content="width=device-width, height=divice-height, initial-scale=1">
                                

☞ 여기서 width=device-width, height=device-height는 뷰포트 너비, 높이의 100%를 의미한다. initial-scale 은 페이지가 처음 로드될 때의 줌 값이다(0.1 ~ 10, 기본값: 1)

                                    <meta name="viewport" content="width=500, initial-scale=1">
                                

☞ 초기 또는 최대 크기를 설정하는 페이지의 경우, 이는 width 속성이 실제로 최소 뷰포트 너비로 변환된다는 것을 의미한다. 예컨대, 레이아웃에 최소 500px의 너비가 필요한 경우 위와 같은 옵션을 사용할 수 있다 ← 화면이 500px보다 크면; 브라우저는 줌인 대신 화면에 맞게 뷰포트를 확장하게 된다!

➥ 뷰포트는 웹 컨텐츠를 볼 수 있는 창 영역을 말하는데, 데스크탑의 뷰포트 영역은 [브라우저 개발자 화면]에서 확인할 수 있다(스마트 기기는 대부분 980px 크기로 설정되어 있다). 스마트폰과 같이 작은 기기는 불러온 웹 문서를 화면보다 넓은 이 가상 뷰포트에서 렌더링한 다음, 렌더링된 결과를 기기 화면 크기로 축소하고.. 이후 사용자는 페이지의 다른 영역을 더 자세히 보기 위해 확대/축소할 수 있게 된다. 그러나 이러한 메카니즘은 미디어쿼리를 사용하여 좁은 화면에 최적화된 페이지에는 적합하지 않다(예컨대, 가상 뷰포트가 980px인 경우 640px 또는 480px 이하에서 시작되는 미디어쿼리는 사용되지 않으므로 이러한 반응형 디자인 기법의 효과는 제한된다!) ← 뷰포트 선언은 좁은 화면 장치에서 가상 뷰포트의 이러한 문제점을 완화시켜주는 역할을 하는 것이다!