'css' 태그의 글 목록

본문 바로가기

css

크롬 109 버전이 릴리즈 및 변경사항 알아보기 크롬 109 버전이 릴리즈 및 변경사항 알아보기 해당 사이트에서는 아래와 같이 설명하고 있었습니다. --- Here's what you need to know: The Origin Private File System API is now available for Android. There is a set of new properties in CSS. You can easily add math notations in your HTML with the support for MathML Core. And there’s plenty more. I’m Adriana Jara. Let’s dive in and see what’s new for developers in Chrome 109. --- 간단하게 번역해보자면.. 더보기

개발하는 데 사용하는 좋은 uiverse 를 소개합니다. (ft. HTML/CSS로 만들어진 무료 UI 엘리멘트들) 개발하는 데 사용하는 좋은 uiverse 를 소개합니다. (ft. HTML/CSS로 만들어진 무료 UI 엘리멘트들) 요즘에 저는 HTML/CSS 코딩에 빠져서 열심히 공부하고 있는데요... 공부하던 아래와 같은 사이트를 발견해서 공유드립니다. 나름대로(?) 열심히 공부하고 있는 와중에 혹시나 개인용및 상업용 구분없이 무료로 이용할 수 있는 컴포넌트를 공개하는 웹페이지가 있을까 해서 찾아봤는데요... 역시 세상에는 니즈에 대해서 답이 나와 있네요.... 간단하게 해당 웹페이지를 공부한 대로 소개시켜드리면요.. 아래와 같이 소개하고 있었습니다. --- To make your website just a bit more unique Create, share, and use beautiful custom elem.. 더보기

Heroicons 2.0 릴리즈 (heroicons.com) Heroicons 2.0 릴리즈를 소개합니다. 홈페이지에서는 Heroicons 를 아래와 같이 설명하고 있군요.. Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. 한마디로, Tailwind CSS 제작자가 손으로 만든 아름다운 SVG 아이콘이라고 머릿속에 넣어두시면 될것 같습니다. 아래와 같은 아이콘이 보이는군요.. Outline 은 아래와 같고요. Solid 는 아래와 같습니다. Mini는 아래와 같네요.. 간단하게 Heroicons 2.0 관련 특징을 정리해보자면 아래와 같습니다. Tailwind CSS 개발자들이 만든 아이콘 모음. 오픈소스(MIT) 264개의 아이콘을 완전히 새로 그림 더 얇아진 24x24 1.5 px 아웃라인 스.. 더보기

16.웹프로그래밍, CSS, 레이아웃을 위한 div 요소 사용하기에 대해서 알아볼께요. 블로그목적 CSS관련 레이아웃을 위한 div 요소에 대해서 공부및 정리 후 공유한다. 레이아웃을 위한 div 요소 활용에 대해서. div 요소를 사용해서 아래와 같은 절차로 레이아웃을 만들 수 있음. 첫째, html 파일을 생성하고 div 요소를 생성 둘째, css style 통해서 요소의 위치 및 색상을 지정 마지막, 원하는 레이아웃 완성 추가적으로, div 는 블록 수준의 요소이고, 다른 요소를 그룹핑하는데 보통 사용됨. 그럼, div 를 사용해서 레이아웃을 실제로 만들어 보자. 목표 그럼 지금 부터 목표로 달려가 보자. 우선, html 파일을 생성 한 후 웹 페이지 내용을 아래와 같이 입력함. exam0_div_layout.html 웹페이지 실행화면 설명 아직 css 를 작성하지 않아서 실제.. 더보기

15.웹프로그래밍, CSS, 웹페이지의 요소 위치 정하기에 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 요소 위치 정하기에 대해서 공부하고 정리후 공유한다. 웹페이지의 요소 위치에 대해서 알아보자. 보통 요소의 위치는 top/bottom/left/right 속성으로 지정함. 예를 한번 들어보자. 주의할점 top/bottom/left/right 모두 컨테이너 경계선에서의 오프셋(offset[편차/차이])이라는 점. 즉, right: 200px; 라고 하면 컨테이너의 오른쪽 경계에서 200 픽셀만큼 떨어진 곳을 의미함. 그리고, CSS의 position 속성은 요소의 위치 설정 방법을 나타냄. 즉, 절대적인 위치설정 or 상대적인 위치 설정인가 ? top/bottom/left/rigth 속성은 position 속성이 먼저 설정되지 않으면, 동작하지 .. 더보기

14.웹프로그래밍, CSS, 웹페이지의 레이아웃(layout) 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 레이아웃에 대해서 공부및 정리 후 공유한다. 웹페이지의 레이아웃(layout) 이란? 웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음. 예를 들면, 쉽게말해서 집을 새로 사기위해서 계약금, 중도금, 잔금을 치르고나서 등기를 치고, 새집에 들어가게되면, 집안에 TV, 가구, 냉장고 등등을 배치하게되는 상황과 유사하다고 해야 할까? 암튼 그렇다..^^; 박스모델(Box Model)에 대해서 알아볼까요? 박스모델이란? 웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함. 사각형을 이루는 요소는 아래와 같음. 패딩(padding) 내용과 테두리 사이의 간격 눈에 보이지 않음. 테두리(border) 내용과 패딩 주변을 감싸는 테두리.. 더보기

13.웹프로그래밍, CSS, 테이블(table) 스타일을 꾸며보는 방법에 대해서 알아볼께요..^^ 블로그목적 CSS관련 테이블에 대해서 공부및 정리후 공유한다. 테이블의 스타일을 변경하려면 어떻게 해야 될까? 정답 CSS 를 사용하면 개선 및 변경이 가능하다. 테이블의 스타일의 속성은? 속성 설명 비고 border-collapse 이웃한 셀의 경계선을 합칠 것인지에 대한 여부 width 테이블의 가로 길이 height 테이블의 세로 길이 border-spacing 테이블 셀 사이의 거리 empty-cells 공백 셀을 그릴 것인지 여부 border 테이블의 경계선 table-align 테이블 셀의 정렬 설정 그럼, 테이블의 스타일을 변화시켜보자! 테이블의 경계 border(경계선) 테이블 뿐만 아니라, HTML 요소의 경계선을 설정할 때 사용하는 중요한 속성임. 속성 스타일 색상 두께 예시 .. 더보기

12.웹프로그래밍, CSS, 리스트(list) 스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 리스트에 대해서 공부및 정리 후 공유한다. 리스트 스타일을 한번 꾸며 보아요. 리스트 스타일도 CSS로 지정이 가능함. 속성 속성 설명 비고 list-style 리스트에 대한 속성을 한줄로 설정함. 리스트 항목 마커를 이미지로 지정함. list-style-position 리스트 마커의 위치를 안쪽 or 바깥쪽으로 지정함. list-style-type 리스트 마커의 타입을 지정함 예시 list-style-type : disc, circle, square : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, .. 더보기

이전 1 2 3 다음

티스토리툴바