'CSS' 태그의 글 목록 (2 Page)

9 CSS로 박스 만들기 (구획 정해주기)

2023.05.31

CSS로 박스 만들기 (구획 정해주기) 긴 말 할 것 없이, 바로 코드로 확인해보자. CSS가 초보라서 구획 설정이 어렵다면, 나처럼 아래의 사이트로 연습을 해보는 것도 좋을 것 같다. 💡 CSS Diner 클릭 코드 box1 box2 box3 * { background-color: gray; } .box1{ border: 3px solid blue; width: 200px; height: 200px; background-color: white; padding: 50px 100px 30px; /*pading top left 등으로 하는게 더 편함 */ margin-bottom: 30px; /*공백*/ } .box2{ box-sizing: border-box; border: 3px solid red; wi..

🌱 코린이를 위한 GUIDE/🗂️ OpenSource

8 CSS를 이용해서 배경 색, 글자 색깔, 폰트 사이즈, 폰트 기울기 변경하기

2023.05.31

배경 색, 글자 색깔, 폰트 사이즈, 폰트 기울기 변경하기 CSS를 활용해서 HTML 페이지를 꾸며보자! 코드 전체제목입니다 제목입니다. 내용입니다. .title{ background-color: red; } .box1 .title{ color: yellow; } .contents { font-size: 18px; font-style: italic; } 결과 See the Pen First CSS by Kong Yang (@Kong-Yang) on CodePen.

🌱 코린이를 위한 GUIDE/🌐 WEBSITE

CSS Diner - CSS 초심자를 위한 연습 사이트

2023.05.30

CSS Diner - CSS 초심자를 위한 연습 사이트 게임처럼 만들어놔서, CSS에 대한 이해를 돕는다. 하다보면 생각보다 꽤 재밌다. 32 단계 까지 있고, 오른쪽에 영어로 힌트가 주어진다. 남녀노소 CSS 코린이에게 추천한다. CSS Diner 링크 클릭 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io

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

[웹] HTML의 블록(block) 과 인라인(inline) 요소

2023.05.30

HTML의 블록(block) 과 인라인(inline) 📌 HTML 요소의 타입📌 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 1. 블럭(block)요소 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소 2. 인라인(inline) 요소 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우가 다른 태그가 나란히 위치할 수 있는 요소 = 텍스트레벨 요소, 행 안의 일부분 3. 특징 및 주의점 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없..

🌸 나의 다이어리

[D+4] 2023-05-12 아는 것이 힘이다

2023.05.30

[D+4] 2023-05-12 아는 것이 힘이다 CSS의 미디어쿼리를 이용해서 해상도에 따른 색상과 멘트의 변경을 코딩했다. 결과적으론, 두 가지 방식으로 코딩을 했다. 처음엔 무작정 헤딩을 하며 코딩을 했는데.. 완성하고 보니, 아쉬운 마음이 들었다. 왠지 이 것보다는 더 나은 구조로도 만들 수 있을 것 같았다. 결국, 두 번째에는 여러 자료를 구글링 해서 코드 구조를 개선할 수 있었다. display: inherit; 역시 아는 것이 힘이다 ㅋㅋ🔥 🌱오늘의 잔디 심기🌱 클릭

9 CSS로 박스 만들기 (구획 정해주기)

8 CSS를 이용해서 배경 색, 글자 색깔, 폰트 사이즈, 폰트 기울기 변경하기

CSS Diner - CSS 초심자를 위한 연습 사이트

[웹] HTML의 블록(block) 과 인라인(inline) 요소

[D+4] 2023-05-12 아는 것이 힘이다

티스토리툴바