개발자 노트 - oseungun311 story

목표 시안 더보기 index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스스로 재미를 찾아 내는 능력 백엔드 ..

목표 시안 더보기 index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스스로 재미를 찾아 내는 능력 백엔드 ..

목표 시안더보기 index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스스로 재미를 찾아 내는 능력 백엔드 ..

목표 시안더보기 index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스스로 재미를 찾아 내는 능력 백엔드 ..

목표 시안더보기 index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스..

헤더 목표 시안 https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com index.html 텐코딩 텐코딩 블로그 css/style.css * { box-sizing: border-box;}/* a 링크 태그 스타일 초기화 *//* a 태그에 모든 요소를 초기화 한다. */a { all: unset;..

전체 목표 시안 패키지 구조 및 기본 설정 패키지 구조 확인 파비콘 만들어 보기 (파비콘 만들기 검색) 샘플 아이콘 css/nomalize.css 뼈대 코드 만들기​ ​ ​ * { box-sizing: border-box;} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ========================================================================== *//** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font s..

CSS 강의: 반응형 웹 디자인과 Media Query 쉽게 배우기1. 반응형 웹 디자인이란?쉽게 말해요: 반응형 웹 디자인(Responsive Web Design)은 웹사이트가 사용하는 기기에 따라 화면이 예쁘게 보이도록 만드는 기술이에요. 예를 들어, 스마트폰, 태블릿, 컴퓨터에서 모두 잘 보이게 하는 거죠!왜 중요할까요?요즘은 사람들이 스마트폰으로 웹 서핑을 많이 해요.기기마다 화면 크기가 다르니까, 모든 기기에서 웹사이트가 보기 좋도록 조정해야 해요.CSS의 Media Query라는 기능을 사용하면 쉽게 가능해요!2. Media Query가 뭔가요?Media Query는 CSS에서 특정 조건에 따라 스타일을 다르게 적용하는 방법이에요.예를 들어, "화면 크기가 600px 이하일 때 이 스타일을 적..

CSS는 Cascading Style Sheets의 약자로, "Cascading(계단식)"이라는 이름처럼 스타일이 여러 규칙에 따라 적용됩니다. CSS에서 스타일이 어떤 순서로 적용되는지(우선순위)와, 부모 요소의 스타일이 자식 요소로 어떻게 전달되는지(상속)에 대해 배워보겠습니다.1. CSS 상속(Inheritance) 이해하기CSS에서 상속이란 부모 요소에 적용된 스타일이 자식 요소로 자동으로 전달되는 것을 말합니다. 하지만 모든 CSS 속성이 상속되는 건 아닙니다. 상속되는 속성과 상속되지 않는 속성을 구분하는 게 중요합니다.(1) 상속되는 속성일부 CSS 속성은 기본적으로 자식 요소로 상속됩니다. 예를 들어:color: 텍스트 색상font-family, font-size: 글꼴 관련 속성text-..

1. Flexbox 속성으로 반응형 레이아웃(어떠게 배치하고 정렬) 준비하기(1) flex-wrap: 요소를 줄바꿈하기flex-wrap은 Flex Item이 한 줄에 모두 배치될지, 아니면 여러 줄로 나뉠지를 결정합니다. 반응형 디자인에서 화면이 작아질 때 요소가 자동으로 줄바꿈되도록 설정하는 데 유용합니다.nowrap: 한 줄에 모두 배치 (기본값).wrap: 공간이 부족하면 줄바꿈.wrap-reverse: 줄바꿈하되, 줄 순서가 반대.예제 1: flex-wrap으로 반응형 줄바꿈 1 2 3 4 5 ​설명:flex-wrap: wrap;을 설정해 컨테이너의 너비를 초과하면 Flex Item이 자동으로 아래 줄로 넘어갑니다.화..