전체 글 134

CSS, 나에게 어려운 수평 수직 ..line-height / text -align / vertical-align / border-collapse

line-height 글자 중심선을 기준으로 한 top~bottom 까지의 전체 높이. 글자 중심선으로 부터 top이나 bottom 까지의 개별 높이가 아님에 주의 line-height 의 지정은 본인 요소가 아닌 부모 요소에 지정함으로써, 부모 요소 안에서의 자식 요소에 대한 요소의 높이가 결정됨의 주의 h2:nth-of-type(n+4)+p { width: 500px; height: 100px; } h2:nth-of-type(4):hover+p { text-align: center; line-height: 100px; } 500 , 100 px line-height 를 똑같은 높이 100px 을 주면서 , 수평 정렬 line-height 의 % 예외. line-height 에 대한 % 적용은 상위 부..

Developer/HTML_CSS 2024.04.21

CSS, 텍스트의 배치 , white -space / indent / spacing

white -space : normal ; ( 디폴트 값 ) 문자 공백 , tab , 개행(줄내림) 을 모두 공백 처리하고 , 연속된 white-space 문자도 하나의 공백으로 인정. white-space : nowrap ; 수평 너비 영역 끝에 닿을 때 자동 개행(줄내림)이 되는 특성을 해제함. (영역에 넘치도록 한줄에 모두 표현되는 특성으로 인해 , overflow 와 함께 쓰기도 한다. 이전 overflow의 예제를 살펴보자.) white-space : pre ; pre 속성과 동일하게 적용되어, 들여쓰기가 됨을 확인 할 수 있다. white-space : pre-wrap ; pre 속성과 동일하게 적용되며 , 들여쓰기가 됨을 확인 할 수 있다. 수평 너비 영역을 벗어 났을때 , nowrap 되는..

Developer/HTML_CSS 2024.04.20

CSS, display / visibility / overflow / nowrap

