본문 바로가기

전체 글127

[html/css] web font(웹 폰트) 연결하기 브라우저 스타일 초기화 웹 사이트를 만들때, 꼭 들어가야하는 폴더가 있다.css, js, img 세개와 pages 혹은 sub이란 명칭의 서브 폴더이다. 오늘은 css 에서 웹폰트를 적용해보려고 한다.웹폰트를 적용하기 전, 브라우저에 내장되어있는 스타일을 먼저 초기화 시키고 시작하자.보통 초기화를 할때 css에 초기화 파일 따로 만들어서 적용한다.html 기본 css 초기화 소스가 따로 있지만, 초기화 내용을 파악하기 위해서 몇가지만 진행하며 알아보자.1. 전체선택자에서 여백 없애기.*{margion: 0; padding: 0;} 2. 글자꾸밈 초기화선택자{text-decoration: none;}3. 목록스타일(불릿,들여쓰기) 초기화선택자{list-style: none;}4. 태그 속성 바꾸기선택자{d.. 2024. 5. 30.
[html/css] 글자 스타일 적용하기 글자 색상 (color) 원하는 선택자에 색상을 적용하는 방법이다.선택자{ color: 색상(RGB, HSL, 등);} 색상 옆의 네모 박스에 마우스를 갖다대면 아래와 같은 컬러 박스가 나온다.이곳에서 색상을 선택하는 것도 가능하고,그 위의 글자(ex.rgb(255,177,74))를 클릭하면 다른 단위의 색상 코드를 보여준다. alpha는 투명도를 뜻한다. 색상코드의 맨 뒤에 숫자를 추가하여 사용 가능하다.    0 ~ 1 사이의 값을 이용해 투명도를 표시할 수 있다.    0 : 투명도 100%    0.5 : 투명도 50%    1 : 투명도 0%글꼴 (font-family)폰트패밀리에서는 폰트 이름은 쌍따옴표(") 사이에 들어가 있어야 한다.폰트 이름이 그대로 적혀 있어야 오류가 나지 않는다. (띄.. 2024. 5. 30.
html 기본 css 초기화 소스 /* reset.css */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figca.. 2024. 5. 30.
[html/css] 스타일 시트와 선택자 css란?html구조에 글꼴이나 색상, 정렬, 요소의 배치 등 겉모습 디자인을 입히는 언어를 말한다.Cascading Style Sheets의 약자로 '위에서 아래로 흐르는 디자인 시트' 라는 의미이다. css는 '위에서 아래로 속성을 하나씩 적용'하는 속성을 가지고 있는데, 아래에 있는 속성 부터 먼저 적용된다는 것이 가장 큰 특징이다. ex. 두개가 겹치는 경우 아래에 있는 코드를 적용한다.선택자{  color : red;  color : blue;} css 맨 처음 문장에는 @charset "utf-8"; 이라는 언어 인코딩 모듈을 쓴다. @ = at ( = css module )으로 시작하여, ;(세미콜론)으로 마침표를 찍는다. css 에서의 주석은 /* */ 으로 vs code와 같이 ctrl .. 2024. 5. 29.
[Figma] 피그마로 아이콘 만들기 그리드 저장하는 방법 피그마는 오브젝트를 구분 짓는데 레이어의 이름을 활용한다.특히, 컴포넌트 단위에서 레이어 이름에 /(슬레쉬)를 활용하면 처럼 각 요소를 단계별로 그룹화하여 관리할 수 있다. 선두께 2px 로 변형    outline stroke주로 선으로 그려진 아이콘을 면으로 변경하거나 텍스트의 형태로 오브젝트를 만들 때 사용한다.stroke 정보를 rill(면)으로 전환한다.Coner Radius가 적용된 경우 둥근 정도를 패스와 커브로 변경한다.   나중에 어딘가의 프레임에 올려놨을때 크기에 맞게 자유롭게 움직일 수 있도록 도와줌 ctrl + d 제자리 복제union selection 으로 먼저 합쳐주고 flatten selection 으로 합쳐줘야 진짜로 합쳐짐  Flatten여러개의 레이.. 2024. 5. 29.
[html/css] 테이블 태그 <table>,<th>,<tr> ,<td>와 표를 꾸며주는 속성 colspan, rowspan, border-collapse 테이블 태그 , , , 테이블 태그는 이전에는 레이아웃을 만드는 태그로 많이 사용되었다.현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로, 표를 구성해주는 태그이다.부모태그인 태그로 행과 열을 묶고, 행은 , 열은 로 구성한다.테이블 태그는 모두 block속성이다.테이블 태그표 전체를 묶어주는 태그이다.열에 쓰이는 태그이다. 제목 속성으로 다른 글자보다 두껍게 강조되어 표현된다.행을 표현하는 태그로, 태그와 태그를 감싸는 태그이다.열을 표현하는 태그이다. /* 기본형 */ ...  예시로 2행 3열의 표를 하나 만들어보겠다./* 2행 3열의 표 */ 1행1열 1행2.. 2024. 5. 29.

티스토리툴바