블로그 쪼아~♬ 블로그 쪼아~ (◕ᴗ◕✿)

PC / HTML.CSS / GAME / BLOG

아끼고 겸손

전체 글 2422

CSS font

웹페이지에 보여줄 폰트를 설정한다. * 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 반응형 글꼴

• CSS 2019.11.04

크롬 탭 말풍선/카드/도움말 없애기

크롬 원래 이랬나? 탭에 마우스를 올리니 말풍선 도움말이 생겨서 주소랑 북마크를 가린다. 이거 없었던 것 같은데? 아닌가 원래 그런 건가? 주소를 가리니 뭔가 불편하다. 크롬 설정에 찾아보니 이 기능을 끄고 켜는 건 없다. 그래서... 전문가가 아니라면 만지지 말라는 chrome://flags를 몇년만에 들어가 본다. chrome://flags는 크롬을 아주 디테일하게 설정할 수 있는 초전문적 페이지다. 이런게 있구나 하고 북마크만 해놨었는데 이걸 써먹을 줄이야. ▲ 들어가면 쏼라쏼라 영어로 되어 있다. 원래 영어 페이지에 들어가면 번역해서 보라고 알려주는데 그런 것도 없다. 이 말은 함부로 손대지 말라는 것 같다. 조심조심. ▲ 탭에 관한 거니 'tab' 검색해서 쭉~ 보니까 두 가지 의심 가는 걸 찾..

• LUCY 2019.11.04

에르다 스팩트럼 하는 방법

에르다 스팩트럼 하는 방법을 알려드릴게요. 총 2단계입니다. 1단계. 입장하고 조금 있으면 몬스터가 나와요. 몬스터는 무조건 잡으라고 있는 거예요. 잡자. 잡자. 잡자. 잡다 보면 설명처럼 게이지가 차는데 손 빠른 분은 70. 저처럼 느린 분은 100 채워주세요. 70~100차면 에르다 게이지통을 NPC/채집으로 활성화시킵니다. 그리고 통을 때리면 파란, 빨간, 보라색 구슬이 하나씩 나옵니다. 옛날에는 자동으로 구슬이 나왔는데 지금은 때려야 나와요. 소환수로 하면 편하긴 해요. 구슬을 NPC/채집 버튼으로 굴려서 똑같은 색 기둥에 밀어 넣으면 됩니다. 색 구슬은 1점이고 보라색 구슬은 아무 때나 밀어 넣으면 2점입니다. 총 10점 넣으면 1단계는 끝! 기둥 색은 양쪽 끝에 랜덤 색으로 나와요. 같은 자리..

• 오락실 2019.11.01

프리미어 프로 : 비디오 전환 효과 - 닦아내듯 지우기

비디오 전환 효과 - 닦아내듯 지우기를 배웠습니다. 복습해 볼게요. 많은 분들은 프리미어 프로를 영어 버전으로 쓰는데 전 한글로 씁니다. 영어로 쓰면 아무것도 못 할게 뻔해서요. 영어 버전 쓰시는분들에게는 도움드리지 못해서 죄송합니다.( _ _) ▲ 닦아내듯 지우기를 선택하고 잡아서 드래그, 드롭으로 클립과 클립 사이에 놓습니다. ▲ 이렇게 가운데 놓아집니다. 가운데 올려도 되고 앞 클립 끝, 뒤 클립 시작 부분에 놓아도 됩니다. 효과를 우 클릭하면 시간 조정도 되니 해보시고요. ▲ 효과를 적용하면 이런 창이뜹니다. 일단 넘어갑니다. 확인해주세요. ▲ 기본 옵션은 이러합니다. ▲ 기본 옵션 적용 화면입니다. 아무 효과도 없습니다. ㅡㅡ? 저도 해보고 이거 무슨 효과야? 했습니다. ▲ 그리고 다시 적용을 ..

CSS TEXT

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

• CSS 2019.10.30

프리미어 프로 : 비디오 전환 효과 - 나선형 상자

저번에 조리개 적용해봤는데 그 나물에 그 밥이라 지우기로 넘어갑니다. 오늘은 나선형 상자를 적용해볼게요. 이름으로 봐서는 블록이 나선형으로 돌돌 돌아가면서 다음 클립으로 전환될 것 같습니다. 근데 글을 쓰다보니 이미 해봤으면서 모른척하네요. 안 그럴게요. ㅡㅡ; ▲ 비디오 전환 효과 - 지우기 - 나선형 상자를 선택합니다. 참고로 효과 옆에 두 개의 아이콘이 있는데 저건 그래픽 카드의 종류에 따라 가속화를 쓸 수 있다는 뜻입니다. 맞나 ㅡㅡ? 몰라... ▲ 효과를 잡아서 드래그 드롭으로 놓으면 됩니다. 기본은 정중앙에 놓아집니다. 이건 원하는데로 앞 클립의 끝이나 뒤 클립의 처음에 놓을 수 있고 효과 컨트롤 패널에서 자유롭게 놓을 수 있습니다. ▲ 이번 효과도 크게 디테일하게 조절할 수 있는 부분이 없네..

