본문 바로가기

Web/CSS4

[CSS] 그리드 예제 연습 CSS를 공부하면서 그리드를 배워봤는데 그리드를 통해서 레이아웃을 짜보는 연습이 필요한 것을 느껴 이를 연습해보고자 함. 목차 그리드 예제 현재 가장 해보고 싶은 건 위 이미지를 보면 제목,카테고리, 작성 글들이 저런 식으로 레이아웃 되어 있는데 기초적인 레이아웃을 구성해보고 실제 웹을 꾸밀 때 적용해보고 싶어 이를 실제로 짜보면서 그리드에 대한 이해도를 높이고자 함. CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) - Web Standard (tistory.com) CSS 그리드 5분만에 배우기 (Learn CSS Grid in 5 Minutes) 이 포스트는 Learn CSS Grid in 5 Minute 를 한글로 번역한 글입니다. CSS 그리드 5분만에 배우기 .. 2023. 3. 16.
[CSS] 티스토리 블로그 제목 폰트 바꾸기 블로그 제목 폰트가 마음에 들지 않아 이번에 배운 CSS를 통해 변경을 해 볼려고 함. 구글 폰트에서 나눔고딕 폰트를 import하는 코드를 CSS에 추가 Browse Fonts - Google Fonts CSS에서 H1 태그 선택자에서 font-family:Nanum Gothic;으로 변경 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com CSS를 실제로 적용하면서 이상해지면 어쩌지 걱정이 계속 있었지만 잘 맞아들어가니 다행이다라고 생각함. 2023. 3. 9.
[CSS] 생활코딩 Web2 내용 정리 (박스 모델, 그리드, 미디어 쿼리, 코드의 재사용) 목차 WEB2 (8~15) WEB2 CSS - 8. 박스 모델 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 1. 박스 모델 block element : 화면 전체 크기를 갖는 태그 inline element : 자기 자신만의 크기를 갖는 태그 더보기 Home ">A home page (or homepage) is the main web page of a website.[1] The term may also refer to the start page shown in a web browser when the application first opens.[2] Usually, the home page is located at the root of the website's.. 2023. 3. 8.
[CSS] 생활코딩 Web2 내용정리 (CSS, 기초 문법, 선택자, 속성) 목차 WEB2 (1~7) WEB2 CSS - 1. 수업 소개 - YouTube 본 글은 유튜브 무료 강의 생활코딩의 내용을 정리하는 글 중복된 코드를 제거하고 작성하는 것이 효과적임! 1. CSS 웹사이트의 디자인을 하기 위해 여러 HTML 태그를 추가해서 활용하려고 했지만 코드가 너무 길어지고 중요한 정보를 찾기 어려워진 단점이 존재 → CSS의 등장 ex. WEB CSS → CSS 코드 해석 : a라는 태그가 있으면 그걸 red 컬러로 지정해줘 ;(세미콜론) : 하나의 descryption이 끝나는 것을 구분시켜주기 위한 구분 더보기 JavaScript → Html 태그의 CSS의 속성을 추가한 것으로 해석 2. 속성과 선택자 다양한 선택자, 속성, Value를 공부하는 것이 필요!! ⓐ. .. 2023. 3. 8.