'coding' 카테고리의 글 목록 (33 Page)

[brackets] 브라켓으로 자식태그까지 한 번에 코딩하기

안녕하세요. 플입니다. 오늘은 브라킷을 이용해 자식 태그까지 한 번에 코딩해볼게요. 1. 꺽쇠 이용 (>) 꺽쇠 혹은 부등호라고도 하죠. > 바로 이 기호요. 이 기호를 이용해서 안쪽에 자식 태그를 넣을 것이라는 걸 알려줘요. 저는 태그 안쪽에 태그를 넣을 거예요. div>p 그러면 이렇게 입력해주시면 된답니다. 어렵지 않죠? 2. Tab키 자 이제 바로 Tab키를 눌러주세요. 탭키는 caps lock 키 위에 있는 키에요. Shift 위에 위에 있는 키랍니다. 이렇게 부모 태그와 자식 태그가 한 번에 생겼어요. 간편하죠? 이래서 다들 에디터 프로그램을 사용하나 봅니다. 질문이 있으시거나 다른 궁금하신 점이 있다면 댓글 남겨주세요~ 그럼 이만. 총총.

coding/editor · 2020. 5. 28. 07:30

[css] transform을 이용해 뒤집는 애니메이션 만들기

안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러스 + rat(쥐) 조합이 마음에 들었죠. 블루는 정말 단순한 작명이라고 생각하고는 있어요. Q.1 뒤집는 애니메이션을 만들 때 중요한 포인트는 앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 에 넣은 클래스를 주목해주세요. front와 back로 앞뒤를 구분해주었어요. 이게 뒷면 이게 앞면이에요. 기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요. 2. 포지션 li{ position:relative; } .front{ position:absolu..

coding/html + css · 2020. 5. 26. 07:30

[css] 마우스 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스 올리면 나타나는 버튼의 css를 진행해볼게요. 1. html 보고오기 2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기 2. 전체 css li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; a{ display:none; position:relative; width:100%; height:218px; text-align:center; background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; font-family:'NanumBarunpen'; fon..

coding/html + css · 2020. 5. 25. 07:30

[html] 마우스를 올리면 나타나는 버튼 만들기

안녕하세요. 플입니다. 마우스를 올리면 나타나는 버튼을 만들어볼게요. 1. 전체 html 한 방울 두 방울 오늘은 html 코드만 우선 진행할게요. 먼저 전체 코드를 보여드릴게요. 2. 코드 하나씩 뜯어보기 한 방울 마우스를 올리면 태그가 나타나게 만들 거예요. 그래서 태그와 태그를 나란히 넣어줬어요. 저는 여러 개를 만들 예정이기 때문에 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요. 3. css 보러 가기 준비 중 그럼 이만. 총총.

coding/html + css · 2020. 5. 22. 07:30

[개발자 도구] class 확인하기

안녕하세요. 플입니다. 개발자 도구에서 클래스를 확인해볼게요. 1. 태그 선택 class를 확인하기 위해서는 class가 적용된 태그에서 확인해야겠죠? 클래스가 적용된 태그를 아무거나 선택해줍니다. 2. 클래스 보기 오른쪽에 css가 잔뜩 적힌 창이 있을 거예요. 그쪽에서 오른쪽 상단에 보시면 .cls이라고 적힌 글이 보이실 거예요. .cls는 class를 말해요. 꾹 눌러봅시다. 그러면 이렇게 사용된 클래스를 확인할 수 있어요. banner라는 클래스를 사용했네요. 여기서는 클래스 추가가 가능해요. 3. 클래스 체크 해제 체크박스를 해제하면 이렇게 클래스를 해제해볼 수 있어요. 해제하면 어떤 클래스에서 css가 적용된 건지 어디에서 오류가 생긴 건지 찾을 때 유용해요. 그럼 이만. 총총.

coding/개발 팁 · 2020. 5. 21. 07:30

coding 265