CSS 외곽선 outline

외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. 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 : 속성 한 번에 쓰기. 기본 스타일/색/두께를 써야 한다. 외곽선과 테두리의 다른 점 : 외곽선은 다른 내용과 겹칠 수 있다. 외..

• CSS 2019.10.29

프리미어 프로 : 비디오 전환 효과 - 조리개 다이아몬드 형

요즘 프리미어 프로 공부를 거의 안 하고 있어요. 웹코딩 배우고 싶어서 공부하고 있습니다. html 태그부터 하고 있는데 어렵네요. 어렵다는 건 지루함도 있죠. 잠시 벗어나 프리미어 프로 공부 좀 하다 넘어가야겠어요. 계속해서 비디오 전환 효과를 익혀보겠습니다. 오늘은 조리개 다이아몬드 형입니다. 제목에서 이미 예상됩니다. ▲ 효과 패널에서 쓰고자 하는 효과를 드래그, 드롭해서 클립과 클립 사이에 놓으면 적용됩니다. ▲ 이렇게 적용하고 효과를 선택해서 효과 컨트롤 패널을 봅시다. ▲ 효과 컨트롤 패널은 효과를 조금 더 디테일하게 조절할 수 있는 창입니다. 시작점과 끝 점은 말 그대로 어디서부터 시작할지 어디서 끝낼지를 설정합니다. 시작점을 옮기면 조리개가 열리는 애니메이션이 처음부터가 아닌 조금 열린 상..

CSS 요소 구조

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

• CSS 2019.10.28

CSS 높이 / 폭

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

• CSS 2019.10.28

CSS 내부 여백 padding

내부 여백 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: ..

• CSS 2019.10.28

CSS 외부여백 margin

티스토리 스킨 편집하면서 지겹도록 봤던 태그다. 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 2019.10.28

CSS 배경

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 2019.10.28

CSS 색

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

• CSS 2019.10.28

미주알고주알

미주알고주알 아주 사소한 일까지 속속들이. 일의 속사정을 속속들이 자세히 알아보는 경우를 비유적으로 이르는 말. 유의어 : 자세히. 낱낱이. 속속들이. 시시콜콜. 세세히. 미주알 항문을 이루는 창자의 끝부분. 항문 외과 선생님께 이르는 말 : 선생님, 미주알이 빠져서 왔습니다. 그러니 미주알고주알은 창자속까지 속속들이 본다는 의미를 가지겠다. 미주알.

• 닐쌍 2019.10.26

CSS 외부, 내부, 인라인

html에 css를 적용하는 방법은 3가지가 있다. 외부 css 파일을 링크걸어 불러와 적용하는 방법. html 문서의 head 내부에 넣는 방법. html 요소 자체에 넣는 방법이 있다. 조금 더 자세하게 알아보자. 외부 css 외부 css 파일만 변경하면 html 문서 전체에 적용이 된다. 티스토리 스킨 편집이 이러한 경우다. 이렇게 외부 파일이 연결되 있다. 외부 파일은 "이름.css" 확장자 css로 저장해야 한다. 내부 css 내부 css는

• CSS 2019.10.26

CSS 요소 선택

css를 html의 요소를 선택해서 꾸미는 게 기본이다. 이전 과정에서 .nilgi {color: gold; font-size: 20px;} 이렇게 쓰는 거다라고 배웠다. 여기에서 앞 ".nilgi" 이 부분에 대해서 알아보자. html 요소를 선택하는 방법에는 5가지가 있다. 많기도 하다. 그러나 결국 1가지다. =-=? id > # html에서 id 요소를 선택한다. html에 nilgi라는 id를 가진 div 블록이 있다. id 이름은 자기 마음대로다. #nilgi {display: block;} 이렇게 id를 선택할 때는 이름 앞에 "#" 을 쓴다. id에 관한 건 다음 글을 참고해 주세요. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML id="" HTML id="" id는 이..

• CSS 2019.10.26

CSS 기본 / 주석

css를 쓰는 방법을 배우자. 기본적인 규칙과 주석 태그를 쓰는 방법. css를 쓰는 기본 방법 css 주석 태그 css도 html 처럼 주석 태그가 있다. 주석 태그는 태그를 설명하거나 시작과 끝을 알리는 데 사용한다. /* 내용 */ ← 이렇게 쓴다. 주석 태그는 화면에 표시 되지 않으며 닫는 태그는 따로 없다. 나는 /* 내용 시작 */ 이렇게 시작을 알리고 /* 내용 끝 */ 이렇게 쓰고 있다. css 주석 태그를 빨리 쓰는 방법은 오른쪽 숫자 키패드 num 키 옆에 보면 '/', '*'가 같이 있다. 빠르게 눌러주자. 타닥타닥! 참고로 html 주석은 이렇게 사용한다.

• CSS 2019.10.26