display : display 에는 주요 inline . block . inline-block . none 요소 들이 있다. : inline 기본적으로 텍스트 속성을 가져 인라인 요소간의 수평 나열이 가능. 크기 지정은 불가. : block 높이는 내부 컨텐트에 의해 결정되지만 , 너비는 수평 영역 전체를 차지. 수평나열이 불가. :inline-block 인라인 요소와 같이 요소간의 수평 나열이 가능하면서도 , 블럭 요소와 같이 크기 지정이 가능한 특성. a { display: inline-block; width: 5em; height: 5em; text-align: center; line-height: 5em; } div { display: inline-block; width: 5em; height:..

Developer/HTML_CSS 2024.04.17

CSS, min-width(height) , max-width(height) / vmin , vmax

헷갈림의 주의 하자, 이전에 배운 vh 와 vw 도 함께 보자. vh 단위 : viewport의 높이에 대한 백분율. vw 단위 : viewport의 너비에 대한 백분율. min-width : ( 이상 - 너비 ) 요소가 가질 수 있는 최소 너비를 지정. 단 , 이는 요소의 최초 너비를 지정하는 것. 브라우저 창의 너비를 늘린다고해서 그 최대 크기를 제한하지 않음. 제한 함으로 스크롤이 생성되나, 브라우저 창의 너비가 min-width 보다 큰 경우 요소 최대 크기를 제한하지 않음의 주의. max-width : ( 이하 - 너비 ) 요소가 가질 수 있는 최대 너비를 지정. 브라우저 창의 너비를 늘려도 요소의 너비가 최대 너비로 제한됨. min-height : ( 이상 - 높이 ) 요소가 가질 수 있는 최..

Developer/HTML_CSS 2024.04.16

CSS, viewport / margin / height / width / vh , vw

viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자. 블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지. % 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용. p태그는 블럭 레벨 요소이다. 부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다. p{ height: 100%; /*바보 코딩*/ } 부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해 p..

Developer/HTML_CSS 2024.04.16

CSS, 비율 단위 (% , em , rem) / : root 를 알아보자.

% / em / rem / root 를 쓰는 이유 ? 사용처에 의해 화면 배율이 달라졌을 경우 px 로 직접 지정한다면 , 추후 사용처 마다 직접 전부 수정해야 하는 단점이 있음. 하지만 비율로 적용 시키게 되면 , 사용처 마다 자연스럽게 비율로 따라가게 됨. % 단위 부모 요소를 기준으로 적용되는 모든 단위에 대한 상대적 백분율. 부모요소 중첩 , 계층별 부모요소에 % 단위가 각각 적용시 → 누적 비율 적용. section:nth-child(1) p { background-color: brown; font-size: 80%; /* 16px * 0.8 = 12.8px */ } section:nth-child(1) p strong { color: white; font-size: 150%; /* 12.8px..

Developer/HTML_CSS 2024.04.16

CSS, 색상명 지정과 불투명도 ( color / rgb / opacity )

색상명 지정 약속된 고유한 색상명을 직접 지정. VSCODE 에서는 지정후 , 마우스 포인터를 가져가면 rgb view 를 통해 직접 지정 가능. rgb와 opacity 2가지 방법이 있다. 16진수 값 또는 함수형 표현. 1) 16진수 값의 지정. 접두사 # 뒤에 색상 3가지를 2자리씩 묶어 혼합하는 형태 형식 : # ff ff ff [ff] red green bule [ opacity ] 16 진수의 값이 클수록 빛의 세기가 증가 → 명도 증가 16 진수의 값이 작을수록 빛의 세기가 감소 → 명도 감소 #ffffff[ff] 흰색 #000000[00] 검은색 ul:nth-of-type(2) li:first-child { background-color: #ff0000; /* background-color..

Developer/HTML_CSS 2024.04.16

CSS,선택자의 우선순위와 상속과 비상속

선택자의 우선순위 지난번의 스타일 우선순위를 알아보았다. 선택자의 우선순위도 같이 본다면 , 이해하기에 도움이 될듯 하다. !important > 인라인스타일 > id 선택자 > 클래스 선택자 > 태그 선택자 > 범용 선택자 일반적인 선택자 우선순위는 계층이 동일한 경우 위에 명시된 순서로 우선 순위가 적용된다. 상속계층간에서의 스타일 적용은 계층이 다를 경우 , 일반적인 선택자 우선순위가 무시되고 , 가장 가깝고 명시적 표현이 우선 적용 된다. important는 특별한 경우 ( 다른 사용자의 스타일 코드를 차용하여 수정이 필요한 경우) 를 제외하고는 사용을 지양할 것. CSS Priority CSS priority settings!! 범용 선택자 스타일 우선 적용!! Complete!! CSS pri..

Developer/HTML_CSS 2024.04.15

CSS,속성 선택자를 알아보자.

속성선택자 지정된 속성 또는 value 에 의해 요소를 결정하여 스타일링 적용. 사실 쓰는 것은 자제 하는 것이 좋다. 모든 태그들을 검색해서 진행하기 때문에 로딩속도가 느리다는 단점이 있다. [속성A] /* id 속성을 가진 요소. */ [id] { background-color: bisque; } /* input 태그 중 id 속성을 가진 요소. */ input[id] { font-weight: bold; } /* id 속성이 value 인 요소. */ [id=lg] { /* Emmet 기능 적용시와 동일하게 value 에 문자열 구분자 생략 가능 */ list-style: none; } /* value 가 디폴트로 설정된 값이 있다하더라도 명시적 지정이 되어 있지 않으면 미적용. */ [target..

Developer/HTML_CSS 2024.04.15

폰트 기반의 아이콘 사이트 , 폰트 어썸.

많은 이미지와 영상등을 사용하다 보면 , 용량이 부담스러울 수 있다. 이를 기반하여 폰트 기반의 아이콘을 제공하는 사이트를 소개한다. 사용 방법을 자세히 알아보겠다. https://fontawesome.com/ 코드가 하나 뜰텐데, 이를 복사하여 head 내의 style 태그 바로 위에 붙여넣기를 하자. 사용할 태그 선택자 내에 content : "복사붙여넣기"; font:var(--fa-font-solid); 를 추가한다면 완성된다. 폰트를 기반으로 하였기 때문에 , 사이즈 조절은 font-size를 이용하면 된다.

Developer/HTML_CSS 2024.04.15
728x90