프론트엔드/CSS 공부(검토 후 삭제예정)10 자주 쓰이는 CSS 속성 ■ 그라디언트 ■ 배경이미지 background-image ■ 그림자 2023. 7. 14. CSS 기본 개념 ■ CSS 규칙 선택자(아이디 or 클래스) + 선언(속성 + 값 + 세미콜론) ■ CSS 파일 저장법 ■ 색상 RGB / RGBA 차이점 : 불투명도 Alpha ■ 크기 단위 절대 단위 px : 화면을 표시하는 기준이 되는 가장 작은 정사각형. ex) 10px = 10개 상대 단위 % - 부모 태그에 대해서 상대적인 크기 - 부모의 크기만 바꿔주면 되는 장점이 있다. em - 인쇄에서 전통적으로 대문자 M의 크기 - 1em : 부모 태그의 font-size rem - 글자 크기를 기준으로 상대적인 크기를 정한다. - 1rem : 최상위 태그(html)의 font-size ■ 텍스트와 관련된 CSS 속성 Color font0size font-family font-weight : 100단위 line-hei.. 2023. 7. 14. CSS 기본 선택자 23.03.07 ver 1. 참고 도서 & 자료 웹 표준의 정석 http://aladin.kr/p/Fyssu Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 《Do it! HTML5+CSS3 웹 표준의 정석》의 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 www.aladin.co.kr 2. 전체 선택자(universal selector) 스타일을 문서의 모든 요소에 적용할 때 사용한다. 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용한다. * { 속성: 값; ...... } 타입 선택자(type selector) 특정 태그를 사용한 모든 요소에 스타일을 적용한다. 태그.. 2023. 3. 7. CSS 정의 / 스타일 형식 / 스타일 시트 23.03.07 ver 1. 참고 도서 & 자료 웹 표준의 정석 http://aladin.kr/p/Fyssu https://academy.dream-coding.com/courses/portfolio Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 《Do it! HTML5+CSS3 웹 표준의 정석》의 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 www.aladin.co.kr 웹 표준의 시작 HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다는 아이디어 2. CSS(cascading style sheets) CSS를 공부한다는 것은 다양한 속성을.. 2023. 3. 7. 플렉스박스(Flexbox)에 대하여 230126 ver. 1. 참고 문서 & 영상 ■ 문서 mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox - 공식문서 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox - 공식문서 ■ 영상 https://youtu.be/7neASrWEFEM - CSS Flexbox 완전 정리 ■ 연습을 위한 게임 Flexbox Froggy 2. 플렉스 박스(Flex box) ■ What item을 행(row) 또는 열(column)로 정렬하기 위한 1차원 레이아웃(layout)방법 item은 flex(expand)하게 움직이며 공간에 맞게 채우거나 축소된다... 2023. 1. 25. 이전 1 2 다음