웹페이지에 보여줄 폰트를 설정한다. * font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; 내 블로그를 살펴보니 애플, 노토, 샌스?라는 폰트를 기본으로 쓰고 있구나. 사용자는 제일 앞에 있는 폰트를 먼저 사용하게 되고 그 폰트가 없다면 다음 설정한 폰트를 써서 웹페이지에 표시해준다. * font-style * font-size em, px, % 단위를 사용한다. em : 브라우저의 기본 글자 크기는 16px 다 1em=16px라고 한다. em은 1.726처럼 소수점까지 쓸 수 있다. * font-weight 글자 굵기 normal; bold; bolder; lighter; 100, 200 300 이렇게 숫자로도 쓴다. * vw 반응형 글꼴

text에 관한 태그는 몇 번 적용해봐서 간단히 복습만 하고 넘어간다. 텍스트 태그는 잘 익혀두면 써먹을 일이 아주 많은 것 같다. 요즘 글쓰기 에디터에 많은 걸 지원해 주지만 티스토리는 네이버 스마트 에디터만큼의 기술을 지원해주지 않는데 대신 html을 직접 편집할 수 있으니 어렵지만 알고만 있다면 귀찮더라도 다양한 효과를 넣을 수 있다. 그래서 공부를 해야 한다. 짜증 나... (◣_◢) 가을이 오니 정신을 차릴 수가 없다. 조울증인가? jsfiddle 이용하니까 참 편한 것 같다. 옛날에는 하나하나 캡쳐해서 복습했는데 jsfiddle 좋다. (*￣▽￣) d 공부하면서 몰랐던걸 하나 배웠다. text-decoration: overline; 요고요고! 글자 위에 줄이 생기는 태그다. 이거 왜 아무도 안..

외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. outline은 기본 borber와 쓰는 방법이 거의 동일하다. 그러니 border에 관한 글을 참고하자. 2019/10/28 - [웹코딩 어려워/· CSS] - CSS 테두리 border CSS 테두리 border css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style - outline 속성 outline-style : 선의 종류 outline-color : 선 색상 outline-width : 선 두께 outline-offset : 컨텐츠와 외곽선 사이에 공간을 주기. outline : 속성 한 번에 쓰기. 기본 스타일/색/두께를 써야 한다. 외곽선과 테두리의 다른 점 : 외곽선은 다른 내용과 겹칠 수 있다. 외..

상자는 컨텐츠, 내부여백, 테두리, 외부여백으로 구성 된다. 컨텐츠 - 텍스트, 이미지, 비디오, 오디오 등의 내용을 담는다. padding - 컨텐츠 내부에 여백을 넣는다. 패딩은 색상 값을 가지지 않는 투명이다. border - 컨텐츠와 내부 여백을 감싸는 테두리 margin - 외부 여백. 여백은 투명이다. 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 기본이 가장 익히기 어렵고 기본이 가장 많이 쓰인다.

아는 과목 나왔다. 짜쓰! height: px, %; - 높이 width: px, 5; - 폭 auto; - 기본 값. 브라우저나 지정한 요소의 크기를 자동으로 계산. initial - 지정된 값을 취소하고 기본으로 설정. inherit - 상위(부모) 값을 받는다. max-width: px, %; - 최대 폭을 설정. / max-height min-width: px, %; - 최소 폭을 설정. / max-height max / min 값은 반응형을 만들 때 많이 쓰고 애드센스 광고 크기를 조절할 때 쓴다. 폭 300px 높이 200px 세상엔 미친*들이 많다. 아뮈터블~ 후.............................. 폭 50% 높이 30%

내부 여백 padding은 margin과 사용 방법이 거의 99% 동일하다. 그러니 다음 글을 참고하면 된다. 2019/11/22 - [웹코딩 어려워/· CSS] - CSS 외부여백 margin 불러오는 중입니다... padding에도 각각 값을 정할 수 있다. padding-top padding-right padding-left padding-bottom margin과 똑같이 한번에 쓰자. padding: 0 0 0 0; / 상-우-하-좌 / 단위는 px나 %를 많이 쓴다. !!중요!! 컨텐츠 너비와 패딩 값은 합쳐진다. 예를 들어 .div {width: 200px; padding:20px;} 라면... 컨텐츠의 최종 크기는 220px이 된다. 컨텐츠 기본 지정 값을 유지하려면 .div {width: ..

티스토리 스킨 편집하면서 지겹도록 봤던 태그다. m.a.r.g.i.n... 토 나온다. =-= 그러니 복습 삼아 정리만 하고 가자. margin은 컨텐츠의 외부 여백을 설정한다. margin은 상-우-하-좌 각각 값을 줄 수 있다. 보통 px; 단위를 사용하고 % 도 많이 사용한다. margin-top / 상 margin-right / 우 margin-left / 좌 margin-bottom / 하 margin은 위의 상-우-좌-하로 쓰지 않고 한번에 쓴다. margin: 0 0 0 0; / 상-우-하-좌 margin: 0 0 0; / 상-우좌-하 margin: 0 0; / 상하-우좌 margin: 0; / 상우하좌 margin: auto; / 가로 중앙 margin: inherit / 상위 속성을 받는..

css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style

css 배경 이미지에 대해서 알아보자. 배경색은 기본이라 넘어간다. {background-color: 색;}으로 쓰면 배경색은 지정이 끝난다. 배경 이미지는 조금 알고 넘어가야 할 부분이 있어 정리해보자. .body { background-image: url("1234.png"); } 이미지 지정 방법은 기본 이렇다. 요소의 넓이 보다 이미지가 작으면 기본 반복으로 표현된다. 이미지 반복 설정 .body { background-image: url("1234.png"); background-repeat: repeat-x; } 이미지 가로 반복 설정. .body { background-image: url("1234.png"); background-repeat: repeat-y; } 이미지 세로 반복 설정. ..

css에서 색은 html 색과 99% 동일하다. 잠깐 살펴보고 넘어가면 될 것 같다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 색상에 대한 건 다음 글을 참고하자. 2019/10/12 - [웹코딩 어려워/· HTML] - HTML 색상 HTML 색상 html 색상은 색이름, rgb, hex, hsl, rgba, hsla 값을 사용한다. 파란배경 흰 글씨 nilgi.tistory.com