본문 바로가기
반응형

CSS10

CSS | 요소 임시 삭제 ⭕ CSS | 요소 임시 삭제CSS에서 특정 요소를 화면에서 완전히 숨기는 방법 중 하나는 display: none; 속성을 사용하는 것입니다. 이 방법은 요소를 보이지 않게 하며, 레이아웃에서 해당 요소가 차지하던 공간도 제거합니다. 이 기법은 동적인 웹 인터페이스에서 요소를 일시적으로 숨겨야 할 때 유용하게 사용됩니다. ➡️ display: noneCSS의 display: none; 속성은 요소를 DOM에서 숨기되, 공간도 차지하지 않도록 합니다. 이는 요소가 페이지 레이아웃에 전혀 영향을 주지 않는 것처럼 만듭니다. 예를 들어, 사용자 상호작용에 따라 보일 필요가 없는 정보를 숨길 때 이 속성을 사용할 수 있습니다..hidden-element { display: none;}  ➡️ 주의사항di.. 2024. 5. 16.
CSS | 요소(Element)와 클래스(Class)의 차이 ⭕ CSS | 요소(Element)와 클래스(Class)의 차이➡️ 요소 (Element)HTML 요소는 웹 페이지의 구조를 정의하고 의미를 담당합니다. 이러한 요소들은 특정 태그로 표현되며, 웹 브라우저에 어떻게 내용을 표시할지 알려줍니다. , , , p { color: blue;}➡️ 클래스 (Class)클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자입니다. 클래스는 점(.)으로 시작하며, 하나 이상의 요소에 재사용 가능한 스타일을 정의할 수 있습니다. .menu, .header, .footer.menu { background-color: #333; color: white; padding: 10px;}.header { font-size: 24px; fo.. 2024. 5. 16.
CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky ⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky요소의 위치 지정 기준  ➡️ static (기본 값)요소를 문서 흐름에 따라 배치합니다.positon 설정이 없는 것과 같다.position: static; ➡️ relative (거의 사용하지 않음) static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다. position: relative;top: 40px; left: 40px; ➡️ ⭐ absolute일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.position: absolute;top: 40px; left: 40px; ➡️ fixed일반 문서 흐름에서 요소를.. 2024. 5. 14.
CSS | 여백 속성: Margin 및 Padding ⭕ CSS | 여백 속성: Margin 및 Paddingmargin : 요소의 외부 여백을 설정한다.padding : 요소의 내부 여백을 설정한다. 2024. 5. 14.
CSS | background-size 속성: contain 및 cover ⭕ CSS | background-size 속성: contain 및 cover➡️ contain비율을 유지요소의 더 짧은 너비에 맞춤이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.background-size: contain; background-repeat: no-repeat; 옵션이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.background-size: contain;background-repeat: no-repeat; ➡️ cover비율을 유지요소의 더 넓은 너비에 맞춤이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.background-size: cover; 2024. 5. 14.
웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ⭕ 웹 구조 Web | 프론트엔드 개발 기술 목록: HTML, CSS, JavaScript(JS) ➡️ HTML: 구조 역할: 웹 페이지의 기본 구조를 제공함 기능: 제목, 문단, 표, 이미지, 동영상 등 페이지의 구조적 요소를 정의함 비유: 얼굴에서 눈, 코, 입과 같은 구체적인 부분을 형성함 ➡️ CSS: 스타일 역할: 웹 페이지의 시각적 스타일을 담당함 기능: 색상, 크기, 폰트, 레이아웃 등을 조정하여 콘텐츠의 시각적인 표현을 정의함 비유: 구조적으로 설정된 눈, 코, 입의 위치와 모양, 색상 등을 정의함 ➡️ JavaScript(JS): 동적 처리 역할: 웹 페이지의 동적 기능을 구현함 기능: 사용자의 입력에 반응하거나, 페이지의 콘텐츠를 실시간으로 변경하고 움직임을 추가함 2024. 4. 22.
웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) ⭕ 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) 프론트엔드 개발은 웹 개발의 가장 전면적인 부분 HTML, CSS, JavaScript 기술을 활용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 사용자와 상호 작용하게 하는 과정 프론트엔드 개발자는 사용자가 직접 보고 경험하는 웹 페이지의 실질적인 구축을 담당함 ➡️ UI(User Interface) 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분 ➡️ GUI(Graphic User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경 이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행하였지만.. 2024. 4. 22.
카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고 ⭕ 카카오테크캠퍼스 2기 | 2주차(24-04-15 ~ 24-04-21) 회고아직 기초 단계라 큰 어려움은 없었습니다. 하지만 정처기 준비로 바빴기 때문에, 빠르게 진도를 나갈 수 있었으면 좋았을 텐데 아쉬움이 남습니다. 하지만, 목표한 만큼 완수했습니다! ⭐ 빨리 어려움이 생겨 질문을 남겨보고 싶습니다. 채널에 공유되는 자료들은 실무자들에게 한번 더 필터링된 자료로, 큰 도움이 될 것이라고 생각하여 꼭 훑어보려고 합니다. 🍪HTML을 학습하면서 깨달은 중요한 점은, (CSS 개발 전에는) 문서가 시각적으로 예쁘게 보이는 것보다는 구조를 이해하는 것이 훨씬 중요하다는 것입니다. 또한, 자연스럽게 사용자에게 보이는 body 영역에 집중하는 경우가 많지만, head 영역에 있는 내용 역시 중요하므로 이를 .. 2024. 4. 22.
웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets ✅ 스타일 시트 CSS, Cascading Style Sheets스타일 시트 CSS, Cascading Style Sheets는 웹 페이지의 외관을 표현한다.웹 페이지의 디자인으로써 레이아웃, 텍스트 장식, 배경 등을 표현한다. CSS는 페이지 수가 많은 HTML 파일 코드를 간소화하는 데 유용하다.각 페이지마다 스타일을 정의할 경우 번거롭다. HTML 파일에서 CSS 파일을 참조하는 태그를 사용하여 연결한다. CSS 대신 Bootstrap 프레임워크나 Sass를 이용하기도 한다. 2023. 2. 9.
웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8.
반응형