'💻 Programming/HTML, CSS' 카테고리의 글 목록

[CSS] 변환과 전환 (Transformations & Transitions)

2024.01.10

1. 변환 Transformations 요소의 모양을 이동하거나 변경하는 것 (ex. hover) 변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } 변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card..

💻 Programming/HTML, CSS

[CSS] html, :root, * 선택자

2024.01.10

1. html 하는 css 규칙은 html에 적용되고 html 안에 포함된 요소들에도 상속된다. 아래의 css 변수 예제에서 사용했던 논리 html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-300: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1: 18px; --size-5: 50px; background-color: var(--color-grey-100); } 2. :root 가상 ..

💻 Programming/HTML, CSS

[CSS] em, rem, %

2024.01.09

1. 폰트 크기에서의 em, rem, % 1) px 장점: Easy to understand & translateable 단점: Limited user focus & not scalable 2) em vs. rem (1) em (element) Size is relative to font-size 다른 요소의 폰트 크기와 연관된 크기 - 폰트 크기는 부모 요소의 크기에 달려있다. 단점 %와 마찬가지로 부모 요소에서 상속받는 크기에 따라 사이즈가 달라지기 때문에 관리가 어렵다. (2) rem (root em) Size is relative to root element’s font size 현재 요소의 폰트 크기와 최상위 요소의 폰트 크기와 연결되어 있다. HTML에서 최상위 요소: 최상위 요소에 폰트 크기..

💻 Programming/HTML, CSS

[HTML] 웹 문서의 기본 구조: header, main, footer

2023.05.19

메뉴 1 메뉴 2 메뉴 3 h1는 가장 중요한 제목으로 페이지에 1개만 사용할 것 중간을 빼먹지 않고 순차적으로 사용할 것 글씨 크기를 조정하는 용도로 사용하지 않는다 부차적, 보완적 영역 웹페이지의 하단

💻 Programming/HTML, CSS

[CSS] BEM (Block-Element-Modifier)

2023.02.25

https://naradesign.github.io/bem-by-example.html 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility, 정찬명 naradesign.github.io

💻 Programming/HTML, CSS

[CSS] CSS, 그리고 스타일 시트

2023.02.20

📌 CSS란? Cascading Style Sheets의 약자로, 웹페이지를 보기 좋게 꾸미기 위해 작성하는 코드 HTML이 웹문서의 뼈대를 이룬다면, CSS는 근육이라고 볼 수 있음 (나중에 배우게 될 JS는 동적인 웹사이트 구현하는 뇌의 역할) /* 선택자 { 속성1: 속성값, 속성2: 속성값2} */ p { text-align: center; color: red; } 📌 스타일 시트 스타일 시트는 크게 '브라우저 기본 스타일'과 '사용자 스타일'로 나뉘고, 여기서 사용자 스타일은 다시 '인라인 스타일', '내부 스타일 시트', '외부 스타일 시트' 세 가지로 나뉘는데 이 중에서 내부 스타일 시트와 외부 스타일 시트에 대해 정리해보려고 한다. 1. 내부 스타일 시트 : 같은 HTML 웹문서 안에 작성..

💻 Programming/HTML, CSS

[HTML] Tag & Attribute

2023.02.18

📌 Tag와 Attribute Tag란 HTML을 작성하기 위해 사용하는 명령어의 집합을 말한다. HTML 문서의 뼈대를 구성한다. Attribute란 HTML 문서에서 elements에 추가적인 정보를 넣을 때 사용되는 부가적인 요소를 말한다. · a: anchor, 웹 페이지나 사이트로 이동 · href(HTTP or hypertext reference): anchor 태그의 attribute · target: 기본값은 "_self"(현재 탭에서 링크 열림), "_blank"(새 탭에서 링크 열림) · img: 다른 태그와 다르게 로 닫지 않음. 자체 닫기 태그 self-closing tag · src: source, img 태그에 이미지 주소를 지정 · id: body안의 어떤 태그에든 넣을 수 있..

티스토리툴바