'📚 지식 채우기' 카테고리의 글 목록 (4 Page)

[HTML&CSS] Colors , Variables

2023.06.01

[HTML&CSS] Colors , Variables ( UPDATE 2023 - 05 - 30 ) Colors 색상 체계 (color system) 1) hexadecimal color (16진수 컬러) #2ecc71와 같은 색상 코드 2) rgb (디자이너들이 많이 씀) 각각 red, green, blue를 의미. rgb(0,140,200)의 경우엔 red 값이 0, green 값이 140, blue 값이 200이라고 이해할 수 있다. 3) rgba rgb와 동일하지만 a가 포함된 형태. 'a(alpha)'는 투명도를 의미 0(투명)~1(불투명) 사이의 값으로 조절할 수 있다. Variables (=custom property) variables (=custom property) css를 프로그래밍언..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] States , Pseudo elements

2023.06.01

[웹] States , Pseudo elements ( UPDATE 2023 - 05 - 30 ) States active 해당 요소를 마우스로 클릭 했을 때 효과를 적용 hover 마우스가 해당 요소 위를 지나갈 때 효과를 적용 focus 키보드로 선택 되었을 때 효과를 적용 visited 방문한 사이트일 경우에 효과를 적용 focus-within 부모 요소에게 적용. 자신의 자식 요소 중 하나가 focus되었을 때 효과를 적용 (자식 상태에 따라 부모 상태 바뀜) form:hover input form이 hover된 상태면 input이 바뀌는 것 (부모 상태에 따라 자식 상태 바뀜) form:hover input:focus form과 input의 상태 모두 충족해야 적용됨 Pseudo element..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Combinator, Pseudo selectors - 2

2023.06.01

[HTML&CSS] Combinator, Pseudo selectors - 2 ( UPDATE 2023 - 05 - 27 ) combinator, pseudo selectors div span div 안의 span div > span div 안의 직계 span p + span p ‘바로 다음’으로 오는 span p ~ span p ‘다음’ 으로 오는 span ( 바로 뒤에 오지 않을 때 씀) input:required input에 required 있는 경우만 적용 input[type=“password”] input에 password 타입만 적용 input[placeholder=“username”] placeholder가 username 인 경우만 적용 input[placeholder~=“name”] pl..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Position , Pseudo selectors - 1

2023.05.31

[HTML&CSS] Position , Pseudo selectors - 1 ( UPDATE 2023 - 05 - 26 ) Position Position 의 디폴트는 static position : fixed; 스크롤을 올리든 내리든 초기에 세팅한 그 위치에 고정됨. 상단 메뉴 바 등을 고정할 때 많이 씀. position : fixed; (주의점) top, bottom, left, right 중 하나라도 수정하면, 별개의 레이어처럼 겹쳐질 때, fixed를 제일 상위로 하고 겹쳐짐 posititon : relative; 위치 조금 옮기고 싶을 때 사용. 처음 위치한 곳을 기준으로 상하좌우로 수정함. (부모 요소 무시X) position : absolute; 상하 좌우를 이동 하고 싶을 때 사용함. 부..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

2023.05.31

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex ( UPDATE 2023 - 05 - 25 ) 블록과 인라인 블록은 한 줄을 온전히 차지한다. (옆에 못옴) 인라인은 한 줄 안에 같이 있다. 블록에 display: inline 을 하면 박스 속성을 유지하면서 옆에 다른 블록이 올 수 있다. 인라인에 display: block을 하면 블록처럼 한 줄을 온전히 차지한다. 인라인은 높이(height)와 너비(width)가 없다. 브라우저는 요소들에게 자체적으로 style을 주기도한다. (예를 들면, 원치않는 공간=margin) 블록은 박스이다. margin , border , padding 박스는 세 가지 특징이 있다. : margin,border,pad..

📚 지식 채우기/웹 (프론트엔드, 백엔드)

[CSS] 인라인 레벨 요소 전체 목록

2023.05.30

인라인 레벨 요소 전체 목록 다음은 HTML 블록 레벨 요소의 전체 목록입니다. 사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다. 콘텐츠 카테고리 설명을 참고하세요. 콘텐츠카테고리 설명 클릭 (en-US) (컨트롤이 보이면) (en-US) (en-US) (en-US) (en-US)

티스토리툴바